@aglyn/plugins-commerce 1.0.0-beta.291 → 1.0.0-beta.292

package/src/lib/components/console/product-add-ons-fields.component.js

@@ -0,0 +1,356 @@
+/**
+ * @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 { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Collapse, FormControlLabel, IconButton, Stack, Switch, TextField, Typography } from "@mui/material";
+import { memo, useCallback, useId, useState } from "react";
+import * as CommerceModel from "../../model/index.js";
+function newId(prefix) {
+    return `${prefix}${Math.random().toString(36).slice(2, 10)}`;
+}
+/** Dollars as typed, to whole cents; blank is free. */ function centsFromDollars(value) {
+    const number = Math.round(Number(String(value).replace(/[^0-9.]/g, '')) * 100);
+    return Number.isFinite(number) && number > 0 ? number : 0;
+}
+/** Cents as the price field shows them; blank for free. */ function dollarsFromCents(cents) {
+    return cents ? (cents / 100).toFixed(2) : '';
+}
+/**
+ * What a choice's per-variant prices are called (AGL-4100): by the one
+ * option a product varies by ("Price by size"), else by variant.
+ */ export function priceByLabel(options) {
+    const named = options.filter((option)=>{
+        var _option_name;
+        return (_option_name = option.name) == null ? void 0 : _option_name.trim();
+    });
+    return named.length === 1 ? `Price by ${named[0].name.trim().toLowerCase()}` : 'Price by variant';
+}
+/** How a variant is named in a choice's price list. */ export function variantPriceLabel(variant) {
+    var _variant_options;
+    const values = Object.values((_variant_options = variant.options) != null ? _variant_options : {}).filter(Boolean);
+    return values.length ? values.join(' / ') : 'Default';
+}
+/** A new group, as the console makes it from now on: shown on the website (AGL-4100). */ export function newAddOnGroup() {
+    return {
+        id: newId('g'),
+        name: '',
+        min: 0,
+        max: 1,
+        online: true,
+        options: [
+            {
+                id: newId('o'),
+                name: '',
+                priceCents: 0
+            }
+        ]
+    };
+}
+/**
+ * A choice's prices by variant with one variant's price set or cleared. A
+ * cleared price follows the choice's own; with none left the field is
+ * dropped, never stored as `undefined` (the save is a client-direct write,
+ * which refuses one).
+ */ export function withVariantPrice(option, variantId, raw) {
+    const { priceCentsByVariant } = option, rest = _object_without_properties_loose(option, [
+        "priceCentsByVariant"
+    ]);
+    const next = _extends({}, priceCentsByVariant != null ? priceCentsByVariant : {});
+    if (raw.trim() === '') delete next[variantId];
+    else next[variantId] = centsFromDollars(raw);
+    return Object.keys(next).length ? _extends({}, rest, {
+        priceCentsByVariant: next
+    }) : rest;
+}
+/**
+ * The product's add-ons (AGL-4100, from the register's modifiers of
+ * AGL-3607): choices added to the item that are not stocked variants — walls
+ * and printing on a canopy, a milk in a latte — each free or adding to the
+ * price, and able to cost more on one variant than another. A group with a
+ * minimum of 1 or more must be answered before the item is added. Each group
+ * says whether the website's product page offers it; the register always
+ * does.
+ *
+ * Offered on every store, with or without the point of sale, and saved with
+ * the product, so editing it takes exactly what editing the product takes.
+ * Memoized on its own props like every section of this editor (AGL-3423).
+ */ export const ProductAddOnsFields = /*#__PURE__*/ memo(function ProductAddOnsFields(props) {
+    const { modifierGroups, options, variants, update } = props;
+    const helpId = useId();
+    const [pricedByVariant, setPricedByVariant] = useState({});
+    const setGroups = useCallback((groups)=>update({
+            modifierGroups: groups
+        }), [
+        update
+    ]);
+    const editGroup = (index, patch)=>setGroups(modifierGroups.map((group, at)=>at === index ? _extends({}, group, patch) : group));
+    const replaceOption = (groupIndex, optionIndex, next)=>{
+        const group = modifierGroups[groupIndex];
+        editGroup(groupIndex, {
+            options: group.options.map((option, at)=>at === optionIndex ? next : option)
+        });
+    };
+    const editOption = (groupIndex, optionIndex, patch)=>replaceOption(groupIndex, optionIndex, _extends({}, modifierGroups[groupIndex].options[optionIndex], patch));
+    const problem = CommerceModel.modifierGroupsProblem(modifierGroups);
+    const variesByVariant = variants.length > 1;
+    const byLabel = priceByLabel(options);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                id: helpId,
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Add-ons are choices added to the item that don’t need their own stock, such as walls or ' + 'printing on a canopy, or a milk in a latte. Each can be free or add to the price, and can ' + 'cost more on a larger size. Show a group on the website to offer it on the product’s page; ' + 'the register offers every group.'
+            }),
+            modifierGroups.map((group, groupIndex)=>/*#__PURE__*/ _jsx(Box, {
+                    role: "group",
+                    "aria-label": group.name || 'Add-on group',
+                    sx: {
+                        border: 1,
+                        borderColor: 'divider',
+                        borderRadius: 1,
+                        p: 2
+                    },
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1.5,
+                        children: [
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    alignItems: 'flex-start',
+                                    flexWrap: 'wrap',
+                                    rowGap: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Group name",
+                                        size: "small",
+                                        value: group.name,
+                                        onChange: (event)=>editGroup(groupIndex, {
+                                                name: event.target.value
+                                            }),
+                                        sx: {
+                                            flex: 1,
+                                            minWidth: (theme)=>theme.spacing(20)
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "At least",
+                                        size: "small",
+                                        value: group.min,
+                                        onChange: (event)=>editGroup(groupIndex, {
+                                                min: Math.max(0, Math.round(Number(event.target.value) || 0))
+                                            }),
+                                        helperText: group.min > 0 ? 'Required' : 'Optional',
+                                        sx: {
+                                            width: (theme)=>theme.spacing(12)
+                                        },
+                                        slotProps: {
+                                            htmlInput: {
+                                                inputMode: 'numeric'
+                                            }
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "At most",
+                                        size: "small",
+                                        value: group.max,
+                                        onChange: (event)=>editGroup(groupIndex, {
+                                                max: Math.max(1, Math.round(Number(event.target.value) || 1))
+                                            }),
+                                        sx: {
+                                            width: (theme)=>theme.spacing(12)
+                                        },
+                                        slotProps: {
+                                            htmlInput: {
+                                                inputMode: 'numeric'
+                                            }
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        color: "error",
+                                        onClick: ()=>setGroups(modifierGroups.filter((_group, at)=>at !== groupIndex)),
+                                        children: 'Remove group'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ _jsx(Switch, {
+                                    checked: group.online === true,
+                                    onChange: (event)=>editGroup(groupIndex, {
+                                            online: event.target.checked
+                                        })
+                                }),
+                                label: "Show on the website"
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: group.online === true ? 'Offered on the product’s page and at the register.' : 'Offered at the register only.'
+                            }),
+                            group.options.map((option, optionIndex)=>{
+                                var _pricedByVariant_optionKey, _option_priceCentsByVariant;
+                                const optionKey = `${group.id}:${option.id}`;
+                                const byVariantOpen = (_pricedByVariant_optionKey = pricedByVariant[optionKey]) != null ? _pricedByVariant_optionKey : Object.keys((_option_priceCentsByVariant = option.priceCentsByVariant) != null ? _option_priceCentsByVariant : {}).length > 0;
+                                return /*#__PURE__*/ _jsxs(Box, {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            sx: {
+                                                alignItems: 'center',
+                                                flexWrap: 'wrap',
+                                                rowGap: 1
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    label: "Choice",
+                                                    size: "small",
+                                                    value: option.name,
+                                                    onChange: (event)=>editOption(groupIndex, optionIndex, {
+                                                            name: event.target.value
+                                                        }),
+                                                    sx: {
+                                                        flex: 1,
+                                                        minWidth: (theme)=>theme.spacing(20)
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    label: "Adds ($)",
+                                                    size: "small",
+                                                    defaultValue: dollarsFromCents(option.priceCents),
+                                                    placeholder: "0.00",
+                                                    onBlur: (event)=>editOption(groupIndex, optionIndex, {
+                                                            priceCents: centsFromDollars(event.target.value)
+                                                        }),
+                                                    sx: {
+                                                        width: (theme)=>theme.spacing(15)
+                                                    },
+                                                    slotProps: {
+                                                        htmlInput: {
+                                                            inputMode: 'decimal'
+                                                        }
+                                                    }
+                                                }),
+                                                variesByVariant ? /*#__PURE__*/ _jsx(Button, {
+                                                    size: "small",
+                                                    "aria-expanded": byVariantOpen,
+                                                    onClick: ()=>setPricedByVariant((open)=>_extends({}, open, {
+                                                                [optionKey]: !byVariantOpen
+                                                            })),
+                                                    children: byLabel
+                                                }) : null,
+                                                /*#__PURE__*/ _jsx(IconButton, {
+                                                    "aria-label": `Remove ${option.name || 'choice'}`,
+                                                    onClick: ()=>editGroup(groupIndex, {
+                                                            options: group.options.filter((_option, at)=>at !== optionIndex),
+                                                            max: Math.max(1, Math.min(group.max, group.options.length - 1))
+                                                        }),
+                                                    children: '✕'
+                                                })
+                                            ]
+                                        }),
+                                        variesByVariant ? /*#__PURE__*/ _jsx(Collapse, {
+                                            in: byVariantOpen,
+                                            unmountOnExit: true,
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                spacing: 1,
+                                                sx: {
+                                                    pl: 2,
+                                                    pt: 1.5
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: `What “${option.name || 'this choice'}” adds on each. Leave one blank to use ` + 'the price above.'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        sx: {
+                                                            display: 'grid',
+                                                            gridTemplateColumns: {
+                                                                xs: '1fr',
+                                                                sm: 'repeat(2, minmax(0, 1fr))'
+                                                            },
+                                                            gap: 1
+                                                        },
+                                                        children: variants.map((variant)=>{
+                                                            var _option_priceCentsByVariant;
+                                                            return /*#__PURE__*/ _jsx(TextField, {
+                                                                label: variantPriceLabel(variant),
+                                                                size: "small",
+                                                                defaultValue: dollarsFromCents((_option_priceCentsByVariant = option.priceCentsByVariant) == null ? void 0 : _option_priceCentsByVariant[variant.id]),
+                                                                placeholder: dollarsFromCents(option.priceCents) || '0.00',
+                                                                onBlur: (event)=>replaceOption(groupIndex, optionIndex, withVariantPrice(modifierGroups[groupIndex].options[optionIndex], variant.id, event.target.value)),
+                                                                slotProps: {
+                                                                    htmlInput: {
+                                                                        inputMode: 'decimal'
+                                                                    }
+                                                                }
+                                                            }, variant.id);
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        }) : null
+                                    ]
+                                }, option.id);
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    onClick: ()=>editGroup(groupIndex, {
+                                            options: [
+                                                ...group.options,
+                                                {
+                                                    id: newId('o'),
+                                                    name: '',
+                                                    priceCents: 0
+                                                }
+                                            ]
+                                        }),
+                                    disabled: group.options.length >= CommerceModel.POS_MAX_MODIFIER_OPTIONS,
+                                    children: 'Add choice'
+                                })
+                            })
+                        ]
+                    })
+                }, group.id)),
+            /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    "aria-describedby": helpId,
+                    onClick: ()=>setGroups([
+                            ...modifierGroups,
+                            newAddOnGroup()
+                        ]),
+                    disabled: modifierGroups.length >= CommerceModel.POS_MAX_MODIFIER_GROUPS,
+                    children: 'New add-on group'
+                })
+            }),
+            problem && modifierGroups.length ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "warning.main",
+                children: problem
+            }) : null
+        ]
+    });
+});
+
+//# sourceMappingURL=product-add-ons-fields.component.js.map

