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

package/src/lib/components/product-add-ons.js

@@ -0,0 +1,136 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { modifierGroupRequired, modifierOptionPriceCents } from "../model/product-modifiers.js";
+/** The picks with one group's answer replaced, in the groups' own order. */ export function withGroupAnswer(groups, value, groupId, optionIds) {
+    const others = value.filter((pick)=>pick.groupId !== groupId);
+    const answer = optionIds.map((optionId)=>({
+            groupId,
+            optionId
+        }));
+    const order = new Map(groups.map((group, index)=>[
+            group.id,
+            index
+        ]));
+    return [
+        ...others,
+        ...answer
+    ].sort((a, b)=>{
+        var _order_get, _order_get1;
+        return ((_order_get = order.get(a.groupId)) != null ? _order_get : 0) - ((_order_get1 = order.get(b.groupId)) != null ? _order_get1 : 0);
+    });
+}
+/** What a group asks for, said under it. */ export function addOnGroupHint(group) {
+    if (group.max === 1) return group.min > 0 ? 'Choose one' : 'Optional';
+    if (group.min > 0 && group.min === group.max) return `Choose ${group.min}`;
+    if (group.min > 0) return `Choose ${group.min} to ${group.max}`;
+    return `Choose up to ${group.max}`;
+}
+/**
+ * The add-ons a product's page offers (AGL-4100): a group that takes one
+ * choice is a select, one that takes several is a set of checkboxes, each
+ * choice with what it adds on the picked variant. A required group is marked
+ * as the form builder marks a required field. Its own chunk, loaded only by a
+ * product that has add-ons on the website.
+ */ export function ProductAddOns(props) {
+    const { groups, variantId, value, onChange, formatCents, disabled } = props;
+    const priceLabel = (option)=>{
+        const cents = modifierOptionPriceCents(option, variantId);
+        return cents > 0 ? `${option.name} (+${formatCents(cents)})` : option.name;
+    };
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 1.5,
+        sx: {
+            mb: 1.5
+        },
+        children: groups.map((group)=>{
+            const chosen = value.filter((pick)=>pick.groupId === group.id).map((pick)=>pick.optionId);
+            const required = modifierGroupRequired(group);
+            if (group.max === 1) {
+                var _chosen_;
+                return /*#__PURE__*/ _jsxs(TextField, {
+                    select: true,
+                    size: "small",
+                    fullWidth: true,
+                    required: required,
+                    disabled: disabled,
+                    label: group.name,
+                    value: (_chosen_ = chosen[0]) != null ? _chosen_ : '',
+                    onChange: (event)=>onChange(withGroupAnswer(groups, value, group.id, event.target.value ? [
+                            String(event.target.value)
+                        ] : [])),
+                    helperText: addOnGroupHint(group),
+                    children: [
+                        required ? null : /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "",
+                            children: /*#__PURE__*/ _jsx("em", {
+                                children: 'None'
+                            })
+                        }),
+                        group.options.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.id,
+                                children: priceLabel(option)
+                            }, option.id))
+                    ]
+                }, group.id);
+            }
+            const full = chosen.length >= group.max;
+            return /*#__PURE__*/ _jsxs(FormControl, {
+                component: "fieldset",
+                required: required,
+                disabled: disabled,
+                variant: "standard",
+                children: [
+                    /*#__PURE__*/ _jsx(FormLabel, {
+                        component: "legend",
+                        children: group.name
+                    }),
+                    /*#__PURE__*/ _jsx(FormGroup, {
+                        children: group.options.map((option)=>{
+                            const checked = chosen.includes(option.id);
+                            return /*#__PURE__*/ _jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ _jsx(Checkbox, {
+                                    size: "small",
+                                    checked: checked,
+                                    disabled: disabled || !checked && full,
+                                    onChange: (event)=>onChange(withGroupAnswer(groups, value, group.id, event.target.checked ? group.options.map((entry)=>entry.id).filter((id)=>id === option.id || chosen.includes(id)) : chosen.filter((id)=>id !== option.id)))
+                                }),
+                                label: priceLabel(option)
+                            }, option.id);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(FormHelperText, {
+                        children: addOnGroupHint(group)
+                    })
+                ]
+            }, group.id);
+        })
+    });
+}
+ProductAddOns.displayName = 'ProductAddOns';
+export default ProductAddOns;
+
+//# sourceMappingURL=product-add-ons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/product-add-ons.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 Checkbox from '@mui/material/Checkbox'\nimport FormControl from '@mui/material/FormControl'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport FormGroup from '@mui/material/FormGroup'\nimport FormHelperText from '@mui/material/FormHelperText'\nimport FormLabel from '@mui/material/FormLabel'\nimport MenuItem from '@mui/material/MenuItem'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\nimport {\n  modifierGroupRequired,\n  modifierOptionPriceCents,\n  type ModifierSelection,\n  type ProductModifierGroup,\n  type ProductModifierOption,\n} from '../model/product-modifiers'\n\nexport interface ProductAddOnsProps {\n  /** The groups the website shows, as the product's page received them. */\n  groups: readonly ProductModifierGroup[]\n  /** The variant picked: a choice priced by variant shows its price on it. */\n  variantId?: string\n  value: readonly ModifierSelection[]\n  onChange: (next: ModifierSelection[]) => void\n  /** The store's money, e.g. `$1,250.00`. */\n  formatCents: (cents: number) => string\n  disabled?: boolean\n}\n\n/** The picks with one group's answer replaced, in the groups' own order. */\nexport function withGroupAnswer(\n  groups: readonly ProductModifierGroup[],\n  value: readonly ModifierSelection[],\n  groupId: string,\n  optionIds: readonly string[],\n): ModifierSelection[] {\n  const others = value.filter((pick) => pick.groupId !== groupId)\n  const answer = optionIds.map((optionId) => ({ groupId, optionId }))\n  const order = new Map(groups.map((group, index) => [group.id, index]))\n  return [...others, ...answer].sort(\n    (a, b) => (order.get(a.groupId) ?? 0) - (order.get(b.groupId) ?? 0),\n  )\n}\n\n/** What a group asks for, said under it. */\nexport function addOnGroupHint(group: Pick<ProductModifierGroup, 'min' | 'max'>): string {\n  if (group.max === 1) return group.min > 0 ? 'Choose one' : 'Optional'\n  if (group.min > 0 && group.min === group.max) return `Choose ${group.min}`\n  if (group.min > 0) return `Choose ${group.min} to ${group.max}`\n  return `Choose up to ${group.max}`\n}\n\n/**\n * The add-ons a product's page offers (AGL-4100): a group that takes one\n * choice is a select, one that takes several is a set of checkboxes, each\n * choice with what it adds on the picked variant. A required group is marked\n * as the form builder marks a required field. Its own chunk, loaded only by a\n * product that has add-ons on the website.\n */\nexport function ProductAddOns(props: ProductAddOnsProps) {\n  const { groups, variantId, value, onChange, formatCents, disabled } = props\n  const priceLabel = (option: ProductModifierOption) => {\n    const cents = modifierOptionPriceCents(option, variantId)\n    return cents > 0 ? `${option.name} (+${formatCents(cents)})` : option.name\n  }\n  return (\n    <Stack spacing={1.5} sx={{ mb: 1.5 }}>\n      {groups.map((group) => {\n        const chosen = value\n          .filter((pick) => pick.groupId === group.id)\n          .map((pick) => pick.optionId)\n        const required = modifierGroupRequired(group)\n        if (group.max === 1) {\n          return (\n            <TextField\n              key={group.id}\n              select\n              size=\"small\"\n              fullWidth\n              required={required}\n              disabled={disabled}\n              label={group.name}\n              value={chosen[0] ?? ''}\n              onChange={(event) =>\n                onChange(\n                  withGroupAnswer(\n                    groups,\n                    value,\n                    group.id,\n                    event.target.value ? [String(event.target.value)] : [],\n                  ),\n                )\n              }\n              helperText={addOnGroupHint(group)}\n            >\n              {required ? null : (\n                <MenuItem value=\"\">\n                  <em>{'None'}</em>\n                </MenuItem>\n              )}\n              {group.options.map((option) => (\n                <MenuItem key={option.id} value={option.id}>\n                  {priceLabel(option)}\n                </MenuItem>\n              ))}\n            </TextField>\n          )\n        }\n        const full = chosen.length >= group.max\n        return (\n          <FormControl\n            key={group.id}\n            component=\"fieldset\"\n            required={required}\n            disabled={disabled}\n            variant=\"standard\"\n          >\n            <FormLabel component=\"legend\">{group.name}</FormLabel>\n            <FormGroup>\n              {group.options.map((option) => {\n                const checked = chosen.includes(option.id)\n                return (\n                  <FormControlLabel\n                    key={option.id}\n                    control={\n                      <Checkbox\n                        size=\"small\"\n                        checked={checked}\n                        disabled={disabled || (!checked && full)}\n                        onChange={(event) =>\n                          onChange(\n                            withGroupAnswer(\n                              groups,\n                              value,\n                              group.id,\n                              event.target.checked\n                                ? group.options\n                                    .map((entry) => entry.id)\n                                    .filter((id) => id === option.id || chosen.includes(id))\n                                : chosen.filter((id) => id !== option.id),\n                            ),\n                          )\n                        }\n                      />\n                    }\n                    label={priceLabel(option)}\n                  />\n                )\n              })}\n            </FormGroup>\n            <FormHelperText>{addOnGroupHint(group)}</FormHelperText>\n          </FormControl>\n        )\n      })}\n    </Stack>\n  )\n}\n\nProductAddOns.displayName = 'ProductAddOns'\n\nexport default ProductAddOns\n"],"names":["Checkbox","FormControl","FormControlLabel","FormGroup","FormHelperText","FormLabel","MenuItem","Stack","TextField","modifierGroupRequired","modifierOptionPriceCents","withGroupAnswer","groups","value","groupId","optionIds","others","filter","pick","answer","map","optionId","order","Map","group","index","id","sort","a","b","get","addOnGroupHint","max","min","ProductAddOns","props","variantId","onChange","formatCents","disabled","priceLabel","option","cents","name","spacing","sx","mb","chosen","required","select","size","fullWidth","label","event","target","String","helperText","em","options","full","length","component","variant","checked","includes","control","entry","displayName"],"mappings":"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"}

