@aglyn/plugins-commerce 1.0.0-beta.143

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

@@ -0,0 +1,1022 @@
+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, 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 { buildAddToCartParams, buildBeginCheckoutParams, 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 { mdiTagOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import MenuItem from "@mui/material/MenuItem";
+import Skeleton from "@mui/material/Skeleton";
+import TextField from "@mui/material/TextField";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Typography from "@mui/material/Typography";
+import { Suspense, forwardRef, lazy, useEffect, useMemo, useRef, useState } from "react";
+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";
+import { CART_UPDATED_EVENT } from "./cart.js";
+import { ID as PRODUCT_REVIEWS_ID } from "./product-reviews.js";
+import { ID as RELATED_PRODUCTS_ID } from "./related-products.js";
+import { readLocalWishlist, toggleWishlist } from "./wishlist.js";
+import { StorefrontPaymentElementFallback } from "./storefront-payment-element-fallback.js";
+/**
+ * The Payment Element (AGL-1944), behind a lazy boundary rather than a plain
+ * import. Stripe.js and its React wrapper are a large dependency, the flag is
+ * OFF, and a static import would put the whole SDK into the bundle of every
+ * product page on every published site to serve a code path no shopper reaches.
+ * Split, it is fetched by the shoppers who actually get the in-page form.
+ */ const StorefrontPaymentElement = /*#__PURE__*/ lazy(()=>import("./storefront-payment-element.js").then((module)=>({
+            default: module.StorefrontPaymentElement
+        })));
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'product-detail';
+const SAMPLE = {
+    id: 'sample',
+    name: 'Sample product',
+    slug: '#',
+    description: 'Drop this block on your product page template.',
+    mediaUrls: [],
+    options: [
+        {
+            name: 'Size',
+            values: [
+                'S',
+                'M',
+                'L'
+            ]
+        }
+    ],
+    variants: [
+        {
+            id: 'a',
+            options: {
+                Size: 'S'
+            },
+            priceUsd: 29,
+            soldOut: false
+        },
+        {
+            id: 'b',
+            options: {
+                Size: 'M'
+            },
+            priceUsd: 29,
+            soldOut: false
+        },
+        {
+            id: 'c',
+            options: {
+                Size: 'L'
+            },
+            priceUsd: 32,
+            soldOut: true
+        }
+    ]
+};
+/**
+ * The GA4 `items` entry for one line of this product.
+ *
+ * `item_id` is the PRODUCT id and never the variant's, matching the
+ * `view_item` above and the cart's lines below: GA joins the funnel on that
+ * id, and a `begin_checkout` keyed on a variant would report a product nothing
+ * else on the storefront had ever mentioned.
+ *
+ * `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) {
+    return {
+        item_id: product.id,
+        item_name: product.name,
+        price: variant == null ? void 0 : variant.priceUsd,
+        quantity
+    };
+}
+function slugFromLocation() {
+    if (typeof window === 'undefined') return '';
+    const match = window.location.pathname.match(/\/products\/([^/?#]+)/);
+    return match ? decodeURIComponent(match[1]) : '';
+}
+/**
+ * Product detail block (AGL-292): gallery, option pickers that resolve
+ * the variant (price/media/stock follow), quantity, and a buy button
+ * that charges through the server-priced checkout with the selected
+ * 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, _ref3, _ref4, _ref5;
+    var _site_pageData_commerce, _site_pageData;
+    const { slug: slugProp, buyLabel, hideDescription, showCoupon } = props, rest = _object_without_properties_loose(props, [
+        "slug",
+        "buyLabel",
+        "hideDescription",
+        "showCoupon"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const site = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    const { hostId } = site;
+    // The single-product ("buy now") path returns the shopper to this page
+    // rather than to the cart, so the PDP is the second of the two surfaces
+    // that has to be able to report `purchase` (AGL-1641). Both mount points
+    // share one guard, so a page carrying a cart AND a PDP still sends one.
+    useStorefrontPurchaseEvent(hostId, siteFetch);
+    // Seeded from the server-resolved page data (AGL-659) so the PDP renders
+    // its real content in the SSR HTML. Starting at null meant the server
+    // emitted a <Skeleton> and the crawler got a product page with no
+    // product in it. Absent in the besigner/preview, where the effect below
+    // still fetches — so this is an optimisation, not a new requirement.
+    const seededProduct = (_site_pageData = site.pageData) == null ? void 0 : (_site_pageData_commerce = _site_pageData.commerce) == null ? void 0 : _site_pageData_commerce.product;
+    const [detail, setDetail] = useState(seededProduct != null ? seededProduct : null);
+    const [selections, setSelections] = useState({});
+    const [quantity, setQuantity] = useState(1);
+    /** A discount or coupon code typed on the product page. */ const [coupon, setCoupon] = useState('');
+    const [activeImage, setActiveImage] = useState(0);
+    // `unconfigured` is not an `error` with softer words (AGL-2019). A store
+    // with no Stripe key answers 501, and rendering that at `severity="error"`
+    // tells a shopper their payment failed when nothing was ever attempted —
+    // the same distinction `ask` already makes, and the same one the cart's
+    // 423 lockdown branch makes. It is the terminal one: it latches Buy off,
+    // because every further click gets the identical refusal.
+    const [status, setStatus] = useState('idle');
+    const [message, setMessage] = useState('');
+    // Buy-now's half of AGL-1721: asked only when the server refuses to price
+    // shipping without a destination, so a digital product, a subscription, or
+    // a merchant whose rates are the same everywhere never shows it. `null` is
+    // "not asked" — the field appearing is the server's answer, not a guess.
+    const [shipTo, setShipTo] = useState('');
+    const [shipCountries, setShipCountries] = useState(null);
+    const [added, setAdded] = useState(false);
+    const [wishlisted, setWishlisted] = useState(false);
+    const [notifyEmail, setNotifyEmail] = useState('');
+    const [notifyState, setNotifyState] = useState('idle');
+    // Buyer-chosen billing (AGL-545): only meaningful when the product
+    // is subscriptionOptional; defaults to a one-time purchase.
+    const [billing, setBilling] = useState('once');
+    /**
+     * The in-page checkout session (AGL-1944), null on every store until the
+     * flag AND a publishable key say otherwise. A `clientSecret` is Stripe's
+     * instruction to the browser; holding it says nothing about money having
+     * moved, and nothing in this component ever claims it has.
+     */ const [nativeCheckout, setNativeCheckout] = useState(null);
+    const slug = slugProp || slugFromLocation();
+    useEffect(()=>{
+        if (hostId && resolvedId) {
+            setWishlisted(readLocalWishlist(hostId).includes(resolvedId));
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hostId,
+        detail
+    ]);
+    useEffect(()=>{
+        if (!hostId || !slug) return;
+        // Already delivered with the page (AGL-659) — refetching the identical
+        // payload on hydrate would just be a wasted round trip per visitor.
+        if (seededProduct && seededProduct.slug === slug) return;
+        let active = true;
+        void fetch(`/api/commerce/product?hostId=${encodeURIComponent(hostId)}` + `&slug=${encodeURIComponent(slug)}`).then((response)=>response.ok ? response.json() : null).then((payload)=>{
+            if (!active) return;
+            const product = payload == null ? void 0 : payload.product;
+            setDetail(product != null ? product : 'missing');
+            if (product) {
+                var _product_variants_find, _ref;
+                // GA4 ecommerce mirror (AGL-327), through the shared taxonomy
+                // since AGL-1591 rather than raw gtag — same consent gate, same
+                // sanitizer, and the name is now checked by the compiler.
+                trackEvent('view_item', {
+                    items: [
+                        {
+                            item_id: product.id,
+                            item_name: product.name
+                        }
+                    ]
+                });
+                const first = (_product_variants_find = product.variants.find((variant)=>!variant.soldOut)) != null ? _product_variants_find : product.variants[0];
+                setSelections((_ref = first == null ? void 0 : first.options) != null ? _ref : {});
+            }
+        }).catch(()=>{
+            if (active) setDetail('missing');
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        slug
+    ]);
+    const resolvedId = hostId && detail && detail !== 'missing' ? detail.id : null;
+    const resolved = hostId ? detail === 'missing' ? null : detail : SAMPLE;
+    const variant = useMemo(()=>{
+        var _CommerceModel_findVariant;
+        if (!resolved) return undefined;
+        return (_CommerceModel_findVariant = CommerceModel.findVariant({
+            variants: resolved.variants
+        }, selections)) != null ? _CommerceModel_findVariant : resolved.variants[0];
+    }, [
+        resolved,
+        selections
+    ]);
+    // Add to cart (AGL-293) beside instant buy; badge refresh via event.
+    const handleAddToCart = async ()=>{
+        if (!hostId || !resolved || !variant) return;
+        setAdded(false);
+        const response = await siteFetch('/api/commerce/cart', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                hostId,
+                action: 'add',
+                productId: resolved.id,
+                variantId: variant.id,
+                quantity
+            })
+        }).catch(()=>null);
+        if (response == null ? void 0 : response.ok) {
+            setAdded(true);
+            // Priced (AGL-1591's shape, completed): the resolved variant's price
+            // and the chosen quantity are both known here and both come from the
+            // server's product payload, so GA4's "value added to cart" is a real
+            // number rather than the empty column an items-only hit leaves. The
+            // `value` describes what was JUST ADDED, not the cart's new total —
+            // see `buildAddToCartParams`.
+            trackEvent('add_to_cart', buildAddToCartParams({
+                items: [
+                    buyItem(resolved, variant, quantity)
+                ]
+            }));
+            window.dispatchEvent(new Event(CART_UPDATED_EVENT));
+        }
+    };
+    /**
+     * Idempotency key for ONE buy-now attempt (AGL-1697).
+     *
+     * Minted lazily on the first buy click, retired whenever the purchase
+     * changes shape — a different product, variant, quantity, billing choice
+     * or destination is a different attempt. A retry of THIS attempt presents
+     * the same key, so the server replays the original session instead of
+     * opening a second one (for a subscription product, a second RECURRING
+     * subscription).
+     */ const attemptKey = useRef('');
+    useEffect(()=>{
+        attemptKey.current = '';
+    // `coupon` is in here because it CHANGES THE PRICE. Without it a shopper
+    // who buys, comes back, types a code and buys again presents the same
+    // 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.
+    }, [
+        resolved == null ? void 0 : resolved.id,
+        variant == null ? void 0 : variant.id,
+        quantity,
+        billing,
+        shipTo,
+        coupon
+    ]);
+    const handleBuy = async ()=>{
+        if (!hostId || !resolved || !variant || 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/checkout', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Idempotency-Key': attemptKey.current
+                },
+                body: JSON.stringify(_extends({
+                    hostId,
+                    productId: resolved.id,
+                    variantId: variant.id,
+                    quantity
+                }, resolved.subscriptionOptional ? {
+                    billing
+                } : {}, shipTo ? {
+                    shippingCountry: shipTo
+                } : {}, coupon.trim() ? {
+                    couponCode: coupon.trim()
+                } : {}))
+            });
+            const payload = await response.json().catch(()=>({}));
+            // In-page payment (AGL-1944). A native session returns a client secret
+            // and NO url — the two are mutually exclusive by construction, so the
+            // redirect branch below is unreachable in native mode and vice versa.
+            // Checked FIRST so a server that somehow sent both cannot silently
+            // navigate the shopper away from the form we just decided to show.
+            if (response.ok && (payload == null ? void 0 : payload.clientSecret) && (payload == null ? void 0 : payload.publishableKey)) {
+                // Buy-now's `begin_checkout`. The cart path has reported this since
+                // AGL-1591 and this one never did, so a storefront whose shoppers
+                // skip the cart showed `view_item` → `add_to_cart` → nothing →
+                // `purchase`: GA4's shopping funnel put every single-product sale in
+                // the "abandoned checkout" bucket, and the merchant's checkout rate
+                // read as a collapse rather than as an unmeasured path.
+                //
+                // Reported on BOTH branches, and from the same place, for the reason
+                // the cart states: a count that halved the day the in-page payment
+                // flag flipped would look like a conversion collapse.
+                trackEvent('begin_checkout', buildBeginCheckoutParams({
+                    items: [
+                        buyItem(resolved, variant, quantity)
+                    ]
+                }));
+                setNativeCheckout({
+                    clientSecret: String(payload.clientSecret),
+                    publishableKey: String(payload.publishableKey)
+                });
+                setStatus('idle');
+                return;
+            }
+            if (response.ok && (payload == null ? void 0 : payload.url)) {
+                // Awaited before the redirect (AGL-1580), for the reason spelled out
+                // on the cart's matching branch: delivery here is a synchronous
+                // `window.gtag` call today and the await costs nothing, but the
+                // property that makes a bare call safe is invisible from this file.
+                await trackEventBeforeNavigation('begin_checkout', buildBeginCheckoutParams({
+                    items: [
+                        buyItem(resolved, variant, quantity)
+                    ]
+                }));
+                window.location.assign(payload.url);
+                return;
+            }
+            // Buy-now's half of AGL-2019. The server's own 501 wording is not
+            // rendered to a visitor; this surface is public.
+            if (isPaymentsNotConfigured(response.status)) {
+                setMessage(storefrontPaymentsNotConfiguredText());
+                setStatus('unconfigured');
+                return;
+            }
+            if (payload == null ? void 0 : payload.needsShippingCountry) {
+                var _ref2;
+                var _payload_shippingCountries;
+                setShipCountries(((_payload_shippingCountries = payload.shippingCountries) == null ? void 0 : _payload_shippingCountries.length) ? payload.shippingCountries : [
+                    ...CommerceModel.CHECKOUT_SHIPPING_COUNTRIES
+                ]);
+                setMessage(String((_ref2 = payload == null ? void 0 : payload.error) != null ? _ref2 : ''));
+                // An unserved destination is a 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');
+        }
+    };
+    if (hostId && detail === null) {
+        return /*#__PURE__*/ _jsxs(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    display: 'flex',
+                    gap: 3
+                },
+                ...nodeSx
+            ],
+            children: [
+                /*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "rectangular",
+                    width: 320,
+                    height: 320
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        flex: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            width: "60%",
+                            height: 36
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            width: "25%"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            width: "90%"
+                        })
+                    ]
+                })
+            ]
+        }));
+    }
+    if (!resolved) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 3
+                },
+                ...nodeSx
+            ],
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Product not found.'
+            })
+        }));
+    }
+    // Every rendered `<img src>` on this page goes through
+    // `siteRelativeMediaSrc` (AGL-1726). Commerce called NO resolver at all,
+    // which cost it two things at once: a `media:` reference — writable via
+    // the resources API and the CSV importer — would have reached an `<img>`
+    // as the literal string, and a stored absolute
+    // `https://{subdomain}.aglyn.app/api/media/cdn/…` stayed absolute, so a
+    // white-label storefront on the customer's own domain served product
+    // photos naming OUR platform, cross-origin, in page source and in every
+    // visitor's request. Production carried exactly one such document; the
+    // resolver fixes it at READ time, so no backfill stands between the
+    // defect and the fix.
+    //
+    // Deliberately NOT applied to `resolved.mediaUrls` wholesale: the
+    // 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((_ref = (_ref1 = variant == null ? void 0 : variant.imageUrl) != null ? _ref1 : resolved.mediaUrls[activeImage]) != null ? _ref : resolved.mediaUrls[0], {
+        hostId
+    });
+    // Subscription framing (AGL-545): subscription-only products price as
+    // $X/mo|/yr with a "Subscribe" button; subscriptionOptional products
+    // surface the one-time/subscribe toggle instead. Same price either way
+    // — the server re-prices from the product doc regardless.
+    const subscription = resolved.subscription;
+    const intervalSuffix = (subscription == null ? void 0 : subscription.interval) === 'year' ? '/yr' : '/mo';
+    const subscribing = Boolean(subscription) && (!resolved.subscriptionOptional || billing === 'subscribe');
+    // schema.org Product/Offer (AGL-299). Kept ONLY for the case where this
+    // block renders without server-seeded page data — the besigner preview,
+    // or a page whose resolver didn't supply it. When the tenant page seeds
+    // us it emits the same Product node server-side (AGL-660), and two
+    // Product nodes for one item is worse than one, so we stand down.
+    const structuredData = hostId && resolvedId && !seededProduct ? _extends({
+        '@context': 'https://schema.org',
+        '@type': 'Product',
+        name: resolved.name
+    }, resolved.description ? {
+        description: resolved.description
+    } : {}, resolved.mediaUrls.length ? {
+        image: resolved.mediaUrls
+    } : {}, {
+        offers: {
+            '@type': 'Offer',
+            priceCurrency: 'USD',
+            price: String((_ref2 = variant == null ? void 0 : variant.priceUsd) != null ? _ref2 : 0),
+            availability: (variant == null ? void 0 : variant.soldOut) ? 'https://schema.org/OutOfStock' : 'https://schema.org/InStock'
+        }
+    }) : null;
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'flex',
+                gap: 3,
+                flexDirection: {
+                    xs: 'column',
+                    md: 'row'
+                }
+            },
+            ...nodeSx
+        ],
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: [
+                    galleryImage ? /*#__PURE__*/ _jsx(Box, {
+                        component: "img",
+                        src: galleryImage,
+                        alt: resolved.name,
+                        // DELIBERATELY NOT DEFERRED (AGL-2486). This is the gallery
+                        // hero at the top of a product page — the one image on this
+                        // surface that really is the LCP candidate, and the browser
+                        // default here is already `eager`. Spreading
+                        // `DEFERRED_IMAGE_ATTRIBUTES` over it to "finish the job" is
+                        // the obvious next edit and it re-introduces the bug this
+                        // issue opened with: an LCP image not discovered until after
+                        // layout has run. The thumbnail strip below it IS deferred.
+                        //
+                        // No `fetchpriority` either, for the reason written out at
+                        // `image.tsx`: `high` is a claim about every other request in
+                        // flight, and a page whose real LCP is the product NAME would
+                        // pay for that claim.
+                        sx: {
+                            width: '100%',
+                            aspectRatio: '1 / 1',
+                            objectFit: 'cover',
+                            borderRadius: 1
+                        }
+                    }) : /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            width: '100%',
+                            aspectRatio: '1 / 1',
+                            bgcolor: 'action.hover',
+                            borderRadius: 1
+                        }
+                    }),
+                    resolved.mediaUrls.length > 1 ? /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1,
+                            mt: 1,
+                            flexWrap: 'wrap'
+                        },
+                        children: resolved.mediaUrls.map((url, index)=>/*#__PURE__*/ _jsx(Box, _extends({
+                                component: "img",
+                                // Same resolver as the hero (AGL-1726) — a thumbnail is an
+                                // `<img>` on the customer's page and leaks exactly as much.
+                                src: Aglyn.siteRelativeMediaSrc(url, {
+                                    hostId
+                                }),
+                                alt: "",
+                                onClick: ()=>setActiveImage(index),
+                                sx: {
+                                    width: 56,
+                                    height: 56,
+                                    objectFit: 'cover',
+                                    borderRadius: 1,
+                                    cursor: 'pointer',
+                                    border: 2,
+                                    borderColor: index === activeImage ? 'primary.main' : 'transparent'
+                                }
+                            }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES), `${url}-${index}`))
+                    }) : null
+                ]
+            }),
+            structuredData ? /*#__PURE__*/ _jsx("script", {
+                type: "application/ld+json",
+                dangerouslySetInnerHTML: {
+                    __html: Aglyn.safeJsonLd(structuredData)
+                }
+            }) : null,
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        component: "h1",
+                        gutterBottom: true,
+                        children: resolved.name
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1,
+                            alignItems: 'center',
+                            mb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h6",
+                                children: `$${(_ref3 = variant == null ? void 0 : variant.priceUsd) != null ? _ref3 : 0}${subscribing ? intervalSuffix : ''}`
+                            }),
+                            subscribing && (subscription == null ? void 0 : subscription.trialDays) ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: `${subscription.trialDays}-day free trial`
+                            }) : null,
+                            (variant == null ? void 0 : variant.compareAtPriceUsd) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body1",
+                                        color: "text.disabled",
+                                        sx: {
+                                            textDecoration: 'line-through'
+                                        },
+                                        children: `$${variant.compareAtPriceUsd}`
+                                    }),
+                                    /*#__PURE__*/ _jsx(Chip, {
+                                        label: "Sale",
+                                        size: "small",
+                                        color: "primary"
+                                    })
+                                ]
+                            }) : null,
+                            (variant == null ? void 0 : variant.soldOut) ? /*#__PURE__*/ _jsx(Chip, {
+                                label: "Sold out",
+                                size: "small",
+                                variant: "outlined"
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: async ()=>{
+                                    if (hostId && resolved.id !== 'sample') {
+                                        setWishlisted(await toggleWishlist(hostId, resolved.id, siteFetch));
+                                    }
+                                },
+                                children: wishlisted ? '♥ Saved' : '♡ Save'
+                            })
+                        ]
+                    }),
+                    subscription && resolved.subscriptionOptional ? /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                        value: billing,
+                        exclusive: true,
+                        size: "small",
+                        onChange: (_event, value)=>{
+                            if (value === 'once' || value === 'subscribe') {
+                                setBilling(value);
+                            }
+                        },
+                        sx: {
+                            mb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "once",
+                                children: `One-time $${(_ref4 = variant == null ? void 0 : variant.priceUsd) != null ? _ref4 : 0}`
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "subscribe",
+                                children: `Subscribe $${(_ref5 = variant == null ? void 0 : variant.priceUsd) != null ? _ref5 : 0}${intervalSuffix}`
+                            })
+                        ]
+                    }) : null,
+                    resolved.options.map((option)=>{
+                        var _selections_option_name;
+                        return /*#__PURE__*/ _jsx(TextField, {
+                            label: option.name,
+                            value: (_selections_option_name = selections[option.name]) != null ? _selections_option_name : '',
+                            onChange: (event)=>setSelections((prev)=>_extends({}, prev, {
+                                        [option.name]: event.target.value
+                                    })),
+                            size: "small",
+                            select: true,
+                            fullWidth: true,
+                            sx: {
+                                mb: 1.5
+                            },
+                            children: option.values.map((value)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: value,
+                                    children: value
+                                }, value))
+                        }, option.name);
+                    }),
+                    showCoupon ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Discount code",
+                        value: coupon,
+                        onChange: (event)=>setCoupon(event.target.value),
+                        size: "small",
+                        sx: {
+                            mb: 2,
+                            display: 'block'
+                        }
+                    }) : null,
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1.5,
+                            alignItems: 'center',
+                            mb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Qty",
+                                value: quantity,
+                                onChange: (event)=>setQuantity(Math.max(1, Math.min(99, Math.round(Number(event.target.value)) || 1))),
+                                size: "small",
+                                sx: {
+                                    width: 80
+                                },
+                                slotProps: {
+                                    htmlInput: {
+                                        inputMode: 'numeric'
+                                    }
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                color: "primary",
+                                size: "large",
+                                disabled: !hostId || (variant == null ? void 0 : variant.soldOut),
+                                onClick: handleAddToCart,
+                                children: added ? 'Added ✓' : 'Add to cart'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "primary",
+                                size: "large",
+                                disabled: !hostId || status === 'sending' || (variant == null ? void 0 : variant.soldOut) || // 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.
+                                shipCountries !== null && !shipTo,
+                                onClick: handleBuy,
+                                sx: {
+                                    flex: 1
+                                },
+                                children: (variant == null ? void 0 : variant.soldOut) ? 'Sold out' : status === 'sending' ? // it is the shopper's only clue about what is about to
+                                // happen to their page (AGL-1944).
+                                nativeCheckout ? 'Opening…' : 'Redirecting…' : buyLabel || (subscribing ? 'Subscribe' : 'Buy now')
+                            })
+                        ]
+                    }),
+                    nativeCheckout ? /*#__PURE__*/ _jsx(Suspense, {
+                        fallback: /*#__PURE__*/ _jsx(StorefrontPaymentElementFallback, {}),
+                        children: /*#__PURE__*/ _jsx(StorefrontPaymentElement, {
+                            clientSecret: nativeCheckout.clientSecret,
+                            publishableKey: nativeCheckout.publishableKey,
+                            payLabel: buyLabel || (subscribing ? 'Subscribe' : 'Pay now'),
+                            // Cancelling drops the form and leaves the session open —
+                            // deliberately. The shopper may come back to the same
+                            // attempt key, and an abandoned session is what the AGL-323
+                            // recovery emails are built on. Nothing is expired from the
+                            // browser: that is a write against the merchant's account.
+                            onCancel: ()=>setNativeCheckout(null)
+                        })
+                    }) : null,
+                    shipCountries ? /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        label: "Ship to",
+                        value: shipTo,
+                        onChange: (event)=>setShipTo(event.target.value),
+                        size: "small",
+                        fullWidth: true,
+                        helperText: "Shipping rates depend on where this is going",
+                        sx: {
+                            mb: 2
+                        },
+                        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 === 'ask' || status === 'unconfigured' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        sx: {
+                            mb: 2
+                        },
+                        children: message
+                    }) : null,
+                    status === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "error",
+                        sx: {
+                            mb: 2
+                        },
+                        children: message || 'Checkout is unavailable right now.'
+                    }) : null,
+                    (variant == null ? void 0 : variant.soldOut) && hostId ? notifyState === 'done' ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "success",
+                        sx: {
+                            mb: 2
+                        },
+                        children: 'We will email you when it is back.'
+                    }) : /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1,
+                            mb: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                placeholder: "you@example.com",
+                                type: "email",
+                                // Third instance of the nameless-input defect (AGL-2392).
+                                // Named for its job rather than "Email address": this row
+                                // appears inside a product page that may also carry the
+                                // newsletter block, and two fields both announced as
+                                // "Email address" is barely better than none.
+                                slotProps: {
+                                    htmlInput: {
+                                        'aria-label': 'Email address for back-in-stock alert'
+                                    }
+                                },
+                                value: notifyEmail,
+                                onChange: (event)=>setNotifyEmail(event.target.value),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: "outlined",
+                                disabled: !notifyEmail.trim(),
+                                onClick: async ()=>{
+                                    const response = await siteFetch('/api/commerce/notify-restock', {
+                                        method: 'POST',
+                                        headers: {
+                                            'Content-Type': 'application/json'
+                                        },
+                                        body: JSON.stringify({
+                                            hostId,
+                                            productId: resolved.id,
+                                            email: notifyEmail
+                                        })
+                                    }).catch(()=>null);
+                                    if (response == null ? void 0 : response.ok) setNotifyState('done');
+                                },
+                                children: 'Notify me'
+                            })
+                        ]
+                    }) : null,
+                    !hideDescription && resolved.description ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        color: "text.secondary",
+                        children: resolved.description
+                    }) : null
+                ]
+            })
+        ]
+    }));
+});
+ProductDetail.displayName = 'AglynProductDetail';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Product detail',
+    description: "One product's gallery, options and buy button.",
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiTagOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'slug',
+            label: 'Product slug',
+            description: 'Pin to one product; blank follows the /products/{slug} URL ' + '(product page template).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'buyLabel',
+            label: 'Buy button label',
+            description: 'Defaults to "Buy now".',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'hideDescription',
+            label: 'Hide description',
+            description: 'Design the description separately with tokens.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        },
+        {
+            // Off by default, so no existing page changes shape on deploy. The cart
+            // has carried this field all along and the product page had none, so a
+            // shopper buying the same goods through Buy now had nowhere to enter a
+            // code the merchant had advertised.
+            name: 'showCoupon',
+            label: 'Show discount code field',
+            description: 'Lets a buyer enter a discount or coupon code before buying.',
+            component: Aglyn.FieldComponentType.CHECKBOX
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Product detail',
+        pluginId: BUNDLE_ID,
+        description: 'Gallery, variant picker, and buy button for one product',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiTagOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    },
+    {
+        // Product page (AGL-561): the commerce-standard PDP subtree —
+        // breadcrumb, detail, related products, reviews — for the product
+        // page template screen. `{{product.name}}` resolves there via the
+        // site page resolver's token pass (AGL-292); node shapes follow
+        // the Sections & Blocks convention (AGL-539) and reference only
+        // persisted component ids.
+        $id: generatePresetId(ID, 'page'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Product page',
+        pluginId: BUNDLE_ID,
+        description: 'Breadcrumb, product detail, related products, and reviews',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiTagOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: 'muiStack',
+            pluginId: Aglyn.MUI_BUNDLE_ID,
+            props: {
+                spacing: 4
+            },
+            // Styling on the node's own sx, never in props (AGL-1346): both
+            // records render, but only `node.sx` is the one the Styles panel can
+            // read, edit or clear.
+            sx: {
+                paddingTop: 2,
+                paddingBottom: 2
+            },
+            nodes: [
+                {
+                    $id: null,
+                    componentId: 'muiStack',
+                    pluginId: Aglyn.MUI_BUNDLE_ID,
+                    props: {
+                        direction: 'row',
+                        spacing: 1
+                    },
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    nodes: [
+                        {
+                            $id: null,
+                            componentId: 'muiScreenLink',
+                            pluginId: Aglyn.MUI_BUNDLE_ID,
+                            props: {
+                                children: 'Shop',
+                                size: 'small',
+                                color: 'inherit'
+                            }
+                        },
+                        {
+                            $id: null,
+                            componentId: 'muiTypography',
+                            pluginId: Aglyn.MUI_BUNDLE_ID,
+                            props: {
+                                variant: 'body2',
+                                children: '/ {{product.name}}'
+                            }
+                        }
+                    ]
+                },
+                {
+                    $id: null,
+                    componentId: ID,
+                    pluginId: BUNDLE_ID,
+                    props: {}
+                },
+                {
+                    $id: null,
+                    componentId: RELATED_PRODUCTS_ID,
+                    pluginId: BUNDLE_ID,
+                    props: {}
+                },
+                {
+                    $id: null,
+                    componentId: PRODUCT_REVIEWS_ID,
+                    pluginId: BUNDLE_ID,
+                    props: {}
+                }
+            ]
+        }
+    }
+];
+export default ProductDetail;
+
+//# sourceMappingURL=product-detail.js.map