@aglyn/plugins-commerce 1.0.0-beta.143

package/src/lib/components/cart.js

@@ -0,0 +1,851 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { _ as _to_property_key } from "@swc/helpers/_/_to_property_key";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { buildBeginCheckoutParams, buildViewCartParams, trackEvent, trackEventBeforeNavigation } from "@aglyn/aglyn/app-utils/analytics-events";
+import { isPaymentsNotConfigured, storefrontPaymentsNotConfiguredText } from "@aglyn/aglyn/app-utils/payments-configured";
+import * as CommerceModel from "../model/index.js";
+import { mdiCartOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import Drawer from "@mui/material/Drawer";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import SvgIcon from "@mui/material/SvgIcon";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { Suspense, forwardRef, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StorefrontPaymentElementFallback } from "./storefront-payment-element-fallback.js";
+/**
+ * The Payment Element (AGL-1944), lazily. Stripe.js and its React wrapper are
+ * a large dependency and the flag is OFF, so a static import would ship the
+ * whole SDK in the bundle of every page carrying a cart — which is most pages
+ * on a storefront — to serve a path no shopper currently reaches.
+ */ const StorefrontPaymentElement = /*#__PURE__*/ lazy(()=>import("./storefront-payment-element.js").then((module)=>({
+            default: module.StorefrontPaymentElement
+        })));
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+import { useStorefrontPurchaseEvent } from "../utils/use-storefront-purchase-event.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'cart';
+/** Blocks dispatch this after mutating the cart so badges refresh. */ export const CART_UPDATED_EVENT = 'aglyn:cart-updated';
+const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
+/**
+ * The cart's lines as GA4 `items`.
+ *
+ * One mapping for every event this file sends — `view_cart` and both
+ * `begin_checkout` branches — because the `item_id` is what joins them into a
+ * single per-product funnel with the `view_item` and `add_to_cart` the product
+ * blocks send. Three hand-written copies of the same map are three chances for
+ * one step to start reporting a variant id, or a name, or a different price
+ * basis, and a funnel whose steps disagree about the product silently reports
+ * a drop that never happened.
+ */ function cartAnalyticsItems(cart) {
+    var _ref;
+    return ((_ref = cart == null ? void 0 : cart.lines) != null ? _ref : []).map((line)=>({
+            item_id: line.productId,
+            item_name: line.name,
+            price: line.unitAmountCents / 100,
+            quantity: line.quantity
+        }));
+}
+function CartLines(props) {
+    const { hostId, cart, showCoupon, checkoutLabel, emptyText, onMutate } = props;
+    const siteFetch = Aglyn.useSiteFetch();
+    const [coupon, setCoupon] = useState('');
+    const [email, setEmail] = useState('');
+    const [optIn, setOptIn] = useState(false);
+    const [giftCard, setGiftCard] = useState('');
+    // Where the parcel is going (AGL-1721). Asked ONLY when the server says it
+    // cannot price shipping without it — a merchant with one zone, one
+    // rest-of-world zone, or no shipping at all never sees this field, which is
+    // the common configuration. `null` is "not asked", so the field appearing is
+    // itself the server's answer rather than a guess made here.
+    const [shipTo, setShipTo] = useState('');
+    const [shipCountries, setShipCountries] = useState(null);
+    // `paused` is its own state, not an `error` with gentler words (AGL-1511):
+    // the two need different severities, and a shopper told in red that
+    // checkout failed does not read the sentence explaining it did not. `ask` is
+    // the same argument again: being asked for a destination is not a failure.
+    // `unconfigured` is the third instance (AGL-2019): a store with no Stripe key
+    // answers 501, and before this that fell through to the error tail below and
+    // rendered RED. It is also the only one of the five that is TERMINAL — the
+    // others can succeed on a retry, this one cannot until the operator acts, so
+    // it latches the buy control off instead of inviting another click.
+    const [status, setStatus] = useState('idle');
+    const [message, setMessage] = useState('');
+    /**
+   * The in-page checkout session (AGL-1944). Null unless the server chose
+   * native mode, which needs both the release flag and a publishable key.
+   */ const [nativeCheckout, setNativeCheckout] = useState(null);
+    /**
+   * In-progress quantity edits, keyed by line, as the raw field text
+   * (AGL-1772). The field used to POST /api/commerce/cart on every
+   * keystroke — typing "100" was three Firestore writes, and clearing the
+   * field to retype passed through `""` → 0, which is the REMOVE path, so a
+   * select-all-and-retype could delete the line mid-edit (and the response
+   * replacing `cart` state then fought the input).
+   *
+   * The repo convention for quantity inputs is local state committed on an
+   * explicit settle — the PDP's Qty field (product-detail.tsx) holds
+   * `useState` and sends nothing until the buy click, and besigner
+   * attributes commit on blur. So: keystrokes only edit the draft; blur or
+   * Enter commits ONE write; an empty or unparsable draft is a pending
+   * state that reverts to the server's quantity, never a 0-as-remove. A
+   * genuine remove still works both ways — the ✕ button, and typing an
+   * actual 0 then leaving the field.
+   */ const [quantityDrafts, setQuantityDrafts] = useState({});
+    const lineKey = (line)=>{
+        var _line_variantId;
+        return `${line.productId}:${(_line_variantId = line.variantId) != null ? _line_variantId : ''}`;
+    };
+    const commitQuantity = (line)=>{
+        const key = lineKey(line);
+        const draft = quantityDrafts[key];
+        if (draft === undefined) return;
+        // Drops the draft, but only if it is still THIS one — a keystroke that
+        // lands while the write is in flight starts a new edit, and clearing it
+        // here would erase what the shopper is typing.
+        const settle = ()=>setQuantityDrafts((drafts)=>{
+                if (drafts[key] !== draft) return drafts;
+                const { [key]: _settled } = drafts, rest = _object_without_properties_loose(drafts, [
+                    _to_property_key(key)
+                ]);
+                return rest;
+            });
+        // `Number('')` is 0 — exactly the misreading that turned a cleared
+        // field into a remove. Empty means "no answer": show the server's
+        // quantity again and write nothing. NaN (letters) reverts the same way.
+        if (draft.trim() === '') return settle();
+        const parsed = Math.round(Number(draft));
+        if (!Number.isFinite(parsed)) return settle();
+        const quantity = Math.max(0, parsed);
+        // A settled value equal to the server's is not an edit.
+        if (quantity === line.quantity) return settle();
+        // The draft keeps rendering until the response lands, so the field does
+        // not flash the superseded quantity during the round-trip; the server's
+        // answer (via the replaced `cart`) takes over when it arrives.
+        void onMutate({
+            action: 'set',
+            productId: line.productId,
+            variantId: line.variantId,
+            quantity
+        }).finally(settle);
+    };
+    /**
+   * Idempotency key for ONE checkout attempt (AGL-1697).
+   *
+   * Minted lazily on the first checkout click, retired whenever the attempt
+   * changes shape — different lines, codes, email or destination are a
+   * different checkout. Keyed off a CONTENT signature of the lines rather
+   * than the `cart` object, whose identity changes on every refetch: retiring
+   * on identity would hand a genuine retry a fresh key, which is exactly the
+   * double-session this exists to prevent.
+   */ const attemptKey = useRef('');
+    const cartSignature = useMemo(()=>{
+        var _ref;
+        return JSON.stringify(((_ref = cart == null ? void 0 : cart.lines) != null ? _ref : []).map((line)=>{
+            var _line_variantId;
+            return [
+                line.productId,
+                (_line_variantId = line.variantId) != null ? _line_variantId : '',
+                line.quantity
+            ];
+        }));
+    }, [
+        cart
+    ]);
+    useEffect(()=>{
+        attemptKey.current = '';
+    }, [
+        cartSignature,
+        email,
+        coupon,
+        giftCard,
+        shipTo
+    ]);
+    const handleCheckout = useCallback(async ()=>{
+        if (status === 'sending') return;
+        setStatus('sending');
+        setMessage('');
+        if (!attemptKey.current) {
+            var _ref;
+            var _globalThis_crypto_randomUUID, _globalThis_crypto;
+            attemptKey.current = (_ref = (_globalThis_crypto = globalThis.crypto) == null ? void 0 : (_globalThis_crypto_randomUUID = _globalThis_crypto.randomUUID) == null ? void 0 : _globalThis_crypto_randomUUID.call(_globalThis_crypto)) != null ? _ref : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        }
+        try {
+            var _ref1;
+            const response = await siteFetch('/api/commerce/cart-checkout', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    // Stable across a retry of THIS attempt (AGL-1697), so a
+                    // double-click cannot spawn a second session from one cart.
+                    'Idempotency-Key': attemptKey.current
+                },
+                body: JSON.stringify(_extends({
+                    hostId
+                }, email.trim() ? {
+                    email: email.trim()
+                } : {}, optIn ? {
+                    marketingOptIn: true
+                } : {}, coupon.trim() ? {
+                    couponCode: coupon.trim()
+                } : {}, giftCard.trim() ? {
+                    giftCardCode: giftCard.trim()
+                } : {}, shipTo ? {
+                    shippingCountry: shipTo
+                } : {}))
+            });
+            const payload = await response.json().catch(()=>({}));
+            // In-page payment (AGL-1944). Checked BEFORE the redirect branch: a
+            // native session carries a client secret and no url, and if a server ever
+            // sent both, navigating away would silently discard the form.
+            //
+            // `begin_checkout` is reported on BOTH paths, and from the same place, so
+            // the GA4 funnel does not develop a hole the day the flag flips — a
+            // storefront whose `begin_checkout` count halved would look like a
+            // conversion collapse rather than a checkout that stopped redirecting.
+            if (response.ok && (payload == null ? void 0 : payload.clientSecret) && (payload == null ? void 0 : payload.publishableKey)) {
+                var _ref2;
+                trackEvent('begin_checkout', buildBeginCheckoutParams({
+                    value: ((_ref2 = cart == null ? void 0 : cart.subtotalCents) != null ? _ref2 : 0) / 100,
+                    items: cartAnalyticsItems(cart)
+                }));
+                setNativeCheckout({
+                    clientSecret: String(payload.clientSecret),
+                    publishableKey: String(payload.publishableKey)
+                });
+                setStatus('idle');
+                return;
+            }
+            if (response.ok && (payload == null ? void 0 : payload.url)) {
+                var _ref3;
+                // GA4 checkout funnel (AGL-1561, converted by AGL-1591). This used to
+                // call `window.gtag` raw with `value`/`currency` only, so the same
+                // event name arrived from this surface and from the console's plan
+                // checkout in two different shapes — and this half carried no `items`,
+                // which is the field GA4's ecommerce funnel is actually built on.
+                //
+                // The item ids are the PRODUCT ids `view_item` and `add_to_cart`
+                // already send, so the three now join into one per-product funnel.
+                // `value` is stated rather than derived because the cart subtotal is
+                // authoritative after a coupon or gift card, which the line prices
+                // below are not. No `billing_interval`: a storefront cart is not a
+                // subscription.
+                //
+                // AWAITED before the redirect (AGL-1580). This surface registers no
+                // transport, so delivery is a synchronous `window.gtag` call and the
+                // await resolves immediately — a storefront checkout is not slowed by
+                // one microtask. It is written this way anyway because the property
+                // that makes it safe is invisible from here: the day this bundle grows
+                // an async transport, or a host registers one for it, the bare call
+                // would start losing the event on exactly the branch that navigates,
+                // and nothing at this call site would look different.
+                await trackEventBeforeNavigation('begin_checkout', buildBeginCheckoutParams({
+                    value: ((_ref3 = cart == null ? void 0 : cart.subtotalCents) != null ? _ref3 : 0) / 100,
+                    items: cartAnalyticsItems(cart)
+                }));
+                window.location.assign(payload.url);
+                return;
+            }
+            // A read-only lockdown answers 423 with the visitor pause copy
+            // (AGL-1511). Rendering `payload.error` here would print the wire
+            // token "locked" at a shopper, and the `severity="error"` styling
+            // would tell them their payment failed — the one thing this copy
+            // exists to never say. So the refusal is parsed and shown as a calm
+            // notice instead.
+            const paused = Aglyn.parseLockdownRefusal(response.status, payload);
+            if (paused) {
+                setMessage(Aglyn.lockdownRefusalText(paused));
+                setStatus('paused');
+                return;
+            }
+            // A store that never had payments configured (AGL-2019). The server's
+            // own words are NOT rendered here even though they are safe today:
+            // this is a visitor-facing surface, the 501 bodies differ between the
+            // cart and buy-now doors, and one of them could grow a variable name
+            // without anyone thinking about who reads it.
+            if (isPaymentsNotConfigured(response.status)) {
+                setMessage(storefrontPaymentsNotConfiguredText());
+                setStatus('unconfigured');
+                return;
+            }
+            // The merchant's rates differ by destination, so the server will not
+            // price this cart until it knows one (AGL-1721). Reveal the field and
+            // let the shopper answer; a store that never sends this never shows it.
+            if (payload == null ? void 0 : payload.needsShippingCountry) {
+                var _ref4;
+                var _payload_shippingCountries;
+                setShipCountries(((_payload_shippingCountries = payload.shippingCountries) == null ? void 0 : _payload_shippingCountries.length) ? payload.shippingCountries : [
+                    ...CommerceModel.CHECKOUT_SHIPPING_COUNTRIES
+                ]);
+                setMessage(String((_ref4 = payload == null ? void 0 : payload.error) != null ? _ref4 : ''));
+                // An unserved destination is a real refusal and reads as one; being
+                // asked the first time is not.
+                setStatus(shipTo ? 'error' : 'ask');
+                return;
+            }
+            setMessage(String((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : ''));
+            setStatus('error');
+        } catch (unused) {
+            setStatus('error');
+        }
+    // `cart` is a dependency because the payload above reads it: without it
+    // the handler closes over whichever cart was current when it was created,
+    // and a checkout started after a quantity change would report the OLD
+    // subtotal and the OLD lines. The pre-AGL-1591 raw call had the same bug
+    // in the `value` alone, where a wrong number is indistinguishable from a
+    // right one.
+    }, [
+        hostId,
+        cart,
+        coupon,
+        email,
+        optIn,
+        giftCard,
+        shipTo,
+        status,
+        siteFetch
+    ]);
+    if (!cart || cart.lines.length === 0) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+                p: 2
+            },
+            children: emptyText || 'Your cart is empty.'
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.5,
+            p: 2
+        },
+        children: [
+            cart.lines.map((line)=>{
+                var _quantityDrafts_lineKey, _line_variantId;
+                // AGL-1726: resolve BEFORE the guard, never inside the `src`. A
+                // stored value can be truthy and still resolve to nothing (a
+                // malformed `media:` reference), and testing the raw string would
+                // turn "no image" into an `<img>` with no `src` — a broken-image
+                // icon where the placeholder belongs.
+                const imageUrl = Aglyn.siteRelativeMediaSrc(line.imageUrl, {
+                    hostId
+                });
+                return /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        gap: 1.5,
+                        alignItems: 'center'
+                    },
+                    children: [
+                        imageUrl ? /*#__PURE__*/ _jsx(Box, _extends({
+                            component: "img",
+                            src: imageUrl,
+                            alt: "",
+                            sx: {
+                                width: 48,
+                                height: 48,
+                                objectFit: 'cover',
+                                borderRadius: 1
+                            }
+                        }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES)) : /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                width: 48,
+                                height: 48,
+                                bgcolor: 'action.hover',
+                                borderRadius: 1
+                            }
+                        }),
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    variant: "body2",
+                                    noWrap: true,
+                                    children: [
+                                        line.name,
+                                        line.variantLabel ? ` — ${line.variantLabel}` : ''
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: line.unavailable ? 'No longer available' : usd(line.unitAmountCents)
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            value: (_quantityDrafts_lineKey = quantityDrafts[lineKey(line)]) != null ? _quantityDrafts_lineKey : line.quantity,
+                            onChange: (event)=>setQuantityDrafts((drafts)=>_extends({}, drafts, {
+                                        [lineKey(line)]: event.target.value
+                                    })),
+                            onBlur: ()=>commitQuantity(line),
+                            onKeyDown: (event)=>{
+                                if (event.key === 'Enter') commitQuantity(line);
+                            },
+                            size: "small",
+                            sx: {
+                                width: 60
+                            },
+                            slotProps: {
+                                htmlInput: {
+                                    inputMode: 'numeric'
+                                }
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            color: "error",
+                            onClick: ()=>void onMutate({
+                                    action: 'remove',
+                                    productId: line.productId,
+                                    variantId: line.variantId
+                                }),
+                            children: '✕'
+                        })
+                    ]
+                }, `${line.productId}:${(_line_variantId = line.variantId) != null ? _line_variantId : ''}`);
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: 'Subtotal'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: usd(cart.subtotalCents)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Shipping and taxes are calculated at checkout.'
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Email",
+                type: "email",
+                value: email,
+                onChange: (event)=>setEmail(event.target.value),
+                size: "small",
+                helperText: "For your receipt and order updates"
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Checkbox, {
+                    size: "small",
+                    checked: optIn,
+                    onChange: (event)=>setOptIn(event.target.checked)
+                }),
+                label: /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    children: 'Email me news and offers'
+                })
+            }),
+            showCoupon ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Coupon code",
+                        value: coupon,
+                        onChange: (event)=>setCoupon(event.target.value),
+                        size: "small"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Gift card",
+                        value: giftCard,
+                        onChange: (event)=>setGiftCard(event.target.value),
+                        size: "small",
+                        placeholder: "GC-…"
+                    })
+                ]
+            }) : null,
+            shipCountries ? /*#__PURE__*/ _jsx(TextField, {
+                select: true,
+                label: "Ship to",
+                value: shipTo,
+                onChange: (event)=>setShipTo(event.target.value),
+                size: "small",
+                helperText: "Shipping rates depend on where this is going",
+                children: shipCountries.map((code)=>{
+                    var _CommerceModel_CHECKOUT_SHIPPING_COUNTRY_NAMES_code;
+                    return /*#__PURE__*/ _jsx(MenuItem, {
+                        value: code,
+                        children: (_CommerceModel_CHECKOUT_SHIPPING_COUNTRY_NAMES_code = CommerceModel.CHECKOUT_SHIPPING_COUNTRY_NAMES[code]) != null ? _CommerceModel_CHECKOUT_SHIPPING_COUNTRY_NAMES_code : code
+                    }, code);
+                })
+            }) : null,
+            status === 'paused' || status === 'ask' || status === 'unconfigured' ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: message
+            }) : null,
+            status === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "error",
+                children: message || 'Checkout is unavailable right now.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                color: "primary",
+                disabled: status === 'sending' || cart.lines.every((line)=>line.unavailable) || // No payments on this deployment: every further click gets the same
+                // 501, 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.
+                shipCountries !== null && !shipTo,
+                onClick: handleCheckout,
+                children: status === 'sending' ? // place (AGL-1944).
+                nativeCheckout ? 'Opening…' : 'Redirecting…' : checkoutLabel || 'Checkout'
+            }),
+            nativeCheckout ? /*#__PURE__*/ _jsx(Suspense, {
+                fallback: /*#__PURE__*/ _jsx(StorefrontPaymentElementFallback, {}),
+                children: /*#__PURE__*/ _jsx(StorefrontPaymentElement, {
+                    clientSecret: nativeCheckout.clientSecret,
+                    publishableKey: nativeCheckout.publishableKey,
+                    payLabel: checkoutLabel || 'Pay now',
+                    // The session is left open on cancel, deliberately: it is what the
+                    // AGL-323 abandoned-cart recovery emails are built on, and expiring
+                    // it would be a write against the merchant's Stripe account made
+                    // from a browser.
+                    onCancel: ()=>setNativeCheckout(null)
+                })
+            }) : null
+        ]
+    });
+}
+/**
+ * Cart block (AGL-293): 'button' renders a badge icon + slide-out
+ * drawer for app bars; 'inline' renders the full cart for a cart page.
+ * Lines live server-side (cookie cart); every mutation re-resolves
+ * prices. Other blocks broadcast CART_UPDATED_EVENT to refresh badges.
+ */ const Cart = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref;
+    const { variant, checkoutLabel, showCoupon, emptyText } = props, rest = _object_without_properties_loose(props, [
+        "variant",
+        "checkoutLabel",
+        "showCoupon",
+        "emptyText"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    const [cart, setCart] = useState(null);
+    const [open, setOpen] = useState(false);
+    // Closes the merchant's ecommerce funnel (AGL-1641). Stripe returns a cart
+    // checkout to the page it started on — this one — so the `purchase` that
+    // `begin_checkout` above has never had a counterpart to is reported here.
+    // No-ops on every ordinary render: the hook returns immediately unless the
+    // URL carries `?order=success&session_id=…`.
+    useStorefrontPurchaseEvent(hostId, siteFetch);
+    const refresh = useCallback(async ()=>{
+        if (!hostId) return;
+        try {
+            const response = await fetch(`/api/commerce/cart?hostId=${encodeURIComponent(hostId)}`);
+            if (response.ok) setCart(await response.json());
+        } catch (unused) {
+        // Badge silently stays stale offline.
+        }
+    }, [
+        hostId
+    ]);
+    useEffect(()=>{
+        void refresh();
+        const handler = ()=>void refresh();
+        window.addEventListener(CART_UPDATED_EVENT, handler);
+        return ()=>window.removeEventListener(CART_UPDATED_EVENT, handler);
+    }, [
+        refresh
+    ]);
+    /**
+   * Has THIS opening of the cart already been reported? A drawer that is
+   * closed and reopened is a second view; a re-render, a badge refresh or a
+   * quantity edit inside an already-open drawer is not.
+   */ const viewReported = useRef(false);
+    /**
+   * `view_cart` — the funnel step between `add_to_cart` and `begin_checkout`.
+   *
+   * Fired on the cart being SEEN, which is why it hangs off `open` rather off
+   * mount: the button variant renders a badge on every page of a storefront,
+   * and reporting a view there would have made "opened the cart" a synonym for
+   * "loaded a page" and the checkout rate a fraction of pageviews.
+   *
+   * Deferred until the lines have actually arrived. The cart is fetched, so a
+   * drawer opened while that request is in flight has nothing to describe yet
+   * — reporting then would send an empty `items` and a zero `value` for a cart
+   * that in fact had both. An empty cart never reports at all: there is no
+   * view of nothing, and counting it would put every idle badge click into the
+   * denominator of the checkout rate.
+   */ useEffect(()=>{
+        const onScreen = variant === 'inline' || open;
+        if (!onScreen) {
+            viewReported.current = false;
+            return;
+        }
+        if (viewReported.current || !cart || cart.lines.length === 0) return;
+        viewReported.current = true;
+        trackEvent('view_cart', buildViewCartParams({
+            // The server's subtotal, so this and the `begin_checkout` the same
+            // cart sends describe one cart at one size.
+            value: cart.subtotalCents / 100,
+            items: cartAnalyticsItems(cart)
+        }));
+    }, [
+        variant,
+        open,
+        cart
+    ]);
+    const mutate = useCallback(async (body)=>{
+        if (!hostId) return;
+        const response = await siteFetch('/api/commerce/cart', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(_extends({
+                hostId
+            }, body))
+        });
+        if (response.ok) {
+            setCart(await response.json());
+            window.dispatchEvent(new Event(CART_UPDATED_EVENT));
+        }
+    }, [
+        hostId,
+        siteFetch
+    ]);
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: variant === 'inline' ? 3 : 1,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 13,
+                    fontFamily: 'system-ui, sans-serif',
+                    display: 'inline-block'
+                },
+                ...nodeSx
+            ],
+            children: variant === 'inline' ? 'Cart — lines render here' : '🛒 Cart'
+        }));
+    }
+    if (variant === 'inline') {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            children: /*#__PURE__*/ _jsx(CartLines, {
+                hostId: hostId,
+                cart: cart,
+                showCoupon: showCoupon,
+                checkoutLabel: checkoutLabel,
+                emptyText: emptyText,
+                onMutate: mutate
+            })
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'inline-flex'
+            },
+            ...nodeSx
+        ],
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "Cart",
+                onClick: ()=>setOpen(true),
+                children: /*#__PURE__*/ _jsx(Badge, {
+                    badgeContent: (_ref = cart == null ? void 0 : cart.count) != null ? _ref : 0,
+                    color: "primary",
+                    children: /*#__PURE__*/ _jsx(SvgIcon, {
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: mdiCartOutline.path
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                anchor: "right",
+                open: open,
+                onClose: ()=>setOpen(false),
+                children: /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        width: {
+                            xs: '85vw',
+                            sm: 380
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h6",
+                            sx: {
+                                p: 2,
+                                pb: 0
+                            },
+                            children: 'Your cart'
+                        }),
+                        /*#__PURE__*/ _jsx(CartLines, {
+                            hostId: hostId,
+                            cart: cart,
+                            showCoupon: showCoupon,
+                            checkoutLabel: checkoutLabel,
+                            emptyText: emptyText,
+                            onMutate: mutate
+                        })
+                    ]
+                })
+            })
+        ]
+    }));
+});
+Cart.displayName = 'AglynCart';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Cart',
+    description: 'The shopping cart — a badge icon with a slide-out drawer, or the full cart page.',
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiCartOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'variant',
+            label: 'Style',
+            description: 'Icon-with-drawer for app bars, or the full inline cart.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'button',
+                    label: 'Icon + drawer'
+                },
+                {
+                    value: 'inline',
+                    label: 'Inline (cart page)'
+                }
+            ]
+        },
+        {
+            name: 'checkoutLabel',
+            label: 'Checkout label',
+            description: 'Defaults to "Checkout".',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            // The PROP KEY stays `showCoupon` — it is persisted in every saved page
+            // that uses this component, and renaming it would blank the control on
+            // all of them. Only what the merchant reads changes.
+            name: 'showCoupon',
+            // ONE CONTROL, TWO FEATURES, AND IT ONLY NAMED ONE. This checkbox gates
+            // the gift-card field as well as the coupon field, so a merchant who
+            // wanted gift cards had no reason to look here — gift cards are only
+            // redeemable in the cart, and this is the switch that shows the box.
+            // A control named for one feature that also gates another is how a
+            // shipped feature stays invisible.
+            label: 'Show coupon and gift card fields',
+            description: 'One checkbox for both. Coupon codes and gift cards are managed on ' + 'the Products page.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        },
+        {
+            name: 'emptyText',
+            label: 'Empty text',
+            description: 'Copy when the cart is empty.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID, 'button'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Cart button',
+        pluginId: BUNDLE_ID,
+        description: 'Badge icon with a slide-out cart drawer',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiCartOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                variant: 'button'
+            }
+        }
+    },
+    {
+        $id: generatePresetId(ID, 'inline'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Cart page',
+        pluginId: BUNDLE_ID,
+        description: 'Full cart with quantities, coupon, gift card, and checkout',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiCartOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                variant: 'inline',
+                showCoupon: true
+            }
+        }
+    }
+];
+export default Cart;
+
+//# sourceMappingURL=cart.js.map