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

package/src/lib/components/quote-page-body.js

@@ -0,0 +1,724 @@
+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 Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { forwardRef, lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { formatOrderMoney, readStorefrontCheckoutWallets } from "../model/index.js";
+import { QuoteProofPanel } from "./quote-proof-panel.js";
+import { StorefrontPaymentElementFallback } from "./storefront-payment-element-fallback.js";
+/** The Payment Element, lazily: Stripe.js loads only when a customer presses Pay. */ const StorefrontPaymentElement = /*#__PURE__*/ lazy(()=>import("./storefront-payment-element.js").then((module)=>({
+            default: module.StorefrontPaymentElement
+        })));
+/** After a payment returns here, how often and how long the page asks whether it landed. */ const CONFIRM_POLL_MS = 2000;
+const CONFIRM_POLLS = 15;
+function dateLabel(atMs) {
+    if (!atMs) return '';
+    return new Date(atMs).toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+    });
+}
+function addressLines(address) {
+    const cityLine = [
+        address.city,
+        [
+            address.state,
+            address.postalCode
+        ].filter(Boolean).join(' ')
+    ].filter(Boolean).join(', ');
+    return [
+        address.name,
+        address.line1,
+        address.line2,
+        cityLine,
+        address.country
+    ].filter((line)=>Boolean(line));
+}
+function stripeContact(address) {
+    if (!(address == null ? void 0 : address.country)) return undefined;
+    return {
+        name: address.name,
+        address: {
+            country: address.country,
+            line1: address.line1,
+            line2: address.line2,
+            city: address.city,
+            state: address.state,
+            postal_code: address.postalCode
+        }
+    };
+}
+function AddressBlock({ label, lines }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.25,
+        sx: {
+            minWidth: 0,
+            flex: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                color: "text.secondary",
+                children: label
+            }),
+            lines.map((line, index)=>/*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    children: line
+                }, index))
+        ]
+    });
+}
+function TotalRow({ label, value, strong }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+            justifyContent: 'space-between'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: strong ? 'subtitle1' : 'body2',
+                color: strong ? 'text.primary' : 'text.secondary',
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: strong ? 'subtitle1' : 'body2',
+                color: strong ? 'text.primary' : 'text.secondary',
+                children: value
+            })
+        ]
+    });
+}
+/**
+ * The customer's quote page (AGL-4094), loaded when the page draws it (see
+ * `quote-page.tsx`): what a customer sees when they open
+ * the pay link a business sent them. The commerce page resolver serves it at
+ * `/pay-quote` inside the site's own header and footer; a business can also
+ * place it on a page of their own design at that address.
+ *
+ * The quote is read AFTER hydration from `?q=&t=`, so the page itself is the
+ * same for every customer and may be cached, and the quote never is. Pay asks
+ * the server for a fresh payment for the quote as the page shows it: Stripe's
+ * own page, or the payment form here when in-page payments are on. Nothing
+ * here decides a quote is paid; after paying, the page reads that from the
+ * server like any other visit.
+ */ const QuotePageBody = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { heading } = props, rest = _object_without_properties_loose(props, [
+        "heading"
+    ]);
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    const [state, setState] = useState({
+        kind: 'loading'
+    });
+    const [paying, setPaying] = useState(false);
+    const [payError, setPayError] = useState('');
+    const [nativeCheckout, setNativeCheckout] = useState(null);
+    /** What a return from paying turned out to be: still being confirmed, or not paid. */ const [returned, setReturned] = useState(null);
+    const link = useRef({
+        quoteId: '',
+        token: '',
+        sessionId: ''
+    });
+    const load = useCallback(async ()=>{
+        const { quoteId, token } = link.current;
+        try {
+            var _payload_storeName;
+            const response = await siteFetch(`/api/commerce/quote-view?hostId=${encodeURIComponent(hostId != null ? hostId : '')}` + `&q=${encodeURIComponent(quoteId)}&t=${encodeURIComponent(token)}`);
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                var _ref;
+                return {
+                    kind: 'missing',
+                    message: String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'We could not find that quote.')
+                };
+            }
+            if ((payload == null ? void 0 : payload.state) === 'replaced') return {
+                kind: 'replaced',
+                storeName: String((_payload_storeName = payload.storeName) != null ? _payload_storeName : '')
+            };
+            return {
+                kind: 'ready',
+                view: payload
+            };
+        } catch (unused) {
+            return {
+                kind: 'missing',
+                message: 'This quote could not be loaded. Check your connection and try again.'
+            };
+        }
+    }, [
+        hostId,
+        siteFetch
+    ]);
+    useEffect(()=>{
+        var _params_get, _params_get1, _params_get2;
+        if (!hostId) return;
+        const params = new URLSearchParams(window.location.search);
+        link.current = {
+            quoteId: (_params_get = params.get('q')) != null ? _params_get : '',
+            token: (_params_get1 = params.get('t')) != null ? _params_get1 : '',
+            sessionId: (_params_get2 = params.get('session_id')) != null ? _params_get2 : ''
+        };
+        if (!link.current.quoteId || !link.current.token) {
+            setState({
+                kind: 'missing',
+                message: 'Open this page from the link you were sent with your quote.'
+            });
+            return;
+        }
+        let live = true;
+        void (async ()=>{
+            const first = await load();
+            if (!live) return;
+            setState(first);
+            const sessionId = link.current.sessionId;
+            if (first.kind !== 'ready' || first.view.status !== 'unpaid' || !sessionId) return;
+            // Back from paying: the payment may have landed before the record of it.
+            const status = await siteFetch(`/api/commerce/checkout-status?hostId=${encodeURIComponent(hostId)}` + `&sessionId=${encodeURIComponent(sessionId)}`).then((response)=>response.ok ? response.json() : null).catch(()=>null);
+            if (!live) return;
+            if ((status == null ? void 0 : status.status) === 'open') {
+                setReturned('failed');
+                return;
+            }
+            if ((status == null ? void 0 : status.status) !== 'complete') return;
+            setReturned('confirming');
+            for(let poll = 0; poll < CONFIRM_POLLS && live; poll++){
+                await new Promise((resolve)=>setTimeout(resolve, CONFIRM_POLL_MS));
+                if (!live) return;
+                const next = await load();
+                if (!live) return;
+                if (next.kind === 'ready' && next.view.status !== 'unpaid') {
+                    setState(next);
+                    setReturned(null);
+                    return;
+                }
+            }
+            if (live) setReturned('unconfirmed');
+        })();
+        return ()=>{
+            live = false;
+        };
+    }, [
+        hostId,
+        load,
+        siteFetch
+    ]);
+    const view = state.kind === 'ready' ? state.view : null;
+    const pay = useCallback(async ()=>{
+        var _ref;
+        var _globalThis_crypto_randomUUID, _globalThis_crypto;
+        if (!view || paying) return;
+        setPaying(true);
+        setPayError('');
+        setReturned(null);
+        // One key per press: a press is one attempt, and a retry after a failure is a new one.
+        const attemptKey = (_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/quote-pay', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Idempotency-Key': attemptKey
+                },
+                body: JSON.stringify({
+                    hostId,
+                    q: link.current.quoteId,
+                    t: link.current.token,
+                    v: view.version
+                })
+            });
+            const payload = await response.json().catch(()=>({}));
+            // A session with a client secret is the in-page form; checked before the
+            // redirect, so a form is never navigated away from.
+            if (response.ok && (payload == null ? void 0 : payload.clientSecret) && (payload == null ? void 0 : payload.publishableKey)) {
+                setNativeCheckout({
+                    clientSecret: String(payload.clientSecret),
+                    publishableKey: String(payload.publishableKey),
+                    wallets: readStorefrontCheckoutWallets(payload.wallets)
+                });
+                setPaying(false);
+                return;
+            }
+            if (response.ok && (payload == null ? void 0 : payload.url)) {
+                window.location.assign(String(payload.url));
+                return;
+            }
+            if (payload == null ? void 0 : payload.replaced) {
+                setState({
+                    kind: 'replaced',
+                    storeName: view.storeName
+                });
+                return;
+            }
+            if ((payload == null ? void 0 : payload.reason) === 'paid' || (payload == null ? void 0 : payload.reason) === 'updated') {
+                const next = await load();
+                setState(next);
+            }
+            setPayError(String((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'Your payment could not be set up. Try again.'));
+            setPaying(false);
+        } catch (unused) {
+            setPayError('Your payment could not be set up. Check your connection and try again.');
+            setPaying(false);
+        }
+    }, [
+        view,
+        paying,
+        siteFetch,
+        hostId,
+        load
+    ]);
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1
+                },
+                ...nodeSx
+            ],
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Quote — a customer’s quote and its Pay button render here'
+            })
+        }));
+    }
+    if (state.kind === 'loading') {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    py: 6,
+                    textAlign: 'center'
+                },
+                ...nodeSx
+            ],
+            children: /*#__PURE__*/ _jsx(CircularProgress, {
+                size: 28,
+                "aria-label": "Loading your quote"
+            })
+        }));
+    }
+    if (state.kind === 'missing') {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: nodeSx,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        component: "h1",
+                        children: heading || 'Your quote'
+                    }),
+                    /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: state.message
+                    })
+                ]
+            })
+        }));
+    }
+    if (state.kind === 'replaced') {
+        const business = state.storeName || 'The business';
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: nodeSx,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    state.storeName ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "overline",
+                        color: "text.secondary",
+                        children: state.storeName
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        component: "h1",
+                        children: 'This quote was updated'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        color: "text.secondary",
+                        children: `${business} updated this quote and sent you a newer link. Open their most recent message to see it.`
+                    })
+                ]
+            })
+        }));
+    }
+    const quote = state.view;
+    const money = (cents)=>formatOrderMoney(cents, quote.currency);
+    // The same signed link as the page's data; the server makes the PDF from the same view.
+    const pdfHref = `/api/commerce/quote-pdf?hostId=${encodeURIComponent(hostId)}` + `&q=${encodeURIComponent(link.current.quoteId)}&t=${encodeURIComponent(link.current.token)}`;
+    const unpaid = quote.status === 'unpaid';
+    const addresses = [
+        quote.customerName || quote.company ? {
+            label: 'Prepared for',
+            lines: [
+                quote.customerName,
+                quote.company
+            ].filter((line)=>Boolean(line))
+        } : null,
+        quote.billTo ? {
+            label: 'Bill to',
+            lines: addressLines(quote.billTo)
+        } : null,
+        quote.shipTo ? {
+            label: 'Ship to',
+            lines: addressLines(quote.shipTo)
+        } : null
+    ].filter((block)=>Boolean(block && block.lines.length));
+    const totalRows = [
+        [
+            'Subtotal',
+            money(quote.totals.itemsCents),
+            true
+        ],
+        [
+            quote.discountLabel ? `Discount (${quote.discountLabel})` : 'Discount',
+            `−${money(quote.totals.discountCents)}`,
+            quote.totals.discountCents > 0
+        ],
+        [
+            'Shipping',
+            money(quote.totals.shippingCents),
+            quote.totals.shippingCents > 0
+        ],
+        [
+            quote.taxLabel,
+            money(quote.totals.taxCents),
+            quote.totals.taxCents > 0
+        ],
+        // `Tax is added at payment`, with no figure: Stripe works it out from the address.
+        [
+            quote.taxLabel,
+            '',
+            quote.taxAtPayment
+        ]
+    ].filter(([, , shown])=>shown);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: nodeSx,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 3,
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1,
+                    children: [
+                        quote.storeName ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: quote.storeName
+                        }) : null,
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1.5,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap',
+                                rowGap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "h4",
+                                    component: "h1",
+                                    children: heading || quote.number
+                                }),
+                                /*#__PURE__*/ _jsx(Chip, {
+                                    label: quote.statusLabel,
+                                    color: quote.status === 'paid' ? 'success' : unpaid ? 'primary' : 'default',
+                                    size: "small"
+                                })
+                            ]
+                        }),
+                        quote.dateMs ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: `Dated ${dateLabel(quote.dateMs)}`
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Box, {
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                size: "small",
+                                href: pdfHref,
+                                download: true,
+                                children: 'Download PDF'
+                            })
+                        })
+                    ]
+                }),
+                addresses.length ? /*#__PURE__*/ _jsx(Stack, {
+                    direction: {
+                        xs: 'column',
+                        sm: 'row'
+                    },
+                    spacing: {
+                        xs: 2,
+                        sm: 3
+                    },
+                    children: addresses.map((block)=>/*#__PURE__*/ _jsx(AddressBlock, {
+                            label: block.label,
+                            lines: block.lines
+                        }, block.label))
+                }) : null,
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h6",
+                            component: "h2",
+                            children: 'Items'
+                        }),
+                        quote.lines.map((line, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 2,
+                                sx: {
+                                    justifyContent: 'space-between'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 0.25,
+                                        sx: {
+                                            minWidth: 0
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Typography, {
+                                                variant: "body2",
+                                                children: [
+                                                    line.name,
+                                                    line.variantLabel ? ` (${line.variantLabel})` : ''
+                                                ]
+                                            }),
+                                            line.description ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                sx: {
+                                                    whiteSpace: 'pre-line'
+                                                },
+                                                children: line.description
+                                            }) : null,
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: [
+                                                    line.included ? `${line.quantity} included` : `${line.quantity} × ${money(line.unitAmountCents)}`,
+                                                    line.sku ? `SKU ${line.sku}` : ''
+                                                ].filter(Boolean).join(' · ')
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        sx: {
+                                            flexShrink: 0
+                                        },
+                                        children: line.included ? 'Included' : money(line.amountCents)
+                                    })
+                                ]
+                            }, index)),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        totalRows.map(([label, value])=>/*#__PURE__*/ _jsx(TotalRow, {
+                                label: label,
+                                value: value
+                            }, `${label}-${value}`)),
+                        /*#__PURE__*/ _jsx(TotalRow, {
+                            label: "Total",
+                            value: money(quote.totals.totalCents),
+                            strong: true
+                        })
+                    ]
+                }),
+                quote.notes ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h6",
+                            component: "h2",
+                            children: 'Notes'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            sx: {
+                                whiteSpace: 'pre-line'
+                            },
+                            children: quote.notes
+                        })
+                    ]
+                }) : null,
+                quote.terms ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h6",
+                            component: "h2",
+                            children: 'Terms'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            sx: {
+                                whiteSpace: 'pre-line'
+                            },
+                            children: quote.terms
+                        })
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsx(QuoteProofPanel, {
+                    view: quote,
+                    hostId: hostId,
+                    quoteId: link.current.quoteId,
+                    token: link.current.token,
+                    siteFetch: siteFetch,
+                    onView: (next)=>setState({
+                            kind: 'ready',
+                            view: next
+                        }),
+                    onReload: ()=>void load().then(setState),
+                    onReplaced: ()=>setState({
+                            kind: 'replaced',
+                            storeName: quote.storeName
+                        })
+                }),
+                unpaid ? /*#__PURE__*/ _jsx(Paper, {
+                    variant: "outlined",
+                    sx: {
+                        p: {
+                            xs: 2,
+                            sm: 3
+                        }
+                    },
+                    children: /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 2,
+                        children: returned === 'confirming' ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            icon: /*#__PURE__*/ _jsx(CircularProgress, {
+                                size: 20
+                            }),
+                            children: 'Thank you. We’re confirming your payment.'
+                        }) : returned === 'unconfirmed' ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: 'Your payment is still being confirmed. Your receipt will arrive by email.'
+                        }) : quote.approvalRequired ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: `${quote.storeName || 'The business'} asks you to approve the proof before you pay.`
+                        }) : quote.payable ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                returned === 'failed' ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    children: 'Your payment did not go through. Nothing was charged.'
+                                }) : null,
+                                nativeCheckout ? /*#__PURE__*/ _jsx(Suspense, {
+                                    fallback: /*#__PURE__*/ _jsx(StorefrontPaymentElementFallback, {}),
+                                    children: /*#__PURE__*/ _jsx(StorefrontPaymentElement, {
+                                        clientSecret: nativeCheckout.clientSecret,
+                                        publishableKey: nativeCheckout.publishableKey,
+                                        wallets: nativeCheckout.wallets,
+                                        payLabel: quote.taxAtPayment ? 'Pay now' : `Pay ${money(quote.totals.totalCents)}`,
+                                        defaultShippingAddress: stripeContact(quote.shipTo),
+                                        // An expired or unloadable session is replaced by a new press.
+                                        onRestart: ()=>{
+                                            setNativeCheckout(null);
+                                            void pay();
+                                        },
+                                        onCancel: ()=>setNativeCheckout(null)
+                                    })
+                                }) : /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    size: "large",
+                                    onClick: ()=>void pay(),
+                                    disabled: paying,
+                                    sx: {
+                                        alignSelf: {
+                                            xs: 'stretch',
+                                            sm: 'flex-start'
+                                        }
+                                    },
+                                    children: paying ? 'Opening…' : quote.taxAtPayment ? `Pay ${money(quote.totals.totalCents)} plus tax` : `Pay ${money(quote.totals.totalCents)}`
+                                }),
+                                payError ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "error",
+                                    children: payError
+                                }) : null
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: `Contact ${quote.storeName || 'the business'} to pay this quote.`
+                        })
+                    })
+                }) : /*#__PURE__*/ _jsx(Paper, {
+                    variant: "outlined",
+                    sx: {
+                        p: {
+                            xs: 2,
+                            sm: 3
+                        }
+                    },
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1.5,
+                        sx: {
+                            alignItems: 'flex-start'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body1",
+                                children: quote.status === 'paid' ? quote.paidAtMs ? `Paid ${dateLabel(quote.paidAtMs)}. Thank you.` : 'Paid. Thank you.' : `This quote is ${quote.statusLabel.toLowerCase()}.`
+                            }),
+                            quote.receiptUrl ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                href: quote.receiptUrl,
+                                children: 'View your order'
+                            }) : null
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: `Questions about this quote? Contact ${quote.storeName || 'the business'}.`
+                })
+            ]
+        })
+    }));
+});
+QuotePageBody.displayName = 'QuotePageBody';
+export default QuotePageBody;
+
+//# sourceMappingURL=quote-page-body.js.map