import { ArrowRight, Box, FlaskConical, Sparkles, 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 StandaloneBlockPreview from '../components/StandaloneBlockPreview'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Body, Caption, CardTitle } from '@/components/ui/typography'; interface WPContentItem { id: number; date: string; title: { rendered: string; raw?: string; }; content?: { raw?: string; rendered?: string; }; } interface WPBlockItem { id: number; title: { rendered: string; raw?: string; }; rawContent?: string; blockType?: string; } /** * Strip HTML tags from a string to get plain text. */ function stripHtml( html: string ): string { const tmp = document.createElement( 'div' ); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || ''; } /** * Get the best available title: raw > stripped rendered > fallback. */ function getTitle( item: { title: { rendered: string; raw?: string } } ): string { if ( item.title.raw ) { return item.title.raw; } const stripped = stripHtml( item.title.rendered ); return stripped || ''; } const THUMB_WIDTH = 64; const THUMB_HEIGHT = 40; const ROW_CLASSES = '!h-14 w-full !items-center !justify-start !gap-3 !rounded-lg !border !border-border !bg-background !px-3 !text-left shadow-sm hover:!border-brand/40 hover:!bg-muted'; function ContentPreview( { content }: { content?: string } ) { if ( content ) { return (

); } return (

); } function PostRow( { item, onClick }: { item: WPContentItem; onClick?: () => void } ) { const title = getTitle( item ); const rawContent = item.content?.raw || item.content?.rendered || ''; return ( ); } function BlockRow( { item, onClick }: { item: WPBlockItem; onClick?: () => void } ) { const title = getTitle( item ); return ( ); } export default function ConnectionSuccessDialog() { const [ open, setOpen ] = useState( true ); const [ content, setContent ] = useState< WPContentItem[] >( [] ); const [ blocks, setBlocks ] = useState< WPBlockItem[] >( [] ); useEffect( () => { trackEvent( 'onboarding_connection_success_viewed' ); }, [] ); useEffect( () => { // Fetch posts and pages with edit context (gives title.raw + content.raw). Promise.all( [ apiFetch< WPContentItem[] >( { path: '/wp/v2/posts?per_page=10&status=publish&orderby=date&context=edit', } ).catch( () => [] as WPContentItem[] ), apiFetch< WPContentItem[] >( { path: '/wp/v2/pages?per_page=10&status=publish&orderby=date&context=edit', } ).catch( () => [] as WPContentItem[] ), ] ).then( ( [ posts, pages ] ) => { const merged = [ ...posts, ...pages ] .sort( ( a, b ) => new Date( b.date ).getTime() - new Date( a.date ).getTime() ) .slice( 0, 3 ); setContent( merged ); } ); // Fetch blocks with edit context to get title.raw, filter to standard only. apiFetch< WPBlockItem[] >( { path: '/wp/v2/blocks?per_page=10&status=publish&context=edit', } ).then( items => { const standard = items .filter( item => ! item.blockType || item.blockType === 'standard' ) .slice( 0, 3 ); setBlocks( standard ); } ).catch( () => {} ); }, [] ); const handleClose = () => { trackEvent( 'onboarding_connection_success_dismissed' ); setOpen( false ); window.history.replaceState( null, '', window.location.pathname + '?page=accelerate' ); }; return (

); }