import * as React from "react"; import { CtaCommerceStickyProgressBarThree } from "@/registry/cta-commerce-sticky-progress-bar-three/cta-commerce-sticky-progress-bar-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"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof CtaCommerceStickyProgressBarThree >; type CommerceProgressMilestone = ComponentProps["milestones"][number]; type CommerceRecommendedItem = NonNullable< ComponentProps["recommendedItems"] >[number]; const milestones: CommerceProgressMilestone[] = [ { id: "free-ship", threshold: 50, label: "Free shipping", description: "Unlock standard shipping when you hit $50", }, { id: "vip", threshold: 95, label: "VIP mask", description: "Receive an exclusive self-care mask in your order", }, { id: "deluxe", threshold: 125, label: "Deluxe samples", description: "We'll include deluxe trial sizes from best sellers", }, ]; const recommended: CommerceRecommendedItem[] = [ { id: "brightening-serum", title: "Vitamin C Brightening Serum", description: "Clinically-proven to boost luminosity within 7 days of use.", price: "$28", benefits: ["Smooth gel texture", "Pairs with any night routine"], ctaLabel: "Add +$28", }, { id: "reusable-pads", title: "Reusable Cleansing Pads", description: "Ultra-soft bamboo pads that reduce single-use waste.", price: "$14", benefits: ["Machine washable", "Set of 6"], }, { id: "lip-balm", title: "Ceramide Repair Lip Balm", description: "Barrier-restoring balm with nourishing ceramides and peptides.", price: "$18", }, ]; export function CtaCommerceStickyProgressBarThreeDemo() { const [cartValue, setCartValue] = React.useState(72); const handleAddItem = React.useCallback( async (item: CommerceRecommendedItem) => { await new Promise((resolve) => setTimeout(resolve, 800)); const parsed = Number.parseFloat(item.price.replace(/[^0-9.]/g, "")); setCartValue((value) => value + (Number.isFinite(parsed) ? parsed : 0)); }, [], ); return (

Sticky commerce CTA demo

Simulate cart value updates to watch the banner announce milestones. Recommended items open inside a Sheet so shoppers don't lose their place.

); } export default CtaCommerceStickyProgressBarThreeDemo;

Simple