import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogTransactionalCartUpgradeFour } from "@/registry/modal-dialog-transactional-cart-upgrade-four/modal-dialog-transactional-cart-upgrade-four"; 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 ModalDialogTransactionalCartUpgradeFour >; type ModalDialogTransactionalCartUpgradeFourItem = NonNullable< ComponentProps["items"] >[number]; type ModalDialogTransactionalCartUpgradeFourAddon = NonNullable< ComponentProps["addons"] >[number]; const items: ModalDialogTransactionalCartUpgradeFourItem[] = [ { id: "suite", name: "NextBase Growth Suite", quantity: 1, unitPrice: 249, descriptor: "Annual subscription", image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=280&q=80", }, { id: "seats", name: "Additional seats", quantity: 5, unitPrice: 39, descriptor: "Sales pod", image: "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?auto=format&fit=crop&w=280&q=80", }, ]; const addons: ModalDialogTransactionalCartUpgradeFourAddon[] = [ { id: "priority-support", name: "Priority success desk", description: "24/7 Slack channel, quarterly roadmap reviews, dedicated CSM", price: 189, recommended: true, defaultSelected: true, }, { id: "compliance", name: "Compliance automation pack", description: "SOC2 evidence collection, data-retention policies", price: 129, }, { id: "training", name: "Enablement jumpstart", description: "Two custom workshops and in-app walkthroughs for your team", price: 99, }, ]; export function ModalDialogTransactionalCartUpgradeFourDemo() { const [open, setOpen] = React.useState(false); const [lastTotal, setLastTotal] = React.useState(null); return (

Transactional cart upgrade modal

Preview urgency banner, cart table, and add-on toggles with real-time recalculation.

{lastTotal !== null ? (

Last accepted total: ${lastTotal.toLocaleString()}

) : null}

{ await new Promise((resolve) => setTimeout(resolve, 900)); setLastTotal(total); }} onDecline={() => setLastTotal(null)} />

); } export default ModalDialogTransactionalCartUpgradeFourDemo;

Simple