import * as React from "react"; import { FormBlockCheckoutAddressDeliveryThree } from "@/registry/form-block-checkout-address-delivery-three/form-block-checkout-address-delivery-three"; 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 FormBlockCheckoutAddressDeliveryThree >; type DeliveryOption = NonNullable[number]; type CheckoutPricing = NonNullable; type CheckoutAddressFormValues = Parameters< NonNullable >[0]; const COUNTRIES = [ { code: "US", label: "United States" }, { code: "CA", label: "Canada" }, { code: "GB", label: "United Kingdom" }, ]; const DELIVERY_OPTIONS: DeliveryOption[] = [ { id: "express", title: "Express", description: "UPS Air insured with signature on delivery", eta: "Arrives in 1–2 business days", priceCents: 2900, isFastest: true, badge: "Popular", }, { id: "standard", title: "Standard", description: "Reliable ground shipping with tracking", eta: "Arrives in 3–5 business days", priceCents: 1200, }, { id: "economy", title: "Economy", description: "Budget-friendly delivery with carbon offset", eta: "Arrives in 6–8 business days", priceCents: 0, badge: "Free", }, ]; const PRICING: CheckoutPricing = { currency: "USD", subtotalCents: 16400, taxCents: 1320, feesCents: 200, }; export function FormBlockCheckoutAddressDeliveryThreeDemo() { const [lastSubmission, setLastSubmission] = React.useState<{ values: CheckoutAddressFormValues; deliveryId: string; } | null>(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 500)); if (code.toLowerCase() === "WELCOME10".toLowerCase()) { return { success: true, message: "10% discount applied", discountAmount: PRICING.subtotalCents * 0.1, }; } return { success: false, message: "Promo code not recognized", }; }} onSubmit={async (values, option) => { await new Promise((resolve) => setTimeout(resolve, 800)); setLastSubmission({ values, deliveryId: option.id }); }} /> {lastSubmission ? (

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

) : null}

); } export default FormBlockCheckoutAddressDeliveryThreeDemo;

Simple