import * as React from "react"; import { Headset, MessageCircleQuestion, PhoneCall, ShieldAlert, } from "lucide-react"; import { ErrorPageCheckoutRecoverySix } from "@/registry/error-page-checkout-recovery-six/error-page-checkout-recovery-six"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof ErrorPageCheckoutRecoverySix >; const orderSummary: ComponentProps["orderSummary"] = { items: [ { id: "plan-pro", title: "Pro subscription", description: "Annual plan · 10 seats", quantity: 1, price: "$1,188.00", }, { id: "addon-analytics", title: "Analytics add-on", description: "Advanced revenue insights", quantity: 1, price: "$299.00", }, ], subtotal: "$1,487.00", shipping: "$0.00", tax: "$132.75", total: "$1,619.75", currencyLabel: "NEXTBASE*BILLING", referenceCode: "PO-58Q4-T9Z1", }; const timeline: ComponentProps["timeline"] = [ { id: "cart", title: "Cart verified", description: "Items locked for 15 minutes while payment completes.", status: "completed", timestamp: "4:08 PM", }, { id: "payment", title: "Payment authorization", description: "Card issuer timed out. Retry to confirm funds without double-charging.", status: "current", timestamp: "4:09 PM", }, { id: "confirmation", title: "Receipt and provisioning", description: "Seats unlock once payment clears. We’ll email a receipt instantly.", status: "upcoming", }, ]; const supportSheet: ComponentProps["supportSheet"] = { triggerLabel: "Chat with billing", title: "Talk to our billing advocates", description: "We’ll keep your cart reserved while an advocate helps you retry securely.", options: [ { id: "live-chat", label: "Live chat", description: "Average response under 2 minutes", href: "#", icon: , meta: "08:00–22:00 PT", }, { id: "callback", label: "Request a callback", description: "We’ll phone you with next steps", href: "#", icon: , meta: "within 10 min", }, { id: "email", label: "Billing inbox", description: "Attach PO or screenshots for review", href: "mailto:billing@nextbasehq.com", icon: , }, ], }; export function ErrorPageCheckoutRecoverySixDemo() { const [retryCount, setRetryCount] = React.useState(0); return (

Checkout reassurance keeps carts alive

Pair empathetic messaging with order transparency, retry feedback, and instant advocacy support.

{ setRetryCount((count) => count + 1); await new Promise((resolve) => setTimeout(resolve, 900)); }, }} supportSheet={supportSheet} orderSummary={orderSummary} timeline={timeline} statusBadge={{ label: "Checkout 500" }} alert={{ title: "We prevented a duplicate charge", description: "Your bank timed out before confirming funds. No charges were captured.", variant: "default", }} reassuranceCopy="Nothing has been billed yet. Once payment succeeds we’ll email a receipt and activate seats automatically." reassurancePoints={[ "Reserved seats held for 30 minutes", "Existing subscription remains active", "No funds captured until confirmation", ]} onContactSupport={() => console.info("Support sheet opened")} />

Retry attempts:{" "} {retryCount}

); } ErrorPageCheckoutRecoverySixDemo.displayName = "ErrorPageCheckoutRecoverySixDemo"; export default ErrorPageCheckoutRecoverySixDemo;

Simple