import * as React from "react"; import { TutorialStepperEcommerceProductCustomizerFour } from "@/registry/tutorial-stepper-ecommerce-product-customizer-four/tutorial-stepper-ecommerce-product-customizer-four"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Badge } from "@/components/ui/badge"; 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"; export function TutorialStepperEcommerceProductCustomizerFourDemo() { const [style, setStyle] = React.useState("modern"); const [size, setSize] = React.useState("medium"); const [extras, setExtras] = React.useState({ engraving: false, giftWrap: false, express: false, }); const images = [ { src: "/placeholder.svg?height=400&width=400&text=Product+Front", alt: "Product front view", }, { src: "/placeholder.svg?height=400&width=400&text=Product+Side", alt: "Product side view", }, { src: "/placeholder.svg?height=400&width=400&text=Product+Back", alt: "Product back view", }, ]; const steps = [ { id: "style", title: "Style", isComplete: Boolean(style), content: (

Choose your preferred style

Modern

+$0

Classic

+$10

Premium

+$25

), }, { id: "size", title: "Size", isComplete: Boolean(size), content: (

Select your size

Small

Medium

Large

Extra Large

), }, { id: "extras", title: "Extras", content: (

Add optional extras

Custom Engraving

Add personalized text

+$15 setExtras({ ...extras, engraving: checked }) } />

Gift Wrapping

Premium gift box included

+$8 setExtras({ ...extras, giftWrap: checked }) } />

Express Shipping

2-day delivery

+$20 setExtras({ ...extras, express: checked }) } />

), }, { id: "review", title: "Review", content: (

Review your customization

Style: {style}

Size: {size}

Extras: {Object.entries(extras) .filter(([_, value]) => value) .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)) .join(", ") || "None"}

), }, ]; const calculatePrice = () => { let price = 100; // Base price if (style === "classic") price += 10; if (style === "premium") price += 25; if (extras.engraving) price += 15; if (extras.giftWrap) price += 8; if (extras.express) price += 20; return price; }; const subtotal = `$${calculatePrice().toFixed(2)}`; const total = `$${calculatePrice().toFixed(2)}`; const orderSummary = [ { label: "Base Product", value: "$100.00" }, ...(style !== "modern" ? [ { label: `${style.charAt(0).toUpperCase() + style.slice(1)} Style`, value: style === "classic" ? "+$10.00" : "+$25.00", }, ] : []), ...(extras.engraving ? [{ label: "Custom Engraving", value: "+$15.00" }] : []), ...(extras.giftWrap ? [{ label: "Gift Wrapping", value: "+$8.00" }] : []), ...(extras.express ? [{ label: "Express Shipping", value: "+$20.00" }] : []), ]; // Example conflict: Premium style with express shipping const conflicts = style === "premium" && extras.express ? [ "Premium items require 3-5 days for production. Express shipping not available.", ] : []; return (

); } export default TutorialStepperEcommerceProductCustomizerFourDemo;

Simple