@aglyn/plugins-commerce 1.0.0-beta.143

package/src/lib/components/reservation-widget.js

@@ -0,0 +1,418 @@
+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 { buildBeginCheckoutParams, trackEventBeforeNavigation } from "@aglyn/aglyn/app-utils/analytics-events";
+import * as CommerceModel from "../model/index.js";
+import { mdiCalendarCheckOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'reservation-widget';
+const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
+/**
+ * Reservation widget (AGL-310): date-range picker with a live quote
+ * (nights × seasonal rates + deposit due today) and a reserve flow that
+ * charges the deposit through the merchant's account. The server
+ * re-quotes and re-checks availability — the widget is display-only.
+ */ const ReservationWidget = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { resourceId, reserveLabel } = props, rest = _object_without_properties_loose(props, [
+        "resourceId",
+        "reserveLabel"
+    ]);
+    // 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 { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    const siteFetch = Aglyn.useSiteFetch();
+    const [availability, setAvailability] = useState(null);
+    const [checkIn, setCheckIn] = useState('');
+    const [checkOut, setCheckOut] = useState('');
+    const [guestName, setGuestName] = useState('');
+    const [guestEmail, setGuestEmail] = useState('');
+    const [status, setStatus] = useState('idle');
+    const [message, setMessage] = useState('');
+    useEffect(()=>{
+        if (!hostId || !resourceId) return;
+        let active = true;
+        void fetch(`/api/commerce/reservation-availability?hostId=${encodeURIComponent(hostId)}` + `&resourceId=${encodeURIComponent(resourceId)}`).then((response)=>response.ok ? response.json() : null).then((payload)=>{
+            if (active && payload) setAvailability(payload);
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        hostId,
+        resourceId
+    ]);
+    const checkInDayMs = checkIn ? Date.parse(`${checkIn}T00:00:00Z`) : 0;
+    const checkOutDayMs = checkOut ? Date.parse(`${checkOut}T00:00:00Z`) : 0;
+    const quote = useMemo(()=>{
+        if (!availability || !checkInDayMs || !checkOutDayMs) return null;
+        return CommerceModel.computeReservationQuote(availability.resource, checkInDayMs, checkOutDayMs);
+    }, [
+        availability,
+        checkInDayMs,
+        checkOutDayMs
+    ]);
+    const conflict = useMemo(()=>{
+        if (!availability || !checkInDayMs || !checkOutDayMs) return false;
+        return !CommerceModel.isRangeAvailable(availability.resource, availability.unavailable.map((range)=>({
+                checkInDayMs: range.fromDayMs,
+                checkOutDayMs: range.toDayMs,
+                status: 'confirmed'
+            })), checkInDayMs, checkOutDayMs);
+    }, [
+        availability,
+        checkInDayMs,
+        checkOutDayMs
+    ]);
+    /**
+     * Idempotency key for ONE reservation attempt (AGL-1697).
+     *
+     * Minted lazily on the first Reserve click, retired whenever the stay
+     * changes shape — different dates, resource or guest are a different
+     * attempt. A retry of THIS attempt presents the same key, so the server
+     * replays the original session URL instead of telling the guest their own
+     * pending hold "just sold out".
+     */ const attemptKey = useRef('');
+    useEffect(()=>{
+        attemptKey.current = '';
+    }, [
+        checkInDayMs,
+        checkOutDayMs,
+        resourceId,
+        guestName,
+        guestEmail
+    ]);
+    const handleReserve = async ()=>{
+        if (!hostId || !resourceId || 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/reserve', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Idempotency-Key': attemptKey.current
+                },
+                body: JSON.stringify({
+                    hostId,
+                    resourceId,
+                    checkInDayMs,
+                    checkOutDayMs,
+                    guestName,
+                    guestEmail
+                })
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (response.ok && (payload == null ? void 0 : payload.url)) {
+                // The stay's `begin_checkout`. This widget charges a real deposit
+                // through the merchant's Stripe account and reported nothing at all,
+                // so a lodging site saw traffic and then silence — GA4's ecommerce
+                // reports read that as a 100% abandonment rate on every resource
+                // they list, which is the same hole `purchase` closed for products.
+                //
+                // After the server accepted the hold and minted a session, never on
+                // the click: the dates can lose a race and answer 409, and counting
+                // those would report checkouts that Stripe never saw.
+                //
+                // `value` is what is being charged TODAY — `reserve.ts` bills
+                // `depositCents || totalCents` — not the value of the stay. Reporting
+                // the whole stay against a deposit payment would make the merchant's
+                // checkout value disagree with the `purchase` that follows it, and
+                // the gap would look like abandoned upsell rather than a deposit.
+                //
+                // Ex-tax, matching `buildStorefrontPurchaseParams`: the lodging tax
+                // rides the session as a second line and is money held for a taxing
+                // authority, not the merchant's revenue.
+                const chargedCents = quote ? quote.depositCents || quote.totalCents : 0;
+                if (availability && chargedCents > 0) {
+                    await trackEventBeforeNavigation('begin_checkout', buildBeginCheckoutParams({
+                        value: chargedCents / 100,
+                        items: [
+                            {
+                                item_id: resourceId,
+                                item_name: availability.resource.name,
+                                price: chargedCents / 100,
+                                quantity: 1
+                            }
+                        ]
+                    }));
+                }
+                window.location.assign(payload.url);
+                return;
+            }
+            setMessage(String((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : ''));
+            setStatus('error');
+        } catch (unused) {
+            setStatus('error');
+        }
+    };
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 13,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Reservation widget — dates, quote, and reserve render here'
+        }));
+    }
+    if (!resourceId) {
+        // The instruction is for the author, so only editing surfaces draw it;
+        // a published page renders the bare element.
+        if (!suppressNavigation) return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest));
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 2
+                },
+                ...nodeSx
+            ],
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Set a resource id on this block (console → Resources).'
+            })
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1.5,
+                maxWidth: 420,
+                p: 2,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 1
+            },
+            ...nodeSx
+        ],
+        children: [
+            availability ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        children: availability.resource.name
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: `From $${availability.resource.nightlyRateUsd}/night` + (availability.resource.minNights ? ` · ${availability.resource.minNights}-night minimum` : '')
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    gap: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Check-in",
+                        type: "date",
+                        value: checkIn,
+                        onChange: (event)=>setCheckIn(event.target.value),
+                        size: "small",
+                        fullWidth: true,
+                        slotProps: {
+                            inputLabel: {
+                                shrink: true
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Check-out",
+                        type: "date",
+                        value: checkOut,
+                        onChange: (event)=>setCheckOut(event.target.value),
+                        size: "small",
+                        fullWidth: true,
+                        slotProps: {
+                            inputLabel: {
+                                shrink: true
+                            }
+                        }
+                    })
+                ]
+            }),
+            conflict ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: 'Those dates are unavailable.'
+            }) : (quote == null ? void 0 : quote.problem) ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: quote.problem
+            }) : quote ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `${quote.nights} night${quote.nights === 1 ? '' : 's'}`
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: usd(quote.subtotalCents)
+                            })
+                        ]
+                    }),
+                    quote.depositCents < quote.totalCents ? /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    fontWeight: 600
+                                },
+                                children: 'Due today (deposit)'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    fontWeight: 600
+                                },
+                                children: usd(quote.depositCents)
+                            })
+                        ]
+                    }) : null
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Your name",
+                value: guestName,
+                onChange: (event)=>setGuestName(event.target.value),
+                size: "small"
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Email",
+                type: "email",
+                value: guestEmail,
+                onChange: (event)=>setGuestEmail(event.target.value),
+                size: "small"
+            }),
+            status === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "error",
+                children: message || 'Reservation is unavailable right now.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                color: "primary",
+                disabled: status === 'sending' || conflict || !quote || Boolean(quote.problem) || !guestEmail.trim(),
+                onClick: handleReserve,
+                children: status === 'sending' ? 'Redirecting…' : reserveLabel || 'Reserve now'
+            })
+        ]
+    }));
+});
+ReservationWidget.displayName = 'AglynReservationWidget';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Reservation widget',
+    description: 'A date-range booking with a live quote and a deposit taken up front.',
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiCalendarCheckOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'resourceId',
+            label: 'Resource id',
+            description: 'From the Resources card on the Products page.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        },
+        {
+            name: 'reserveLabel',
+            label: 'Button label',
+            description: 'Defaults to "Reserve now".',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Reservation widget',
+        pluginId: BUNDLE_ID,
+        description: 'Date-range stay booking with live quote + deposit',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiCalendarCheckOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default ReservationWidget;
+
+//# sourceMappingURL=reservation-widget.js.map

package/src/lib/components/reservation-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/reservation-widget.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\nimport * as Aglyn from '@aglyn/aglyn'\nimport {\n  buildBeginCheckoutParams,\n  trackEventBeforeNavigation,\n} from '@aglyn/aglyn/app-utils/analytics-events'\nimport * as CommerceModel from '../model'\nimport { mdiCalendarCheckOutline } from '@aglyn/shared-data-mdi'\nimport Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport {\n  forwardRef,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'reservation-widget'\n\nexport interface ReservationWidgetProps {\n  /** Resource id from the console Resources card. */\n  resourceId?: string\n  reserveLabel?: string\n}\n\ninterface Availability {\n  resource: CommerceModel.HostResource\n  unavailable: Array<{ fromDayMs: number; toDayMs: number }>\n}\n\nconst usd = (cents: number) => `$${(cents / 100).toFixed(2)}`\n\n/**\n * Reservation widget (AGL-310): date-range picker with a live quote\n * (nights × seasonal rates + deposit due today) and a reserve flow that\n * charges the deposit through the merchant's account. The server\n * re-quotes and re-checks availability — the widget is display-only.\n */\nconst ReservationWidget = forwardRef<HTMLDivElement, ReservationWidgetProps>(\n  (props, ref) => {\n    const { resourceId, reserveLabel, ...rest } = props\n    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).\n    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [props['sx']]\n    const { hostId } = Aglyn.useSite()\n    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n    const siteFetch = Aglyn.useSiteFetch()\n    const [availability, setAvailability] = useState<Availability | null>(null)\n    const [checkIn, setCheckIn] = useState('')\n    const [checkOut, setCheckOut] = useState('')\n    const [guestName, setGuestName] = useState('')\n    const [guestEmail, setGuestEmail] = useState('')\n    const [status, setStatus] = useState<'idle' | 'sending' | 'error'>('idle')\n    const [message, setMessage] = useState('')\n\n    useEffect(() => {\n      if (!hostId || !resourceId) return\n      let active = true\n      void fetch(\n        `/api/commerce/reservation-availability?hostId=${encodeURIComponent(hostId)}` +\n          `&resourceId=${encodeURIComponent(resourceId)}`,\n      )\n        .then((response) => (response.ok ? response.json() : null))\n        .then((payload) => {\n          if (active && payload) setAvailability(payload)\n        })\n        .catch(() => undefined)\n      return () => {\n        active = false\n      }\n    }, [hostId, resourceId])\n\n    const checkInDayMs = checkIn ? Date.parse(`${checkIn}T00:00:00Z`) : 0\n    const checkOutDayMs = checkOut ? Date.parse(`${checkOut}T00:00:00Z`) : 0\n\n    const quote = useMemo(() => {\n      if (!availability || !checkInDayMs || !checkOutDayMs) return null\n      return CommerceModel.computeReservationQuote(\n        availability.resource,\n        checkInDayMs,\n        checkOutDayMs,\n      )\n    }, [availability, checkInDayMs, checkOutDayMs])\n\n    const conflict = useMemo(() => {\n      if (!availability || !checkInDayMs || !checkOutDayMs) return false\n      return !CommerceModel.isRangeAvailable(\n        availability.resource,\n        availability.unavailable.map((range) => ({\n          checkInDayMs: range.fromDayMs,\n          checkOutDayMs: range.toDayMs,\n          status: 'confirmed' as const,\n        })),\n        checkInDayMs,\n        checkOutDayMs,\n      )\n    }, [availability, checkInDayMs, checkOutDayMs])\n\n    /**\n     * Idempotency key for ONE reservation attempt (AGL-1697).\n     *\n     * Minted lazily on the first Reserve click, retired whenever the stay\n     * changes shape — different dates, resource or guest are a different\n     * attempt. A retry of THIS attempt presents the same key, so the server\n     * replays the original session URL instead of telling the guest their own\n     * pending hold \"just sold out\".\n     */\n    const attemptKey = useRef('')\n    useEffect(() => {\n      attemptKey.current = ''\n    }, [checkInDayMs, checkOutDayMs, resourceId, guestName, guestEmail])\n\n    const handleReserve = async () => {\n      if (!hostId || !resourceId || status === 'sending') return\n      setStatus('sending')\n      setMessage('')\n      if (!attemptKey.current) {\n        attemptKey.current =\n          globalThis.crypto?.randomUUID?.() ??\n          `${Date.now()}-${Math.random().toString(36).slice(2)}`\n      }\n      try {\n        const response = await siteFetch('/api/commerce/reserve', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n            'Idempotency-Key': attemptKey.current,\n          },\n          body: JSON.stringify({\n            hostId,\n            resourceId,\n            checkInDayMs,\n            checkOutDayMs,\n            guestName,\n            guestEmail,\n          }),\n        })\n        const payload = await response.json().catch(() => ({}))\n        if (response.ok && payload?.url) {\n          // The stay's `begin_checkout`. This widget charges a real deposit\n          // through the merchant's Stripe account and reported nothing at all,\n          // so a lodging site saw traffic and then silence — GA4's ecommerce\n          // reports read that as a 100% abandonment rate on every resource\n          // they list, which is the same hole `purchase` closed for products.\n          //\n          // After the server accepted the hold and minted a session, never on\n          // the click: the dates can lose a race and answer 409, and counting\n          // those would report checkouts that Stripe never saw.\n          //\n          // `value` is what is being charged TODAY — `reserve.ts` bills\n          // `depositCents || totalCents` — not the value of the stay. Reporting\n          // the whole stay against a deposit payment would make the merchant's\n          // checkout value disagree with the `purchase` that follows it, and\n          // the gap would look like abandoned upsell rather than a deposit.\n          //\n          // Ex-tax, matching `buildStorefrontPurchaseParams`: the lodging tax\n          // rides the session as a second line and is money held for a taxing\n          // authority, not the merchant's revenue.\n          const chargedCents = quote\n            ? quote.depositCents || quote.totalCents\n            : 0\n          if (availability && chargedCents > 0) {\n            await trackEventBeforeNavigation(\n              'begin_checkout',\n              buildBeginCheckoutParams({\n                value: chargedCents / 100,\n                items: [\n                  {\n                    item_id: resourceId,\n                    item_name: availability.resource.name,\n                    price: chargedCents / 100,\n                    quantity: 1,\n                  },\n                ],\n              }),\n            )\n          }\n          window.location.assign(payload.url)\n          return\n        }\n        setMessage(String(payload?.error ?? ''))\n        setStatus('error')\n      } catch {\n        setStatus('error')\n      }\n    }\n\n    if (!hostId) {\n      return (\n        <Box\n          ref={ref}\n          {...rest}\n          sx={[\n            {\n              p: 3,\n              border: '1px dashed',\n              borderColor: 'divider',\n              borderRadius: 1,\n              color: 'text.secondary',\n              fontSize: 13,\n              fontFamily: 'system-ui, sans-serif',\n            },\n            ...nodeSx,\n          ]}\n        >\n          {'Reservation widget — dates, quote, and reserve render here'}\n        </Box>\n      )\n    }\n    if (!resourceId) {\n      // The instruction is for the author, so only editing surfaces draw it;\n      // a published page renders the bare element.\n      if (!suppressNavigation) return <Box ref={ref} {...rest} />\n      return (\n        <Box ref={ref} {...rest} sx={[{ p: 2 }, ...nodeSx]}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {'Set a resource id on this block (console → Resources).'}\n          </Typography>\n        </Box>\n      )\n    }\n\n    return (\n      <Box\n        ref={ref}\n        {...rest}\n        sx={[\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 1.5,\n            maxWidth: 420,\n            p: 2,\n            border: 1,\n            borderColor: 'divider',\n            borderRadius: 1,\n          },\n          ...nodeSx,\n        ]}\n      >\n        {availability ? (\n          <>\n            <Typography variant=\"h6\">{availability.resource.name}</Typography>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {`From $${availability.resource.nightlyRateUsd}/night` +\n                (availability.resource.minNights\n                  ? ` · ${availability.resource.minNights}-night minimum`\n                  : '')}\n            </Typography>\n          </>\n        ) : null}\n        <Box sx={{ display: 'flex', gap: 1 }}>\n          <TextField\n            label=\"Check-in\"\n            type=\"date\"\n            value={checkIn}\n            onChange={(event) => setCheckIn(event.target.value)}\n            size=\"small\"\n            fullWidth\n            slotProps={{ inputLabel: { shrink: true } }}\n          />\n          <TextField\n            label=\"Check-out\"\n            type=\"date\"\n            value={checkOut}\n            onChange={(event) => setCheckOut(event.target.value)}\n            size=\"small\"\n            fullWidth\n            slotProps={{ inputLabel: { shrink: true } }}\n          />\n        </Box>\n        {conflict ? (\n          <Alert severity=\"warning\">{'Those dates are unavailable.'}</Alert>\n        ) : quote?.problem ? (\n          <Alert severity=\"info\">{quote.problem}</Alert>\n        ) : quote ? (\n          <>\n            <Divider />\n            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n              <Typography variant=\"body2\">\n                {`${quote.nights} night${quote.nights === 1 ? '' : 's'}`}\n              </Typography>\n              <Typography variant=\"body2\">\n                {usd(quote.subtotalCents)}\n              </Typography>\n            </Box>\n            {quote.depositCents < quote.totalCents ? (\n              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n                <Typography variant=\"body2\" sx={{ fontWeight: 600 }}>\n                  {'Due today (deposit)'}\n                </Typography>\n                <Typography variant=\"body2\" sx={{ fontWeight: 600 }}>\n                  {usd(quote.depositCents)}\n                </Typography>\n              </Box>\n            ) : null}\n          </>\n        ) : null}\n        <TextField\n          label=\"Your name\"\n          value={guestName}\n          onChange={(event) => setGuestName(event.target.value)}\n          size=\"small\"\n        />\n        <TextField\n          label=\"Email\"\n          type=\"email\"\n          value={guestEmail}\n          onChange={(event) => setGuestEmail(event.target.value)}\n          size=\"small\"\n        />\n        {status === 'error' ? (\n          <Alert severity=\"error\">\n            {message || 'Reservation is unavailable right now.'}\n          </Alert>\n        ) : null}\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          disabled={\n            status === 'sending' ||\n            conflict ||\n            !quote ||\n            Boolean(quote.problem) ||\n            !guestEmail.trim()\n          }\n          onClick={handleReserve}\n        >\n          {status === 'sending'\n            ? 'Redirecting…'\n            : reserveLabel || 'Reserve now'}\n        </Button>\n      </Box>\n    )\n  },\n)\nReservationWidget.displayName = 'AglynReservationWidget'\n\nexport const schema: Aglyn.ComponentSchema<ReservationWidgetProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Reservation widget',\n  description:\n    'A date-range booking with a live quote and a deposit taken up front.',\n  category: Aglyn.ComponentCategory.COMMERCE,\n  icon: { path: mdiCalendarCheckOutline.path, sx: { color: '#2e7d32' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'resourceId',\n      label: 'Resource id',\n      description: 'From the Resources card on the Products page.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n    {\n      name: 'reserveLabel',\n      label: 'Button label',\n      description: 'Defaults to \"Reserve now\".',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Reservation widget',\n    pluginId: BUNDLE_ID,\n    description: 'Date-range stay booking with live quote + deposit',\n    category: Aglyn.ComponentCategory.COMMERCE,\n    icon: { path: mdiCalendarCheckOutline.path, sx: { color: '#2e7d32' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {},\n    },\n  },\n]\n\nexport default ReservationWidget\n"],"names":["Aglyn","buildBeginCheckoutParams","trackEventBeforeNavigation","CommerceModel","mdiCalendarCheckOutline","Alert","Box","Button","Divider","TextField","Typography","forwardRef","useContext","useEffect","useMemo","useRef","useState","BUNDLE_ID","generatePresetId","ID","usd","cents","toFixed","ReservationWidget","props","ref","resourceId","reserveLabel","rest","nodeSx","Array","isArray","hostId","useSite","suppressNavigation","ScreenLinkContext","siteFetch","useSiteFetch","availability","setAvailability","checkIn","setCheckIn","checkOut","setCheckOut","guestName","setGuestName","guestEmail","setGuestEmail","status","setStatus","message","setMessage","active","fetch","encodeURIComponent","then","response","ok","json","payload","catch","undefined","checkInDayMs","Date","parse","checkOutDayMs","quote","computeReservationQuote","resource","conflict","isRangeAvailable","unavailable","map","range","fromDayMs","toDayMs","attemptKey","current","handleReserve","globalThis","crypto","randomUUID","now","Math","random","toString","slice","method","headers","body","JSON","stringify","url","chargedCents","depositCents","totalCents","value","items","item_id","item_name","name","price","quantity","window","location","assign","String","error","sx","p","border","borderColor","borderRadius","color","fontSize","fontFamily","variant","display","flexDirection","gap","maxWidth","nightlyRateUsd","minNights","label","type","onChange","event","target","size","fullWidth","slotProps","inputLabel","shrink","severity","problem","justifyContent","nights","subtotalCents","fontWeight","disabled","Boolean","trim","onClick","displayName","schema","$id","pluginId","description","category","ComponentCategory","COMMERCE","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","component","FieldComponentType","TEXT_FIELD","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/storefront-payment-element-fallback.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */
+/** Loading fallback for the lazy boundary the callers mount this behind. */
+export declare function StorefrontPaymentElementFallback(): import("react").JSX.Element;

package/src/lib/components/storefront-payment-element-fallback.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } 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.
+ */ /**
+ * The spinner shown WHILE the Payment Element chunk loads (AGL-2486).
+ *
+ * It lives in its own module for one reason: a `lazy()` fallback that is
+ * imported from the lazily-loaded module cancels the laziness. `cart.tsx` and
+ * `product-detail.tsx` both used to do
+ *
+ * ```ts
+ * import { StorefrontPaymentElementFallback } from './storefront-payment-element'
+ * const StorefrontPaymentElement = lazy(() => import('./storefront-payment-element'))
+ * ```
+ *
+ * — and a static import and a dynamic import of the same module resolve to the
+ * same module, so the static one pulled the whole payment element (and, with
+ * it, `@stripe/stripe-js`) straight into the eager bundle. The lazy boundary
+ * was decorative. Keeping the fallback here is what makes it real.
+ *
+ * So: nothing in this file may import `@stripe/*`, and `stripe-stays-lazy.spec.ts`
+ * asserts that it does not.
+ */ import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+/** Loading fallback for the lazy boundary the callers mount this behind. */ export function StorefrontPaymentElementFallback() {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            py: 4
+        },
+        children: /*#__PURE__*/ _jsx(CircularProgress, {
+            size: 24
+        })
+    });
+}
+
+//# sourceMappingURL=storefront-payment-element-fallback.js.map

