import { Check, FlaskConical, Type, X } from 'lucide-react'; import React, { useEffect, useState } from 'react'; import apiFetch from '@wordpress/api-fetch'; import { __, sprintf } from '@wordpress/i18n'; import { trackEvent } from '../../utils/admin'; import { Button } from '@/components/ui/button'; import { Body, Caption } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; interface OnboardingData { connected_at: number | false; first_test_created: number | false; authorize_url: string; } interface Props { onboarding: OnboardingData; userName: string; onDismiss: () => void; } interface WPContentItem { id: number; title: { rendered: string; raw?: string }; } // Dark-bar palette — explicit so dark-mode overrides on the // surrounding admin theme don't drift it. const COLORS = { bg: '#111', }; function StepDot( { complete, active, label, }: { complete: boolean; active: boolean; label: string; } ) { return (
{ complete ? ( ) : null }
{ label }
); } export default function OnboardingBar( { onboarding, userName, onDismiss }: Props ) { const [ recentPostUrl, setRecentPostUrl ] = useState( null ); const step1Done = !! onboarding.connected_at; const step2Done = !! onboarding.first_test_created; const step3Done = false; let currentStep = 1; if ( step1Done ) { currentStep = 2; } if ( step2Done ) { currentStep = 3; } const completedCount = [ step1Done, step2Done, step3Done ].filter( Boolean ).length; useEffect( () => { if ( ! step1Done || step2Done ) { return; } apiFetch( { path: '/wp/v2/posts?per_page=1&status=publish&orderby=date', } ) .then( posts => { if ( posts.length > 0 ) { setRecentPostUrl( `post.php?post=${ posts[ 0 ].id }&action=edit` ); } } ) .catch( () => {} ); }, [ step1Done, step2Done ] ); useEffect( () => { trackEvent( 'onboarding_checklist_viewed', { step: currentStep } ); }, [] ); // eslint-disable-line react-hooks/exhaustive-deps const handleDismiss = () => { trackEvent( 'onboarding_checklist_dismissed', { step: currentStep } ); onDismiss(); }; const renderAction = () => { if ( ! step1Done ) { return ( ); } if ( ! step2Done ) { return (
); } return ( { __( 'Publish a test and check back in 24 hours.', 'altis' ) } ); }; const headline = step1Done ? __( 'Getting started', 'altis' ) : sprintf( /* translators: %s: user display name */ __( 'Welcome, %s', 'altis' ), userName ); return (

{ headline }

{ sprintf( /* translators: 1: completed step count, 2: total steps */ __( '%1$d of %2$d', 'altis' ), completedCount, 3 ) }
{ renderAction() }
); }