import LicenseCard from "@/common/LicenseCard"; import TransitionWrapper from "@/common/TransitionWrapper"; import Button from "@/components/Button"; import Card, { CardContent, CardHeader } from "@/components/Card"; import Notice from "@/components/Notice"; import Container from "@/layout/Container"; import Header from "@/layout/Header"; import PageWrap from "@/layout/PageWrap"; import { spcApi } from "@/lib/api"; import { ROOT_PAGES } from "@/lib/constants"; import { useSettingsStore } from "@/store/optionsStore"; import { useAppStore } from "@/store/store"; import { useState } from "@wordpress/element"; import { __ } from "@wordpress/i18n"; import { ArrowDown, BarChart3, CheckCircle, Info, Play, Rocket, Shield } from "lucide-react"; import { toast } from "sonner"; const OnboardingCard = () => { const { i18n, isPro } = window.SPCDash; const { lockAsync, asyncLocked, setRootPage, setShowWizard, validLicense } = useAppStore(); const { updateSettings } = useSettingsStore(); const performanceImprovements = [ { title: __('Load Time', 'wp-cloudflare-page-cache'), from: '3.2s', to: '0.8s', percentage: '+75%' }, { title: __('Server Response', 'wp-cloudflare-page-cache'), from: '850ms', to: '124ms', percentage: '+85%' }, { title: __('Bandwidth', 'wp-cloudflare-page-cache'), from: '2.1GB', to: '0.9GB', percentage: '+57%' }, { title: __('Page Speed Score', 'wp-cloudflare-page-cache'), from: '42', to: '94', percentage: '+124%' } ]; const whatGetsActivated = [ { title: __('Page Caching', 'wp-cloudflare-page-cache'), description: __('Static HTML generation', 'wp-cloudflare-page-cache') }, { title: __('Browser Caching', 'wp-cloudflare-page-cache'), description: __('Client-side resource caching', 'wp-cloudflare-page-cache') }, { title: __('GZIP Compression', 'wp-cloudflare-page-cache'), description: __('Automatic file compression', 'wp-cloudflare-page-cache') }, { title: __('Cache Preloading', 'wp-cloudflare-page-cache'), description: __('Automatic cache warming', 'wp-cloudflare-page-cache') }, { title: __('Mobile Optimization', 'wp-cloudflare-page-cache'), description: __('Device-specific caching', 'wp-cloudflare-page-cache') }, { title: __('CDN Integration', 'wp-cloudflare-page-cache'), description: __('Global content delivery', 'wp-cloudflare-page-cache') } ]; const [loading, setLoading] = useState(false); const handleClick = async () => { lockAsync(true); setLoading(true); const response = await spcApi.enablePageCache(); if (!response.success) { lockAsync(false); setLoading(false); toast.error(i18n.error, { description: response.message || i18n.genericError, }); return; } toast.success(response.message); updateSettings(response.data.settings, response.data.meta); setLoading(false); lockAsync(false); setShowWizard(false); setRootPage(ROOT_PAGES.SETTINGS); } return (

{__('Ready to Speed Up Your Website?', 'wp-cloudflare-page-cache')}

{__('Activate intelligent caching to improve your site\'s performance automatically', 'wp-cloudflare-page-cache')}

{(!isPro || validLicense) && (

{__('Free forever', 'wp-cloudflare-page-cache')} {__('No setup required', 'wp-cloudflare-page-cache')}

)}
{(isPro && !validLicense) && }

{__('Expected Performance Improvements', 'wp-cloudflare-page-cache')}

{__('Based on average results from our users. Individual results may vary depending on your site\'s content and configuration.', 'wp-cloudflare-page-cache')}

{performanceImprovements.map((improvement, index) => (
{improvement.title}
{improvement.from}
{improvement.to}
{improvement.percentage}
))}

{__('What Gets Activated (Zero Configuration Required)', 'wp-cloudflare-page-cache')}

{whatGetsActivated.map((item, index) => (
{item.title}
{item.description}
))}
) } const StartWizard = () => { return (
) } export default StartWizard;