package/src/lib/components/product-detail.d.ts

@@ -70,7 +70,23 @@ interface Detail {
     subscriptionOptional?: boolean;
     /** The store's time zone, when a variant asks for a use day (AGL-4043). */
     useDayTimeZone?: string;
+    /**
+     * The add-ons the page offers (AGL-4100): only groups shown on the
+     * website ever arrive here.
+     */
+    modifierGroups?: CommerceModel.ProductModifierGroup[];
 }
+/**
+ * The page's add-ons for the variant picked (AGL-4100): whether every
+ * required group is answered — the server's own check, run on the groups the
+ * page was sent — and what the picks so far add to one unit, for the live
+ * price. Display only; every sale door prices them again from the product.
+ */
+export declare function productPageAddOns(product: Pick<Detail, 'name' | 'modifierGroups'>, picks: readonly CommerceModel.ModifierSelection[], variantId: string | undefined): {
+    ready: boolean;
+    extraCents: number;
+    error?: string;
+};
 /** How one option is offered on the page. */
 export interface OptionPresentation {
     name: string;

package/src/lib/components/product-detail.js

@@ -65,6 +65,12 @@ export const ID = 'product-detail';
  * The use-day picker (AGL-4043), in its own chunk: only a product whose
  * variant asks for a day downloads the date picker.
  */ const UseDayPicker = /*#__PURE__*/ lazy(()=>import("./use-day-picker.js"));
+/**
+ * The add-on pickers (AGL-4100), in their own chunk: only a product with
+ * add-ons on the website downloads them.
+ */ const ProductAddOns = /*#__PURE__*/ lazy(()=>import("./product-add-ons.js"));
+/** Money on the product page, in the store's currency: `$1,250.00`, never `$1250`. */ const money = (cents)=>CommerceModel.formatOrderMoney(cents);
+/** A price in dollars as the page prints it. */ const moneyFromUsd = (priceUsd)=>money(Math.round(priceUsd * 100));
 const SAMPLE = {
     id: 'sample',
     name: 'Sample product',
@@ -119,15 +125,43 @@ const SAMPLE = {
  * `price` is the resolved variant's, which arrived from the server's product
  * payload — the same figure `checkout` prices the charge from, so the reported
  * value and the amount Stripe collects come from one source.
- */ function buyItem(product, variant, quantity) {
+ */ function buyItem(product, variant, quantity, /** What one unit costs with its add-ons (AGL-4100), when the page has some. */ unitCents) {
     var _ref;
     return {
         item_id: product.id,
         item_name: product.name,
-        price: (_ref = variant == null ? void 0 : variant.priceUsd) != null ? _ref : undefined,
+        price: unitCents !== undefined && typeof (variant == null ? void 0 : variant.priceUsd) === 'number' ? unitCents / 100 : (_ref = variant == null ? void 0 : variant.priceUsd) != null ? _ref : undefined,
         quantity
     };
 }
+/**
+ * The page's add-ons for the variant picked (AGL-4100): whether every
+ * required group is answered — the server's own check, run on the groups the
+ * page was sent — and what the picks so far add to one unit, for the live
+ * price. Display only; every sale door prices them again from the product.
+ */ export function productPageAddOns(product, picks, variantId) {
+    var _product_modifierGroups;
+    const groups = (_product_modifierGroups = product.modifierGroups) != null ? _product_modifierGroups : [];
+    if (!groups.length) return {
+        ready: true,
+        extraCents: 0
+    };
+    const source = {
+        name: product.name,
+        modifierGroups: groups
+    };
+    const checked = CommerceModel.resolveLineModifiers(source, picks, variantId);
+    const extraCents = CommerceModel.soldLineModifiers(source, picks, variantId).reduce((sum, modifier)=>sum + modifier.priceCents, 0);
+    return checked.ok ? {
+        ready: true,
+        extraCents
+    } : _extends({
+        ready: false,
+        extraCents
+    }, checked.error ? {
+        error: checked.error
+    } : {});
+}
 /**
  * Which options are a CHOICE (AGL-3676 follow-up). A select with one entry —
  * or with entries no variant carries — is not a choice, and on a live store
@@ -218,7 +252,7 @@ function slugFromLocation() {
  * variant. Resolves its product from the /products/{slug} URL unless a
  * slug prop pins it; sample data on the inert canvas.
  */ const ProductDetail = /*#__PURE__*/ forwardRef((props, ref)=>{
-    var _ref, _ref1, _ref2;
+    var _ref, _ref1, _ref2, _ref3;
     var _site_pageData;
     const { slug: slugProp, buyLabel, hideDescription, showCoupon, showDetails, showShipping } = props, rest = _object_without_properties_loose(props, [
         "slug",
@@ -255,6 +289,8 @@ function slugFromLocation() {
     // used to set this, so it opened with nothing selected — an empty select.
     const [selections, setSelections] = useState(()=>initialSelections(seededProduct));
     const [quantity, setQuantity] = useState(1);
+    /** The add-ons picked (AGL-4100), ids only. */ const [addOns, setAddOns] = useState([]);
+    /** Why the cart refused the line, when it did. */ const [addRefusal, setAddRefusal] = useState('');
     /**
      * The day the buyer chose to use a pass (AGL-4043), `YYYY-MM-DD` on the
      * store's calendar; '' is the day they buy, which is also the default.
@@ -326,6 +362,7 @@ function slugFromLocation() {
                     ]
                 });
                 setSelections(initialSelections(product));
+                setAddOns([]);
             }
         }).catch(()=>{
             if (active) setDetail('missing');
@@ -349,6 +386,14 @@ function slugFromLocation() {
         resolved,
         selections
     ]);
+    // The add-ons picked, checked and priced on this variant (AGL-4100).
+    const addOnGroups = (_ref = resolved == null ? void 0 : resolved.modifierGroups) != null ? _ref : [];
+    const pageAddOns = resolved ? productPageAddOns(resolved, addOns, variant == null ? void 0 : variant.id) : {
+        ready: true,
+        extraCents: 0
+    };
+    const unitCents = typeof (variant == null ? void 0 : variant.priceUsd) === 'number' ? Math.round(variant.priceUsd * 100) + pageAddOns.extraCents : 0;
+    const addOnsKey = CommerceModel.modifierSelectionKey(addOns);
     // The day to send with this variant: only when it asks for one and the
     // buyer chose a day (AGL-4043).
     const chosenUseDay = (variant == null ? void 0 : variant.asksUseDate) && useDay ? useDay : '';
@@ -356,8 +401,11 @@ function slugFromLocation() {
     const storeTodayKey = (resolved == null ? void 0 : resolved.useDayTimeZone) ? zonedDayKey(Date.now(), resolved.useDayTimeZone) : '';
     // Add to cart (AGL-293) beside instant buy; badge refresh via event.
     const handleAddToCart = async ()=>{
-        if (!hostId || !resolved || !variant) return;
+        // A required add-on unanswered is refused here, before any request
+        // (AGL-4100); the button says so too.
+        if (!hostId || !resolved || !variant || !pageAddOns.ready) return;
         setAdded(false);
+        setAddRefusal('');
         // Priced (AGL-1591's shape, completed): the resolved variant's price
         // and the chosen quantity both come from the server's product payload,
         // so GA4's "value added to cart" is a real number. The funnel step
@@ -371,8 +419,11 @@ function slugFromLocation() {
             quantity
         }, chosenUseDay ? {
             useDayKey: chosenUseDay
+        } : {}, addOns.length ? {
+            modifiers: addOns
         } : {}, {
-            item: buyItem(resolved, variant, quantity)
+            item: buyItem(resolved, variant, quantity, addOnGroups.length ? unitCents : undefined),
+            onRefused: setAddRefusal
         }));
         if (ok) setAdded(true);
     };
@@ -387,11 +438,13 @@ function slugFromLocation() {
      * subscription).
      */ // Pickup or the store's own delivery (AGL-3624), for a one-time sale; the
     // server offers nothing for a product with nothing physical to collect.
-    const fulfillment = useCartFulfillment(hostId, (_ref = resolved == null ? void 0 : resolved.id) != null ? _ref : '[]', resolved && variant && !(resolved.subscription && (!resolved.subscriptionOptional || billing === 'subscribe')) ? {
+    const fulfillment = useCartFulfillment(hostId, (_ref1 = resolved == null ? void 0 : resolved.id) != null ? _ref1 : '[]', resolved && variant && !(resolved.subscription && (!resolved.subscriptionOptional || billing === 'subscribe')) ? _extends({
         productId: resolved.id,
         variantId: variant.id,
         quantity
-    } : null);
+    }, addOns.length ? {
+        modifiers: addOns
+    } : {}) : null);
     const attemptKey = useRef('');
     useEffect(()=>{
         attemptKey.current = '';
@@ -400,6 +453,7 @@ function slugFromLocation() {
     // key, and the server replays the original full-price session — a quoted
     // number that is not the number charged, which is the whole defect class
     // this path has been cleared of.
+    // `addOnsKey` too: different add-ons are a different price (AGL-4100).
     }, [
         resolved == null ? void 0 : resolved.id,
         variant == null ? void 0 : variant.id,
@@ -409,10 +463,11 @@ function slugFromLocation() {
         shipPostal,
         coupon,
         fulfillment.signature,
-        chosenUseDay
+        chosenUseDay,
+        addOnsKey
     ]);
     const handleBuy = async ()=>{
-        if (!hostId || !resolved || !variant || status === 'sending') return;
+        if (!hostId || !resolved || !variant || status === 'sending' || !pageAddOns.ready) return;
         setStatus('sending');
         setMessage('');
         if (!attemptKey.current) {
@@ -435,6 +490,8 @@ function slugFromLocation() {
                     quantity
                 }, chosenUseDay ? {
                     useDayKey: chosenUseDay
+                } : {}, addOns.length ? {
+                    modifiers: addOns
                 } : {}, resolved.subscriptionOptional ? {
                     billing
                 } : {}, shipTo && !fulfillment.request ? {
@@ -466,7 +523,7 @@ function slugFromLocation() {
                 // flag flipped would look like a conversion collapse.
                 trackEvent('begin_checkout', buildBeginCheckoutParams({
                     items: [
-                        buyItem(resolved, variant, quantity)
+                        buyItem(resolved, variant, quantity, addOnGroups.length ? unitCents : undefined)
                     ]
                 }));
                 setNativeCheckout({
@@ -484,7 +541,7 @@ function slugFromLocation() {
                 // property that makes a bare call safe is invisible from this file.
                 await trackEventBeforeNavigation('begin_checkout', buildBeginCheckoutParams({
                     items: [
-                        buyItem(resolved, variant, quantity)
+                        buyItem(resolved, variant, quantity, addOnGroups.length ? unitCents : undefined)
                     ]
                 }));
                 window.location.assign(payload.url);
@@ -593,7 +650,7 @@ function slugFromLocation() {
     // schema.org `image` array below is read out of band by a crawler, where
     // an absolute URL is the point. That one wants `absoluteMediaSrc` with
     // the site's own origin, which is the tenant page's job (AGL-1725).
-    const galleryImage = Aglyn.siteRelativeMediaSrc((_ref1 = (_ref2 = activeImage !== null ? resolved.mediaUrls[activeImage] : undefined) != null ? _ref2 : variant == null ? void 0 : variant.imageUrl) != null ? _ref1 : resolved.mediaUrls[0], {
+    const galleryImage = Aglyn.siteRelativeMediaSrc((_ref2 = (_ref3 = activeImage !== null ? resolved.mediaUrls[activeImage] : undefined) != null ? _ref3 : variant == null ? void 0 : variant.imageUrl) != null ? _ref2 : resolved.mediaUrls[0], {
         hostId
     });
     const presentedOptions = optionPresentation(resolved.options, resolved.variants);
@@ -743,7 +800,7 @@ function slugFromLocation() {
                         children: [
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h6",
-                                children: priced ? `$${variant == null ? void 0 : variant.priceUsd}${subscribing ? intervalSuffix : ''}` : PRICE_COMING_SOON_LABEL
+                                children: priced ? `${money(unitCents)}${subscribing ? intervalSuffix : ''}` : PRICE_COMING_SOON_LABEL
                             }),
                             subscribing && (subscription == null ? void 0 : subscription.trialDays) ? /*#__PURE__*/ _jsx(Typography, {
                                 variant: "caption",
@@ -758,7 +815,7 @@ function slugFromLocation() {
                                         sx: {
                                             textDecoration: 'line-through'
                                         },
-                                        children: `$${variant.compareAtPriceUsd}`
+                                        children: moneyFromUsd(variant.compareAtPriceUsd)
                                     }),
                                     /*#__PURE__*/ _jsx(Chip, {
                                         label: "Sale",
@@ -798,11 +855,11 @@ function slugFromLocation() {
                         children: [
                             /*#__PURE__*/ _jsx(ToggleButton, {
                                 value: "once",
-                                children: priced ? `One-time $${variant == null ? void 0 : variant.priceUsd}` : 'One-time'
+                                children: priced ? `One-time ${money(unitCents)}` : 'One-time'
                             }),
                             /*#__PURE__*/ _jsx(ToggleButton, {
                                 value: "subscribe",
-                                children: priced ? `Subscribe $${variant == null ? void 0 : variant.priceUsd}${intervalSuffix}` : 'Subscribe'
+                                children: priced ? `Subscribe ${money(unitCents)}${intervalSuffix}` : 'Subscribe'
                             })
                         ]
                     }) : null,
@@ -837,6 +894,17 @@ function slugFromLocation() {
                                 }, value))
                         }, option.name);
                     }),
+                    addOnGroups.length && priced ? /*#__PURE__*/ _jsx(Suspense, {
+                        fallback: null,
+                        children: /*#__PURE__*/ _jsx(ProductAddOns, {
+                            groups: addOnGroups,
+                            variantId: variant == null ? void 0 : variant.id,
+                            value: addOns,
+                            onChange: setAddOns,
+                            formatCents: money,
+                            disabled: Boolean(variant == null ? void 0 : variant.soldOut)
+                        })
+                    }) : null,
                     showCoupon ? /*#__PURE__*/ _jsx(TextField, {
                         label: "Discount code",
                         value: coupon,
@@ -896,7 +964,7 @@ function slugFromLocation() {
                                 variant: "outlined",
                                 color: "primary",
                                 size: "large",
-                                disabled: !hostId || !priced || (variant == null ? void 0 : variant.soldOut),
+                                disabled: !hostId || !priced || (variant == null ? void 0 : variant.soldOut) || !pageAddOns.ready,
                                 onClick: handleAddToCart,
                                 children: added ? 'Added ✓' : 'Add to cart'
                             }),
@@ -904,7 +972,8 @@ function slugFromLocation() {
                                 variant: "contained",
                                 color: "primary",
                                 size: "large",
-                                disabled: !hostId || !priced || status === 'sending' || (variant == null ? void 0 : variant.soldOut) || // No payments on this deployment: the same 501 every time, so
+                                disabled: !hostId || !priced || status === 'sending' || (variant == null ? void 0 : variant.soldOut) || // A required add-on unanswered (AGL-4100).
+                                !pageAddOns.ready || // No payments on this deployment: the same 501 every time, so
                                 // the control latches off rather than inviting a retry that
                                 // cannot succeed (AGL-2019).
                                 status === 'unconfigured' || // Asked but unanswered: the server would only refuse again.
@@ -919,6 +988,30 @@ function slugFromLocation() {
                             })
                         ]
                     }),
+                    addOnGroups.length && priced ? /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            mb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "subtitle1",
+                                component: "p",
+                                children: quantity > 1 ? `Total for ${quantity}: ${money(unitCents * quantity)}` : `Total: ${money(unitCents)}`
+                            }),
+                            !pageAddOns.ready && pageAddOns.error && !(variant == null ? void 0 : variant.soldOut) ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: pageAddOns.error
+                            }) : null
+                        ]
+                    }) : null,
+                    addRefusal ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        sx: {
+                            mb: 2
+                        },
+                        children: addRefusal
+                    }) : null,
                     nativeCheckout ? /*#__PURE__*/ _jsx(Suspense, {
                         fallback: /*#__PURE__*/ _jsx(StorefrontPaymentElementFallback, {}),
                         children: /*#__PURE__*/ _jsx(StorefrontPaymentElement, {
@@ -947,7 +1040,7 @@ function slugFromLocation() {
                         },
                         children: /*#__PURE__*/ _jsx(CartFulfillmentChoice, {
                             state: fulfillment,
-                            formatCents: (cents)=>`$${(cents / 100).toFixed(2)}`
+                            formatCents: money
                         })
                     }) : null,
                     shipCountries && fulfillment.method === 'shipping' && priced ? /*#__PURE__*/ _jsx(TextField, {