import { Check, FlaskConical, Type } from 'lucide-react'; import React, { useEffect, useState } from 'react'; import apiFetch from '@wordpress/api-fetch'; import { __ } from '@wordpress/i18n'; import { trackEvent } from '../../utils/admin'; import { Button } from '@/components/ui/button'; import { Body, Caption, CardTitle, } from '@/components/ui/typography'; 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; }; } function StepNumber( { number, complete, active }: { number: number; complete: boolean; active: boolean } ) { if ( complete ) { return (
); } if ( active ) { return (
{ number }
); } return (
{ number }
); } export default function OnboardingChecklist( { onboarding, userName, onDismiss }: Props ) { const [ recentPostUrl, setRecentPostUrl ] = useState< string | null >( 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; const progressPercent = Math.round( ( completedCount / 3 ) * 100 ); // Fetch most recent post for "Test a headline" link. useEffect( () => { if ( ! step1Done || step2Done ) { return; } apiFetch< WPContentItem[] >( { 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 ] ); // Track checklist impression. useEffect( () => { trackEvent( 'onboarding_checklist_viewed', { step: currentStep } ); }, [] ); // eslint-disable-line react-hooks/exhaustive-deps const handleDismiss = () => { trackEvent( 'onboarding_checklist_dismissed', { step: currentStep } ); onDismiss(); }; return (
{ /* Header with progress */ }
{ __( 'Getting Started', 'altis' ) } { progressPercent }%
{ /* Steps */ }
{ /* Step 1: Connect */ }
{ __( 'Connect your site', 'altis' ) } { step1Done && ( { __( 'Connected as', 'altis' ) } { userName } ) } { ! step1Done && currentStep === 1 && ( <> { __( 'Link your Accelerate account to start tracking.', 'altis' ) } ) }
{ /* Step 2: Run first experiment */ }
{ /* Step 3: See results */ }
{ __( 'See your results', 'altis' ) } { currentStep === 3 && ( { __( 'Publish your test and check back in 24 hours.', 'altis' ) } ) }
{ /* Footer */ }
{ `${ completedCount } ${ __( 'of', 'altis' ) } 3 ${ __( 'complete', 'altis' ) }` }
); }