package/src/lib/components/storefront-payment-element-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/commerce/src/lib/components/storefront-payment-element-fallback.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\n/**\n * The spinner shown WHILE the Payment Element chunk loads (AGL-2486).\n *\n * It lives in its own module for one reason: a `lazy()` fallback that is\n * imported from the lazily-loaded module cancels the laziness. `cart.tsx` and\n * `product-detail.tsx` both used to do\n *\n * ```ts\n * import { StorefrontPaymentElementFallback } from './storefront-payment-element'\n * const StorefrontPaymentElement = lazy(() => import('./storefront-payment-element'))\n * ```\n *\n * — and a static import and a dynamic import of the same module resolve to the\n * same module, so the static one pulled the whole payment element (and, with\n * it, `@stripe/stripe-js`) straight into the eager bundle. The lazy boundary\n * was decorative. Keeping the fallback here is what makes it real.\n *\n * So: nothing in this file may import `@stripe/*`, and `stripe-stays-lazy.spec.ts`\n * asserts that it does not.\n */\n\nimport Box from '@mui/material/Box'\nimport CircularProgress from '@mui/material/CircularProgress'\n\n/** Loading fallback for the lazy boundary the callers mount this behind. */\nexport function StorefrontPaymentElementFallback() {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>\n      <CircularProgress size={24} />\n    </Box>\n  )\n}\n"],"names":["Box","CircularProgress","StorefrontPaymentElementFallback","sx","display","justifyContent","py","size"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;;;;;;;;;;;;;;;;;CAmBC,GAED,OAAOA,SAAS,oBAAmB;AACnC,OAAOC,sBAAsB,iCAAgC;AAE7D,0EAA0E,GAC1E,OAAO,SAASC;IACd,qBACE,KAACF;QAAIG,IAAI;YAAEC,SAAS;YAAQC,gBAAgB;YAAUC,IAAI;QAAE;kBAC1D,cAAA,KAACL;YAAiBM,MAAM;;;AAG9B"}

