import React, { useEffect, useState } from 'react'; import { Check, Store, Receipt, Sparkles } from 'lucide-react'; import { OnboardingState, BUSINESS_TYPES } from '../types'; interface SetupCompleteProps { onContinue: () => void; state: OnboardingState; } interface ConfettiPart { id: number; left: string; size: string; delay: string; duration: string; color: string; shape: string; } export default function SetupCompleteScreen({ onContinue, state }: SetupCompleteProps) { const [confetti, setConfetti] = useState([]); useEffect(() => { // Generate simulated paper confetti arrays on mount const colors = ['#af101a', '#54a0fe', '#298030', '#ffb3ac', '#ffdad6', '#a5c8ff', '#82db7e']; const shapes = ['circle', 'square', 'triangle']; const items = Array.from({ length: 45 }).map((_, i) => ({ id: i, left: `${Math.random() * 100}vw`, size: `${Math.random() * 8 + 6}px`, delay: `${Math.random() * 3}s`, duration: `${Math.random() * 2.5 + 2.5}s`, color: colors[Math.floor(Math.random() * colors.length)], shape: shapes[Math.floor(Math.random() * shapes.length)] })); setConfetti(items); }, []); const getBusinessTypeName = (typeId: string) => { const matched = BUSINESS_TYPES.find(b => b.id === typeId); if (matched) return matched.name; return 'Retail / Grocery'; }; const businessTitle = state.businessName || 'Sharma General Store'; const typeDisplay = state.businessType ? getBusinessTypeName(state.businessType) : 'Retail / Grocery'; return (

{/* Dynamic Cascading Confetti Layers */}

{confetti.map((c) => (

))}

{/* Embedded falling animation style injection */} {/* Top micro progress indicator (Completely active 100% completed) */}

Step 5 of 5 Completed Onboarding Done

{/* Main Stream centered scroll wrapper */}

{/* Rounded double rings success check icon bubble */}

{/* Echo ping ring */}

{/* Celebrating message */}

Setup Complete! 🎉

Your billing dashboard is ready for action.

{/* Dynamic Glassmorphic Recap Card */}

{/* Section Row 1: Business name */}

Business Name

{businessTitle}

{/* Dividing border */}

{/* Section Row 2: Category */}