import * as React from "react"; import { MultiStepFormEcommerceCheckoutWizardWithStickySummaryTwo } from "@/registry/multi-step-form-ecommerce-checkout-wizard-with-sticky-summary-two/multi-step-form-ecommerce-checkout-wizard-with-sticky-summary-two"; 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 MultiStepFormEcommerceCheckoutWizardWithStickySummaryTwo >; type CheckoutCountryOption = NonNullable[number]; type CheckoutDeliveryOption = NonNullable< ComponentProps["deliveryOptions"] >[number]; type CheckoutLineItem = NonNullable[number]; type CheckoutSummary = NonNullable; type CheckoutFormValues = Parameters< NonNullable >[0]["values"]; type CheckoutPromoResult = Awaited< ReturnType> >; const COUNTRIES: CheckoutCountryOption[] = [ { code: "US", label: "United States" }, { code: "CA", label: "Canada" }, { code: "GB", label: "United Kingdom" }, ]; const DELIVERY_OPTIONS: CheckoutDeliveryOption[] = [ { id: "priority", label: "Priority delivery", description: "Arrives in 1–2 business days with signature required.", eta: "Guaranteed before 2pm", priceCents: 2499, badge: "Fastest", }, { id: "standard", label: "Standard shipping", description: "Tracked delivery with SMS updates.", eta: "Arrives in 3–4 business days", priceCents: 1299, }, { id: "economy", label: "Economy (carbon-neutral)", description: "Budget option with carbon offsets included.", eta: "Arrives in 5–7 business days", priceCents: 0, badge: "Free", }, ]; const LINE_ITEMS: CheckoutLineItem[] = [ { id: "crm-suite", title: "Nextbase Commerce CRM Suite", description: "Annual license for 25 seats with advanced analytics.", quantity: 1, priceCents: 189900, }, { id: "onboarding", title: "Accelerated onboarding workshop", description: "Hands-on enablement with solution architects.", quantity: 1, priceCents: 24900, }, ]; const SUMMARY: CheckoutSummary = { currency: "USD", subtotalCents: 214800, shippingCents: DELIVERY_OPTIONS[1].priceCents, taxCents: 18400, discountCents: 0, }; const INITIAL_VALUES: Partial & { selectedDeliveryId: string; } = { contactEmail: "ops@example.com", contactPhone: "+1 (415) 555-0199", shippingName: "Jordan Lee", shippingAddressLine1: "485 Market Street", shippingCity: "San Francisco", shippingState: "CA", shippingPostalCode: "94103", shippingCountry: "US", billingSameAsShipping: true, paymentMethod: "card", selectedDeliveryId: DELIVERY_OPTIONS[1].id, }; export function MultiStepFormEcommerceCheckoutWizardWithStickySummaryTwoDemo() { const [lastSubmission, setLastSubmission] = React.useState(null); const [deliveryId, setDeliveryId] = React.useState( INITIAL_VALUES.selectedDeliveryId, ); const handleSubmit = async ({ values, delivery, }: { values: CheckoutFormValues; delivery: CheckoutDeliveryOption; }) => { await new Promise((resolve) => setTimeout(resolve, 800)); setLastSubmission(values); setDeliveryId(delivery.id); }; const handleApplyPromo = async ( code: string, ): Promise => { await new Promise((resolve) => setTimeout(resolve, 500)); if (code.toUpperCase() === "WELCOME15") { return { applied: true, message: "15% launch discount applied", discountCents: Math.round(SUMMARY.subtotalCents * 0.15), }; } return { applied: false, message: "Promo code not recognized", }; }; return (

d.id === deliveryId)?.priceCents ?? SUMMARY.shippingCents, }} initialValues={{ ...INITIAL_VALUES, selectedDeliveryId: deliveryId }} onSubmit={handleSubmit} onApplyPromo={handleApplyPromo} /> {lastSubmission ? (

          {JSON.stringify(lastSubmission, null, 2)}

) : null}

); } export default MultiStepFormEcommerceCheckoutWizardWithStickySummaryTwoDemo;

Simple