package/src/lib/components/storefront-payment-element.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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.
+ */
+/**
+ * The storefront Payment Element (AGL-1944) — the shopper pays on the
+ * merchant's own domain instead of being sent to `checkout.stripe.com`.
+ *
+ * ## THIS COMPONENT DOES NOT FULFIL ANYTHING
+ *
+ * It has no success callback, and that absence is the design rather than an
+ * omission. `libs/plugins/commerce/src/lib/server/billing-webhook.ts` creates
+ * the order on `checkout.session.completed` and is the only thing that ever
+ * does. An in-page flow makes trusting the browser far more tempting than a
+ * redirect does — the form is right there, `confirm()` resolves in hand, and
+ * posting "done, please fulfil" is one line away — and the browser is the one
+ * participant in a payment that can lie about having paid.
+ *
+ * It is also the participant that can VANISH. A shopper who confirms and
+ * closes the tab never runs a callback, so a flow that fulfils here loses the
+ * order outright while keeping the money; a shopper who refreshes the return
+ * page runs it twice. Neither is reachable from a design with no callback in
+ * it. What happens after a successful confirm is a redirect to `return_url`,
+ * carrying the `session_id` the server put there — so the page can SHOW the
+ * shopper a result by looking the order up, without being TOLD the outcome by
+ * this code.
+ *
+ * ## Declines and 3DS
+ *
+ * Both were handled for us by the redirect and now have to be handled here.
+ *
+ * A decline resolves as `{ type: 'error' }` and is rendered inline WITHOUT
+ * unmounting the form: the shopper's basket, address and chosen method are all
+ * still on screen and they can try another card. That is the whole difference
+ * between a recoverable decline and a dead end, and it is why the error state
+ * below sits beside the element rather than replacing it.
+ *
+ * A 3DS challenge is Stripe's own: `confirm()` presents the challenge and, for
+ * redirect-based methods, sends the browser to `return_url` and back. Nothing
+ * here has to model it — but the button must stay disabled across the whole
+ * await, because a second `confirm()` during a challenge is exactly the
+ * double-submit the server's idempotency claim exists to survive and there is
+ * no reason to make it lean on that.
+ */
+export interface StorefrontPaymentElementProps {
+    /** Stripe's instruction to the browser. Not a claim that money moved. */
+    clientSecret: string;
+    publishableKey: string;
+    /** Shown on the pay button, so the merchant's own total reads through. */
+    payLabel?: string;
+    /** Abandon the in-page form and return to the store. */
+    onCancel?: () => void;
+}
+/** Test seam: `loadStripe` caches per key across a file's tests otherwise. */
+export declare function __resetStripePromises(): void;
+export declare function StorefrontPaymentElement({ clientSecret, publishableKey, payLabel, onCancel, }: StorefrontPaymentElementProps): import("react").JSX.Element;
+/**
+ * Re-exported so the old import path still resolves, but the definition now
+ * lives in its own module (AGL-2486): a fallback imported FROM the lazily
+ * loaded module drags that module into the eager bundle and cancels the
+ * `lazy()`. Callers must import it from `./storefront-payment-element-fallback`
+ * — importing it from here is exactly the bug, and re-exporting it does not
+ * make that safe.
+ */
+export { StorefrontPaymentElementFallback } from './storefront-payment-element-fallback';
+export default StorefrontPaymentElement;