package/src/lib/components/console/product-add-ons-fields.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/commerce/src/lib/components/console/product-add-ons-fields.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  Collapse,\n  FormControlLabel,\n  IconButton,\n  Stack,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { memo, useCallback, useId, useState } from 'react'\nimport * as CommerceModel from '../../model'\n\ntype Patch = Partial<CommerceModel.HostProduct>\n\nexport interface ProductAddOnsFieldsProps {\n  modifierGroups: readonly CommerceModel.ProductModifierGroup[]\n  /** The product's options, to name what a choice is priced by. */\n  options: readonly CommerceModel.ProductOption[]\n  /** The product's variants, each of which a choice may be priced on. */\n  variants: readonly Pick<CommerceModel.ProductVariant, 'id' | 'options'>[]\n  update: (patch: Patch) => void\n}\n\nfunction newId(prefix: string): string {\n  return `${prefix}${Math.random().toString(36).slice(2, 10)}`\n}\n\n/** Dollars as typed, to whole cents; blank is free. */\nfunction centsFromDollars(value: string): number {\n  const number = Math.round(Number(String(value).replace(/[^0-9.]/g, '')) * 100)\n  return Number.isFinite(number) && number > 0 ? number : 0\n}\n\n/** Cents as the price field shows them; blank for free. */\nfunction dollarsFromCents(cents: number | undefined): string {\n  return cents ? (cents / 100).toFixed(2) : ''\n}\n\n/**\n * What a choice's per-variant prices are called (AGL-4100): by the one\n * option a product varies by (\"Price by size\"), else by variant.\n */\nexport function priceByLabel(options: readonly Pick<CommerceModel.ProductOption, 'name'>[]): string {\n  const named = options.filter((option) => option.name?.trim())\n  return named.length === 1 ? `Price by ${named[0].name.trim().toLowerCase()}` : 'Price by variant'\n}\n\n/** How a variant is named in a choice's price list. */\nexport function variantPriceLabel(variant: Pick<CommerceModel.ProductVariant, 'options'>): string {\n  const values = Object.values(variant.options ?? {}).filter(Boolean)\n  return values.length ? values.join(' / ') : 'Default'\n}\n\n/** A new group, as the console makes it from now on: shown on the website (AGL-4100). */\nexport function newAddOnGroup(): CommerceModel.ProductModifierGroup {\n  return {\n    id: newId('g'),\n    name: '',\n    min: 0,\n    max: 1,\n    online: true,\n    options: [{ id: newId('o'), name: '', priceCents: 0 }],\n  }\n}\n\n/**\n * A choice's prices by variant with one variant's price set or cleared. A\n * cleared price follows the choice's own; with none left the field is\n * dropped, never stored as `undefined` (the save is a client-direct write,\n * which refuses one).\n */\nexport function withVariantPrice(\n  option: CommerceModel.ProductModifierOption,\n  variantId: string,\n  raw: string,\n): CommerceModel.ProductModifierOption {\n  const { priceCentsByVariant, ...rest } = option\n  const next = { ...(priceCentsByVariant ?? {}) }\n  if (raw.trim() === '') delete next[variantId]\n  else next[variantId] = centsFromDollars(raw)\n  return Object.keys(next).length ? { ...rest, priceCentsByVariant: next } : rest\n}\n\n/**\n * The product's add-ons (AGL-4100, from the register's modifiers of\n * AGL-3607): choices added to the item that are not stocked variants — walls\n * and printing on a canopy, a milk in a latte — each free or adding to the\n * price, and able to cost more on one variant than another. A group with a\n * minimum of 1 or more must be answered before the item is added. Each group\n * says whether the website's product page offers it; the register always\n * does.\n *\n * Offered on every store, with or without the point of sale, and saved with\n * the product, so editing it takes exactly what editing the product takes.\n * Memoized on its own props like every section of this editor (AGL-3423).\n */\nexport const ProductAddOnsFields = memo(function ProductAddOnsFields(\n  props: ProductAddOnsFieldsProps,\n) {\n  const { modifierGroups, options, variants, update } = props\n  const helpId = useId()\n  const [pricedByVariant, setPricedByVariant] = useState<Record<string, boolean>>({})\n  const setGroups = useCallback(\n    (groups: CommerceModel.ProductModifierGroup[]) => update({ modifierGroups: groups }),\n    [update],\n  )\n  const editGroup = (index: number, patch: Partial<CommerceModel.ProductModifierGroup>) =>\n    setGroups(modifierGroups.map((group, at) => (at === index ? { ...group, ...patch } : group)))\n  const replaceOption = (\n    groupIndex: number,\n    optionIndex: number,\n    next: CommerceModel.ProductModifierOption,\n  ) => {\n    const group = modifierGroups[groupIndex]\n    editGroup(groupIndex, {\n      options: group.options.map((option, at) => (at === optionIndex ? next : option)),\n    })\n  }\n  const editOption = (\n    groupIndex: number,\n    optionIndex: number,\n    patch: Partial<CommerceModel.ProductModifierOption>,\n  ) => replaceOption(groupIndex, optionIndex, { ...modifierGroups[groupIndex].options[optionIndex], ...patch })\n  const problem = CommerceModel.modifierGroupsProblem(modifierGroups)\n  const variesByVariant = variants.length > 1\n  const byLabel = priceByLabel(options)\n\n  return (\n    <Stack spacing={2}>\n      <Typography id={helpId} variant=\"body2\" color=\"text.secondary\">\n        {'Add-ons are choices added to the item that don’t need their own stock, such as walls or ' +\n          'printing on a canopy, or a milk in a latte. Each can be free or add to the price, and can ' +\n          'cost more on a larger size. Show a group on the website to offer it on the product’s page; ' +\n          'the register offers every group.'}\n      </Typography>\n      {modifierGroups.map((group, groupIndex) => (\n        <Box\n          key={group.id}\n          role=\"group\"\n          aria-label={group.name || 'Add-on group'}\n          sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 2 }}\n        >\n          <Stack spacing={1.5}>\n            <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'flex-start', flexWrap: 'wrap', rowGap: 1 }}>\n              <TextField\n                label=\"Group name\"\n                size=\"small\"\n                value={group.name}\n                onChange={(event) => editGroup(groupIndex, { name: event.target.value })}\n                sx={{ flex: 1, minWidth: (theme) => theme.spacing(20) }}\n              />\n              <TextField\n                label=\"At least\"\n                size=\"small\"\n                value={group.min}\n                onChange={(event) =>\n                  editGroup(groupIndex, { min: Math.max(0, Math.round(Number(event.target.value) || 0)) })\n                }\n                helperText={group.min > 0 ? 'Required' : 'Optional'}\n                sx={{ width: (theme) => theme.spacing(12) }}\n                slotProps={{ htmlInput: { inputMode: 'numeric' } }}\n              />\n              <TextField\n                label=\"At most\"\n                size=\"small\"\n                value={group.max}\n                onChange={(event) =>\n                  editGroup(groupIndex, { max: Math.max(1, Math.round(Number(event.target.value) || 1)) })\n                }\n                sx={{ width: (theme) => theme.spacing(12) }}\n                slotProps={{ htmlInput: { inputMode: 'numeric' } }}\n              />\n              <Button\n                color=\"error\"\n                onClick={() => setGroups(modifierGroups.filter((_group, at) => at !== groupIndex))}\n              >\n                {'Remove group'}\n              </Button>\n            </Stack>\n            <FormControlLabel\n              control={\n                <Switch\n                  checked={group.online === true}\n                  onChange={(event) => editGroup(groupIndex, { online: event.target.checked })}\n                />\n              }\n              label=\"Show on the website\"\n            />\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              {group.online === true\n                ? 'Offered on the product’s page and at the register.'\n                : 'Offered at the register only.'}\n            </Typography>\n            {group.options.map((option, optionIndex) => {\n              const optionKey = `${group.id}:${option.id}`\n              const byVariantOpen =\n                pricedByVariant[optionKey] ?? Object.keys(option.priceCentsByVariant ?? {}).length > 0\n              return (\n                <Box key={option.id}>\n                  <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 1 }}>\n                    <TextField\n                      label=\"Choice\"\n                      size=\"small\"\n                      value={option.name}\n                      onChange={(event) => editOption(groupIndex, optionIndex, { name: event.target.value })}\n                      sx={{ flex: 1, minWidth: (theme) => theme.spacing(20) }}\n                    />\n                    <TextField\n                      label=\"Adds ($)\"\n                      size=\"small\"\n                      defaultValue={dollarsFromCents(option.priceCents)}\n                      placeholder=\"0.00\"\n                      onBlur={(event) =>\n                        editOption(groupIndex, optionIndex, { priceCents: centsFromDollars(event.target.value) })\n                      }\n                      sx={{ width: (theme) => theme.spacing(15) }}\n                      slotProps={{ htmlInput: { inputMode: 'decimal' } }}\n                    />\n                    {variesByVariant ? (\n                      <Button\n                        size=\"small\"\n                        aria-expanded={byVariantOpen}\n                        onClick={() =>\n                          setPricedByVariant((open) => ({ ...open, [optionKey]: !byVariantOpen }))\n                        }\n                      >\n                        {byLabel}\n                      </Button>\n                    ) : null}\n                    <IconButton\n                      aria-label={`Remove ${option.name || 'choice'}`}\n                      onClick={() =>\n                        editGroup(groupIndex, {\n                          options: group.options.filter((_option, at) => at !== optionIndex),\n                          max: Math.max(1, Math.min(group.max, group.options.length - 1)),\n                        })\n                      }\n                    >\n                      {'✕'}\n                    </IconButton>\n                  </Stack>\n                  {variesByVariant ? (\n                    <Collapse in={byVariantOpen} unmountOnExit>\n                      <Stack spacing={1} sx={{ pl: 2, pt: 1.5 }}>\n                        <Typography variant=\"caption\" color=\"text.secondary\">\n                          {`What “${option.name || 'this choice'}” adds on each. Leave one blank to use ` +\n                            'the price above.'}\n                        </Typography>\n                        <Box\n                          sx={{\n                            display: 'grid',\n                            gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, minmax(0, 1fr))' },\n                            gap: 1,\n                          }}\n                        >\n                          {variants.map((variant) => (\n                            <TextField\n                              key={variant.id}\n                              label={variantPriceLabel(variant)}\n                              size=\"small\"\n                              defaultValue={dollarsFromCents(option.priceCentsByVariant?.[variant.id])}\n                              placeholder={dollarsFromCents(option.priceCents) || '0.00'}\n                              onBlur={(event) =>\n                                replaceOption(\n                                  groupIndex,\n                                  optionIndex,\n                                  withVariantPrice(\n                                    modifierGroups[groupIndex].options[optionIndex],\n                                    variant.id,\n                                    event.target.value,\n                                  ),\n                                )\n                              }\n                              slotProps={{ htmlInput: { inputMode: 'decimal' } }}\n                            />\n                          ))}\n                        </Box>\n                      </Stack>\n                    </Collapse>\n                  ) : null}\n                </Box>\n              )\n            })}\n            <Box>\n              <Button\n                onClick={() =>\n                  editGroup(groupIndex, {\n                    options: [...group.options, { id: newId('o'), name: '', priceCents: 0 }],\n                  })\n                }\n                disabled={group.options.length >= CommerceModel.POS_MAX_MODIFIER_OPTIONS}\n              >\n                {'Add choice'}\n              </Button>\n            </Box>\n          </Stack>\n        </Box>\n      ))}\n      <Box>\n        <Button\n          variant=\"outlined\"\n          aria-describedby={helpId}\n          onClick={() => setGroups([...modifierGroups, newAddOnGroup()])}\n          disabled={modifierGroups.length >= CommerceModel.POS_MAX_MODIFIER_GROUPS}\n        >\n          {'New add-on group'}\n        </Button>\n      </Box>\n      {problem && modifierGroups.length ? (\n        <Typography variant=\"body2\" color=\"warning.main\">\n          {problem}\n        </Typography>\n      ) : null}\n    </Stack>\n  )\n})\n"],"names":["Box","Button","Collapse","FormControlLabel","IconButton","Stack","Switch","TextField","Typography","memo","useCallback","useId","useState","CommerceModel","newId","prefix","Math","random","toString","slice","centsFromDollars","value","number","round","Number","String","replace","isFinite","dollarsFromCents","cents","toFixed","priceByLabel","options","named","filter","option","name","trim","length","toLowerCase","variantPriceLabel","variant","values","Object","Boolean","join","newAddOnGroup","id","min","max","online","priceCents","withVariantPrice","variantId","raw","priceCentsByVariant","rest","next","keys","ProductAddOnsFields","props","modifierGroups","variants","update","helpId","pricedByVariant","setPricedByVariant","setGroups","groups","editGroup","index","patch","map","group","at","replaceOption","groupIndex","optionIndex","editOption","problem","modifierGroupsProblem","variesByVariant","byLabel","spacing","color","role","aria-label","sx","border","borderColor","borderRadius","p","direction","alignItems","flexWrap","rowGap","label","size","onChange","event","target","flex","minWidth","theme","helperText","width","slotProps","htmlInput","inputMode","onClick","_group","control","checked","optionKey","byVariantOpen","defaultValue","placeholder","onBlur","aria-expanded","open","_option","in","unmountOnExit","pl","pt","display","gridTemplateColumns","xs","sm","gap","disabled","POS_MAX_MODIFIER_OPTIONS","aria-describedby","POS_MAX_MODIFIER_GROUPS"],"mappings":"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"}

package/src/lib/components/console/product-editor-dialog.component.js

@@ -38,6 +38,7 @@ import { PRODUCT_EDITOR_ZONE } from "./product-zones.js";
 import { MembersVideosField, PaidDownloadAddButton, PaidMediaProtection } from "./paid-media.js";
 import { ProductCheckInFields } from "./product-check-in-fields.component.js";
 import { ProductRegisterFields, ProductSellOnlineField } from "./product-register-fields.component.js";
+import { ProductAddOnsFields } from "./product-add-ons-fields.component.js";
 import { ProductKioskOfferField } from "./product-kiosk-offer-field.component.js";
 /**
  * The platform's own store's "Point of sale hardware" choice (AGL-4038),
@@ -1103,7 +1104,7 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
  * first variant so the legacy Product block + checkout API (AGL-90) keep
  * charging correctly without reading the variants array.
  */ export function ProductEditorDialog(props) {
-    var _ref, _ref1, _current_description, _current_tags, _current_categoryIds, _current_options, _current_mediaUrls, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _current_description1, _ref15, _ref16, _current_description2, _current_tags1, _current_mediaUrls1, _current_options1, _subs_planLabel, _gifts_planLabel, _subs_planLabel1, _gifts_planLabel1, _current_oversellPolicy, _current_modifierGroups, _current_digitalFiles, _current_gatedVideos;
+    var _ref, _ref1, _current_description, _current_tags, _current_categoryIds, _current_options, _current_mediaUrls, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _current_description1, _ref15, _ref16, _current_description2, _current_tags1, _current_mediaUrls1, _current_options1, _subs_planLabel, _gifts_planLabel, _subs_planLabel1, _gifts_planLabel1, _current_oversellPolicy, _current_modifierGroups, _current_options2, _current_digitalFiles, _current_gatedVideos;
     var _current_seo, _current_seo1, _current_shipping, _current_shipping1, _current_shipping2, _current_shipping3, _current_shipping4, _current_channel, _current_channel1, _current_channel2, _current_channel3, _current_channel4, _current_seo2, _current_seo3, _current_seo4, _current_seo5, _current_seo6, _current_seo7;
     const { hostId, product, seedFromCache, seedUnreadable, open, onClose } = props;
     /**
@@ -1355,7 +1356,12 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
         title: (_ref15 = (_current_seo2 = current.seo) == null ? void 0 : _current_seo2.title) != null ? _ref15 : '',
         description: (_ref16 = (_current_seo3 = current.seo) == null ? void 0 : _current_seo3.description) != null ? _ref16 : ''
     });
-    const error = current.name ? CommerceModel.validateProduct(current) : null;
+    /**
+   * More combinations than a product holds (AGL-4100): said with the count
+   * beside the options, the values kept as typed, and Save refused — the
+   * matrix used to stop at 100 and drop the rest without a word.
+   */ const matrixProblem = CommerceModel.variantMatrixProblem(current.options);
+    const error = matrixProblem != null ? matrixProblem : current.name ? CommerceModel.validateProduct(current) : null;
     /**
    * Stock tracking is inert on a subscription-only product (AGL-1744) —
    * nothing decrements it on the first charge or on any renewal, so the
@@ -1426,6 +1432,13 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
                 name: '',
                 values: []
             }, options[index], patch);
+            // Past the variant ceiling (AGL-4100) the options are kept as typed
+            // and the variants left as they are: nothing is built short, nothing
+            // dropped, and Save stays refused (`matrixProblem`) until values are
+            // removed — when the matrix is rebuilt from them as below.
+            if (CommerceModel.variantMatrixProblem(options)) return {
+                options
+            };
             // Regenerate the matrix, carrying data over by option-combo key so
             // edits to prices/SKUs survive option tweaks.
             const previous = new Map(at.variants.map((variant)=>[
@@ -1685,6 +1698,10 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
                         onChange: handleOptionsChange,
                         onValues: setOptionValues
                     }),
+                    matrixProblem ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        children: matrixProblem
+                    }) : null,
                     /*#__PURE__*/ _jsx(ProductVariantsTable, {
                         variants: current.variants,
                         stockApplies: stockApplies,
@@ -1731,13 +1748,22 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
                         update: update,
                         replaceDraft: replaceDraft
                     }),
+                    /*#__PURE__*/ _jsx(Divider, {
+                        textAlign: "left",
+                        children: 'Add-ons'
+                    }),
+                    /*#__PURE__*/ _jsx(ProductAddOnsFields, {
+                        modifierGroups: (_current_modifierGroups = current.modifierGroups) != null ? _current_modifierGroups : NO_MODIFIER_GROUPS,
+                        options: (_current_options2 = current.options) != null ? _current_options2 : NO_OPTIONS,
+                        variants: current.variants,
+                        update: update
+                    }),
                     pos.ready && pos.entitled ? /*#__PURE__*/ _jsxs(_Fragment, {
                         children: [
                             /*#__PURE__*/ _jsx(ProductRegisterFields, {
                                 posQuickKey: Boolean(current.posQuickKey),
                                 sellOnline: CommerceModel.productSellsOnline(current),
                                 inStoreReviews: current.inStoreReviews,
-                                modifierGroups: (_current_modifierGroups = current.modifierGroups) != null ? _current_modifierGroups : NO_MODIFIER_GROUPS,
                                 update: update
                             }),
                             /*#__PURE__*/ _jsx(ProductKioskOfferField, {
@@ -1764,7 +1790,7 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
                             /*#__PURE__*/ _jsx(EntitlementUpsell, {
                                 planLabel: pos.planLabel,
                                 upgradeHref: pos.upgradeHref,
-                                children: 'Register quick keys, modifier groups (sizes, add-ons), check-in at the window and selling a product in person only come with the point of sale.'
+                                children: 'Register quick keys, check-in at the window and selling a product in person only come with the point of sale.'
                             }),
                             !CommerceModel.productSellsOnline(current) ? /*#__PURE__*/ _jsx(ProductSellOnlineField, {
                                 sellOnline: false,
@@ -1809,7 +1835,7 @@ const MemoPaidDownloadAddButton = /*#__PURE__*/ memo(PaidDownloadAddButton);
                         hasImage: Boolean((_current_seo7 = current.seo) == null ? void 0 : _current_seo7.imageUrl),
                         proposeValues: proposeSeoValues
                     }) : null,
-                    error ? /*#__PURE__*/ _jsx(Alert, {
+                    error && error !== matrixProblem ? /*#__PURE__*/ _jsx(Alert, {
                         severity: "warning",
                         children: error
                     }) : null,