Release Candidate: Production Release with Multi-Tenant & Onboarding Enhancements
This commit is contained in:
ajaysi
@@ -3,24 +3,12 @@ import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Card,
|
||||
CardContent,
|
||||
CardActions,
|
||||
Button,
|
||||
Grid,
|
||||
Chip,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Divider,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
useTheme,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
@@ -30,34 +18,13 @@ import {
|
||||
Backdrop,
|
||||
Snackbar,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Check as CheckIcon,
|
||||
Close as CloseIcon,
|
||||
Star as StarIcon,
|
||||
WorkspacePremium as PremiumIcon,
|
||||
Info as InfoIcon,
|
||||
Warning,
|
||||
Psychology,
|
||||
Search as SearchIcon,
|
||||
FactCheck,
|
||||
Edit,
|
||||
Assistant,
|
||||
Verified,
|
||||
Timeline,
|
||||
Analytics,
|
||||
Support,
|
||||
Business,
|
||||
Group,
|
||||
} from '@mui/icons-material';
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||
import ImageIcon from '@mui/icons-material/Image';
|
||||
import VideoIcon from '@mui/icons-material/VideoLibrary';
|
||||
import AudioIcon from '@mui/icons-material/Audiotrack';
|
||||
import { Warning } from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { apiClient } from '../../api/client';
|
||||
import { restoreNavigationState, saveCurrentPhaseForTool } from '../../utils/navigationState';
|
||||
import PlanCard from './PricingPage/PlanCard';
|
||||
|
||||
interface SubscriptionPlan {
|
||||
export interface SubscriptionPlan {
|
||||
id: number;
|
||||
name: string;
|
||||
tier: string;
|
||||
@@ -85,7 +52,6 @@ interface SubscriptionPlan {
|
||||
}
|
||||
|
||||
const PricingPage: React.FC = () => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -198,11 +164,32 @@ const PricingPage: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get selected plan details
|
||||
const plan = plans.find(p => p.id === selectedPlan);
|
||||
if (!plan) return;
|
||||
|
||||
try {
|
||||
setSubscribing(true);
|
||||
const userId = localStorage.getItem('user_id') || 'anonymous';
|
||||
|
||||
console.log('[PricingPage] Making subscription API call:', {
|
||||
// Check if Stripe is configured
|
||||
if (process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY) {
|
||||
console.log('[PricingPage] Initiating Stripe Checkout');
|
||||
|
||||
const response = await apiClient.post('/api/subscription/create-checkout-session', {
|
||||
tier: plan.tier,
|
||||
billing_cycle: yearlyBilling ? 'yearly' : 'monthly',
|
||||
success_url: `${window.location.origin}/dashboard?subscription=success`,
|
||||
cancel_url: `${window.location.origin}/pricing?subscription=cancel`,
|
||||
});
|
||||
|
||||
if (response.data.url) {
|
||||
window.location.href = response.data.url;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[PricingPage] Making legacy subscription API call:', {
|
||||
url: `/api/subscription/subscribe/${userId}`,
|
||||
plan_id: selectedPlan,
|
||||
billing_cycle: yearlyBilling ? 'yearly' : 'monthly',
|
||||
@@ -299,36 +286,6 @@ const PricingPage: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const getPlanIcon = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'free':
|
||||
return <CheckIcon color="success" />;
|
||||
case 'basic':
|
||||
return <StarIcon color="primary" />;
|
||||
case 'pro':
|
||||
return <PremiumIcon color="secondary" />;
|
||||
case 'enterprise':
|
||||
return <PremiumIcon sx={{ color: theme.palette.warning.main }} />;
|
||||
default:
|
||||
return <CheckIcon />;
|
||||
}
|
||||
};
|
||||
|
||||
const getPlanColor = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'free':
|
||||
return 'success' as const;
|
||||
case 'basic':
|
||||
return 'primary' as const;
|
||||
case 'pro':
|
||||
return 'secondary' as const;
|
||||
case 'enterprise':
|
||||
return 'warning' as const;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 8, textAlign: 'center' }}>
|
||||
@@ -389,769 +346,15 @@ const PricingPage: React.FC = () => {
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{plans.map((plan) => (
|
||||
<Grid item key={plan.id} xs={12} sm={6} md={3}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
border: selectedPlan === plan.id ? `2px solid ${theme.palette.primary.main}` : '1px solid #e0e0e0',
|
||||
transform: selectedPlan === plan.id ? 'scale(1.02)' : 'scale(1)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
}}
|
||||
>
|
||||
{/* Plan Badge */}
|
||||
{plan.tier === 'pro' && (
|
||||
<Chip
|
||||
label="Most Popular"
|
||||
color="primary"
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: -8,
|
||||
right: 16,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
{getPlanIcon(plan.tier)}
|
||||
</Box>
|
||||
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
{plan.name}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
{plan.description}
|
||||
</Typography>
|
||||
|
||||
{/* Pricing */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h3" component="span">
|
||||
${yearlyBilling ? plan.price_yearly : plan.price_monthly}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
/{yearlyBilling ? 'year' : 'month'}
|
||||
</Typography>
|
||||
{yearlyBilling && (
|
||||
<Typography variant="caption" color="success.main" sx={{ display: 'block' }}>
|
||||
Save ${(plan.price_monthly * 12 - plan.price_yearly).toFixed(0)} yearly
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Features */}
|
||||
<List dense>
|
||||
{/* All Tools Access - Free & Basic */}
|
||||
{(plan.tier === 'free' || plan.tier === 'basic') && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2, fontWeight: 600 }}>
|
||||
✨ All ALwrity Tools Included:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Blog Writer"
|
||||
secondary="AI-powered blog post creation with SEO optimization"
|
||||
/>
|
||||
<Tooltip title="Learn more about Blog Writer">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Blog Writer', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>Blog Writer</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create engaging blog posts with AI assistance. Includes SEO optimization,
|
||||
keyword research, and content structure suggestions.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• SEO-optimized content generation</Typography>
|
||||
<Typography variant="body2">• Keyword research integration</Typography>
|
||||
<Typography variant="body2">• Content structure suggestions</Typography>
|
||||
<Typography variant="body2">• Publishing assistance</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="LinkedIn Writer"
|
||||
secondary="Professional LinkedIn content creation and posting"
|
||||
/>
|
||||
<Tooltip title="Learn more about LinkedIn Writer">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('LinkedIn Writer', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>LinkedIn Writer</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create professional LinkedIn posts, articles, and carousels that engage
|
||||
your network and showcase your expertise.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Professional post generation</Typography>
|
||||
<Typography variant="body2">• Article writing assistance</Typography>
|
||||
<Typography variant="body2">• Carousel creation</Typography>
|
||||
<Typography variant="body2">• Network engagement optimization</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Group color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Facebook Writer"
|
||||
secondary="Engaging Facebook posts and content creation"
|
||||
/>
|
||||
<Tooltip title="Learn more about Facebook Writer">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Facebook Writer', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>Facebook Writer</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create engaging Facebook posts, stories, and reels that drive
|
||||
engagement and grow your community.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Post and story creation</Typography>
|
||||
<Typography variant="body2">• Reel script generation</Typography>
|
||||
<Typography variant="body2">• Community management</Typography>
|
||||
<Typography variant="body2">• Engagement optimization</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<MenuBookIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Story Writer"
|
||||
secondary="Create stories with AI: outline, images, narration, and video"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Podcast Maker"
|
||||
secondary="AI-powered research, scriptwriting, and voice narration"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<ImageIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Image Generator & Editor"
|
||||
secondary="AI image creation and editing (background removal, inpainting)"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Video Studio & YouTube Creator"
|
||||
secondary="AI video creation for social media and YouTube"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<SearchIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="All SEO Tools & Dashboards"
|
||||
secondary="Keyword research, content optimization, SEO analytics"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Timeline color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Content Planning & Strategy"
|
||||
secondary="Content calendars, strategy planning, and analytics"
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Platform Integrations - Pro & Free */}
|
||||
{(plan.tier === 'free' || plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Platform Integrations:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Wix Integration"
|
||||
secondary="Direct publishing to Wix websites"
|
||||
/>
|
||||
<Tooltip title="Learn more about Wix integration">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Wix Integration', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>Wix Integration</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Seamlessly publish your content directly to Wix websites.
|
||||
No manual copying required.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Direct blog post publishing</Typography>
|
||||
<Typography variant="body2">• SEO metadata sync</Typography>
|
||||
<Typography variant="body2">• Image optimization</Typography>
|
||||
<Typography variant="body2">• Publishing queue management</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="WordPress Integration"
|
||||
secondary="Publish to WordPress sites with API integration"
|
||||
/>
|
||||
<Tooltip title="Learn more about WordPress integration">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('WordPress Integration', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>WordPress Integration</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Connect directly to WordPress sites for seamless content publishing.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• REST API integration</Typography>
|
||||
<Typography variant="body2">• Draft and publish modes</Typography>
|
||||
<Typography variant="body2">• Category and tag management</Typography>
|
||||
<Typography variant="body2">• Featured image handling</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Analytics color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Google Search Console"
|
||||
secondary="SEO performance tracking and insights"
|
||||
/>
|
||||
<Tooltip title="Learn more about GSC integration">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Google Search Console', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>Google Search Console</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Monitor your website's SEO performance and get actionable insights
|
||||
for content optimization.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Search performance tracking</Typography>
|
||||
<Typography variant="body2">• Keyword ranking insights</Typography>
|
||||
<Typography variant="body2">• Technical SEO monitoring</Typography>
|
||||
<Typography variant="body2">• Content optimization suggestions</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Social Media & Website Management - Pro & Enterprise */}
|
||||
{(plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Social Media & Website Management:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Group color="secondary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="6 Major Social Platforms"
|
||||
secondary="LinkedIn, Facebook, Instagram, Twitter, TikTok, YouTube"
|
||||
/>
|
||||
<Tooltip title="Learn more about social media platforms">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('6 Major Social Platforms', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>6 Major Social Platforms</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Comprehensive social media management across all major platforms
|
||||
with AI-powered content optimization.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Platforms:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• LinkedIn (Professional networking)</Typography>
|
||||
<Typography variant="body2">• Facebook (Community building)</Typography>
|
||||
<Typography variant="body2">• Instagram (Visual storytelling)</Typography>
|
||||
<Typography variant="body2">• Twitter (Real-time engagement)</Typography>
|
||||
<Typography variant="body2">• TikTok (Short-form video)</Typography>
|
||||
<Typography variant="body2">• YouTube (Long-form video content)</Typography>
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="secondary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Website Management"
|
||||
secondary="Blogging platform with content scheduling and SEO tools"
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* AI Content Creation Capabilities */}
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
AI Content Creation:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Text Generation"
|
||||
secondary={plan.tier === 'free' || plan.tier === 'basic'
|
||||
? "AI-powered text content creation"
|
||||
: "Advanced text generation with multimodal capabilities"
|
||||
}
|
||||
/>
|
||||
<Tooltip title="Learn more about text generation">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Text Generation', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>AI Text Generation</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Generate high-quality text content with AI assistance. From blog posts
|
||||
to social media updates, create engaging content effortlessly.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Capabilities:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Blog posts and articles</Typography>
|
||||
<Typography variant="body2">• Social media content</Typography>
|
||||
<Typography variant="body2">• Email newsletters</Typography>
|
||||
<Typography variant="body2">• Marketing copy</Typography>
|
||||
{plan.tier === 'pro' || plan.tier === 'enterprise' && (
|
||||
<>
|
||||
<Typography variant="body2">• Audio transcription</Typography>
|
||||
<Typography variant="body2">• Video script writing</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Assistant color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Image Generation"
|
||||
secondary={plan.tier === 'free' || plan.tier === 'basic'
|
||||
? "AI image creation for visual content"
|
||||
: "Advanced image generation with video capabilities"
|
||||
}
|
||||
/>
|
||||
<Tooltip title="Learn more about image generation">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openKnowMoreModal('Image Generation', (
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>AI Image Generation</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create stunning visuals with AI-powered image generation.
|
||||
Perfect for social media, blog posts, and marketing materials.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Capabilities:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Social media graphics</Typography>
|
||||
<Typography variant="body2">• Blog featured images</Typography>
|
||||
<Typography variant="body2">• Marketing visuals</Typography>
|
||||
<Typography variant="body2">• Custom illustrations</Typography>
|
||||
{plan.tier === 'pro' || plan.tier === 'enterprise' && (
|
||||
<>
|
||||
<Typography variant="body2">• Video thumbnail generation</Typography>
|
||||
<Typography variant="body2">• Animated graphics</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
{/* Audio/Video for Basic, Pro & Enterprise */}
|
||||
{(plan.tier === 'basic' || plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Audio Generation"
|
||||
secondary={plan.tier === 'basic'
|
||||
? "AI voice synthesis for podcasts, stories, and narration"
|
||||
: "AI-powered audio content creation and voice synthesis"
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Video Generation"
|
||||
secondary={plan.tier === 'basic'
|
||||
? "Create AI videos for YouTube, social media, and stories"
|
||||
: "AI video creation with script writing and editing"
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Advanced Features for Higher Tiers */}
|
||||
{plan.tier !== 'free' && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Support & Analytics:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Support color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Priority Support" />
|
||||
</ListItem>
|
||||
|
||||
{plan.tier === 'pro' && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Analytics color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Advanced Analytics & Insights" />
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.tier === 'enterprise' && (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Custom Integrations" />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Support color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Dedicated Account Manager" />
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Usage Limits - User-Friendly Display */}
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2, fontWeight: 600 }}>
|
||||
Monthly Usage Limits:
|
||||
</Typography>
|
||||
|
||||
{/* For Basic tier, show unified AI text generation limit */}
|
||||
{plan.tier === 'basic' && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Psychology color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="50 AI Text Generations"
|
||||
secondary="~16-25 blog posts or ~25-50 social posts per month"
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: 500 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* For other tiers, show provider-specific limits */}
|
||||
{plan.tier !== 'basic' && (
|
||||
<>
|
||||
{plan.limits.gemini_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.gemini_calls === 0 ? '∞' : plan.limits.gemini_calls} Gemini AI calls`}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
{plan.limits.openai_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.openai_calls === 0 ? '∞' : plan.limits.openai_calls} OpenAI calls`}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Image Generation */}
|
||||
{plan.limits.stability_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<ImageIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.stability_calls} AI Images`}
|
||||
secondary={plan.tier === 'basic' ? "Powered by open-source models (25% cost savings)" : undefined}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: plan.tier === 'basic' ? 500 : 400 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* Image Editing */}
|
||||
{(plan.limits.image_edit_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.image_edit_calls ?? 0} Image Edits`}
|
||||
secondary={plan.tier === 'basic' ? "Background removal, inpainting, recolor (50% cost savings with OSS)" : undefined}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: plan.tier === 'basic' ? 500 : 400 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* Video Generation */}
|
||||
{(plan.limits.video_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.video_calls ?? 0} AI Videos`}
|
||||
secondary={plan.tier === 'basic' ? "~5-6 full video projects (5 scenes each) per month" : undefined}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: plan.tier === 'basic' ? 500 : 400 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* Audio Generation */}
|
||||
{(plan.limits.audio_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.audio_calls ?? 0} Audio Generations`}
|
||||
secondary={plan.tier === 'basic' ? "Podcast narration, story audio, voice synthesis" : undefined}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: plan.tier === 'basic' ? 500 : 400 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* Research Queries */}
|
||||
{plan.limits.tavily_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<SearchIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.tavily_calls} Research Searches`}
|
||||
secondary="Web research, fact-checking, content discovery"
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* Cost Cap Protection */}
|
||||
{plan.limits.monthly_cost > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Verified color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`$${plan.limits.monthly_cost} Monthly Cost Cap`}
|
||||
secondary="Automatic protection - you'll never exceed this amount"
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: 500, color: 'success.main' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{/* OSS Model Notice for Basic Tier */}
|
||||
{plan.tier === 'basic' && (
|
||||
<Box sx={{ mt: 1, p: 1.5, bgcolor: 'info.lighter', borderRadius: 1, mx: 2 }}>
|
||||
<Typography variant="caption" sx={{ display: 'flex', alignItems: 'center', gap: 0.5, fontWeight: 500 }}>
|
||||
<StarIcon fontSize="small" sx={{ color: 'info.main' }} />
|
||||
Powered by Open-Source AI Models
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ display: 'block', mt: 0.5, color: 'text.secondary' }}>
|
||||
We use cost-effective open-source models to give you more value. 25-50% savings vs proprietary models.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</CardContent>
|
||||
|
||||
<CardActions sx={{ justifyContent: 'center', pb: 3, flexDirection: 'column', gap: 1 }}>
|
||||
{/* For alpha testing: Only Free and Basic are selectable, Pro/Enterprise disabled */}
|
||||
{plan.tier === 'pro' ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled
|
||||
sx={{ mb: 1 }}
|
||||
>
|
||||
Coming Soon
|
||||
</Button>
|
||||
) : plan.tier === 'enterprise' ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled
|
||||
sx={{ mb: 1 }}
|
||||
>
|
||||
Contact Sales
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant={selectedPlan === plan.id ? "outlined" : "contained"}
|
||||
color={getPlanColor(plan.tier)}
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={subscribing}
|
||||
onClick={() => setSelectedPlan(plan.id)}
|
||||
sx={{ mb: 1 }}
|
||||
>
|
||||
{selectedPlan === plan.id ? 'Selected' : 'Select Plan'}
|
||||
</Button>
|
||||
|
||||
{selectedPlan === plan.id && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={subscribing}
|
||||
onClick={() => handleSubscribe(plan.id)}
|
||||
>
|
||||
{subscribing ? <CircularProgress size={20} /> : `Subscribe to ${plan.name}`}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardActions>
|
||||
</Card>
|
||||
<PlanCard
|
||||
plan={plan}
|
||||
yearlyBilling={yearlyBilling}
|
||||
selectedPlanId={selectedPlan}
|
||||
subscribing={subscribing}
|
||||
onSelectPlan={setSelectedPlan}
|
||||
onSubscribe={handleSubscribe}
|
||||
openKnowMoreModal={openKnowMoreModal}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
954
frontend/src/components/Pricing/PricingPage/PlanCard.tsx
Normal file
954
frontend/src/components/Pricing/PricingPage/PlanCard.tsx
Normal file
@@ -0,0 +1,954 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
Chip,
|
||||
Typography,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Divider,
|
||||
IconButton,
|
||||
Button,
|
||||
CircularProgress,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Check as CheckIcon,
|
||||
Star as StarIcon,
|
||||
WorkspacePremium as PremiumIcon,
|
||||
Info as InfoIcon,
|
||||
Psychology,
|
||||
Search as SearchIcon,
|
||||
Edit,
|
||||
Assistant,
|
||||
Verified,
|
||||
Timeline,
|
||||
Analytics,
|
||||
Support,
|
||||
Business,
|
||||
Group,
|
||||
} from '@mui/icons-material';
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||
import ImageIcon from '@mui/icons-material/Image';
|
||||
import VideoIcon from '@mui/icons-material/VideoLibrary';
|
||||
import AudioIcon from '@mui/icons-material/Audiotrack';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
interface SubscriptionPlan {
|
||||
id: number;
|
||||
name: string;
|
||||
tier: string;
|
||||
price_monthly: number;
|
||||
price_yearly: number;
|
||||
description: string;
|
||||
features: string[];
|
||||
limits: {
|
||||
gemini_calls: number;
|
||||
openai_calls: number;
|
||||
anthropic_calls: number;
|
||||
mistral_calls: number;
|
||||
tavily_calls: number;
|
||||
serper_calls: number;
|
||||
metaphor_calls: number;
|
||||
firecrawl_calls: number;
|
||||
stability_calls: number;
|
||||
monthly_cost: number;
|
||||
image_edit_calls?: number;
|
||||
video_calls?: number;
|
||||
audio_calls?: number;
|
||||
ai_text_generation_calls_limit?: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface PlanCardProps {
|
||||
plan: SubscriptionPlan;
|
||||
yearlyBilling: boolean;
|
||||
selectedPlanId: number | null;
|
||||
subscribing: boolean;
|
||||
onSelectPlan: (planId: number) => void;
|
||||
onSubscribe: (planId: number) => void;
|
||||
openKnowMoreModal: (title: string, content: React.ReactNode) => void;
|
||||
}
|
||||
|
||||
const PlanCard: React.FC<PlanCardProps> = ({
|
||||
plan,
|
||||
yearlyBilling,
|
||||
selectedPlanId,
|
||||
subscribing,
|
||||
onSelectPlan,
|
||||
onSubscribe,
|
||||
openKnowMoreModal,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const getPlanIcon = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'free':
|
||||
return <CheckIcon color="success" />;
|
||||
case 'basic':
|
||||
return <StarIcon color="primary" />;
|
||||
case 'pro':
|
||||
return <PremiumIcon color="secondary" />;
|
||||
case 'enterprise':
|
||||
return <PremiumIcon sx={{ color: theme.palette.warning.main }} />;
|
||||
default:
|
||||
return <CheckIcon />;
|
||||
}
|
||||
};
|
||||
|
||||
const getPlanColor = (tier: string) => {
|
||||
switch (tier) {
|
||||
case 'free':
|
||||
return 'success' as const;
|
||||
case 'basic':
|
||||
return 'primary' as const;
|
||||
case 'pro':
|
||||
return 'secondary' as const;
|
||||
case 'enterprise':
|
||||
return 'warning' as const;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const isSelected = selectedPlanId === plan.id;
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
border: isSelected ? `2px solid ${theme.palette.primary.main}` : '1px solid #e0e0e0',
|
||||
transform: isSelected ? 'scale(1.02)' : 'scale(1)',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
}}
|
||||
>
|
||||
{plan.tier === 'pro' && (
|
||||
<Chip
|
||||
label="Most Popular"
|
||||
color="primary"
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: -8,
|
||||
right: 16,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
|
||||
<Box sx={{ mb: 2 }}>{getPlanIcon(plan.tier)}</Box>
|
||||
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
{plan.name}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
{plan.description}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h3" component="span">
|
||||
${yearlyBilling ? plan.price_yearly : plan.price_monthly}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
/{yearlyBilling ? 'year' : 'month'}
|
||||
</Typography>
|
||||
{yearlyBilling && (
|
||||
<Typography variant="caption" color="success.main" sx={{ display: 'block' }}>
|
||||
Save ${(plan.price_monthly * 12 - plan.price_yearly).toFixed(0)} yearly
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<List dense>
|
||||
{(plan.tier === 'free' || plan.tier === 'basic') && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2, fontWeight: 600 }}>
|
||||
✨ All ALwrity Tools Included:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Blog Writer"
|
||||
secondary="AI-powered blog post creation with SEO optimization"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about Blog Writer"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Blog Writer',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Blog Writer
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create engaging blog posts with AI assistance. Includes SEO optimization,
|
||||
keyword research, and content structure suggestions.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• SEO-optimized content generation</Typography>
|
||||
<Typography variant="body2">• Keyword research integration</Typography>
|
||||
<Typography variant="body2">• Content structure suggestions</Typography>
|
||||
<Typography variant="body2">• Publishing assistance</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="LinkedIn Writer"
|
||||
secondary="Professional LinkedIn content creation and posting"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about LinkedIn Writer"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'LinkedIn Writer',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
LinkedIn Writer
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create professional LinkedIn posts, articles, and carousels that engage your network and
|
||||
showcase your expertise.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Professional post generation</Typography>
|
||||
<Typography variant="body2">• Article writing assistance</Typography>
|
||||
<Typography variant="body2">• Carousel creation</Typography>
|
||||
<Typography variant="body2">• Network engagement optimization</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Group color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Facebook Writer"
|
||||
secondary="Engaging Facebook posts and content creation"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about Facebook Writer"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Facebook Writer',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Facebook Writer
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create engaging Facebook posts, stories, and reels that drive engagement and grow your
|
||||
community.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Post and story creation</Typography>
|
||||
<Typography variant="body2">• Reel script generation</Typography>
|
||||
<Typography variant="body2">• Community management</Typography>
|
||||
<Typography variant="body2">• Engagement optimization</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<MenuBookIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Story Studio"
|
||||
secondary="Create campaign-ready stories with AI: outline, images, narration, and video"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Podcast Maker"
|
||||
secondary="AI-powered research, scriptwriting, and voice narration"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<ImageIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Image Generator & Editor"
|
||||
secondary="AI image creation and editing (background removal, inpainting)"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Video Studio & YouTube Creator"
|
||||
secondary="AI video creation for social media and YouTube"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<SearchIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="All SEO Tools & Dashboards"
|
||||
secondary="Keyword research, content optimization, SEO analytics"
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Timeline color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Content Planning & Strategy"
|
||||
secondary="Content calendars, strategy planning, and analytics"
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(plan.tier === 'free' || plan.tier === 'pro' || plan.tier === 'enterprise') &&
|
||||
(
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Platform Integrations:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Wix Integration"
|
||||
secondary="Direct publishing to Wix websites"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about Wix integration"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Wix Integration',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Wix Integration
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Seamlessly publish your content directly to Wix websites.
|
||||
No manual copying required.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Direct blog post publishing</Typography>
|
||||
<Typography variant="body2">• SEO metadata sync</Typography>
|
||||
<Typography variant="body2">• Image optimization</Typography>
|
||||
<Typography variant="body2">• Publishing queue management</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="WordPress Integration"
|
||||
secondary="Publish to WordPress sites with API integration"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about WordPress integration"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'WordPress Integration',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
WordPress Integration
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Connect directly to WordPress sites for seamless content publishing.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• REST API integration</Typography>
|
||||
<Typography variant="body2">• Draft and publish modes</Typography>
|
||||
<Typography variant="body2">• Category and tag management</Typography>
|
||||
<Typography variant="body2">• Featured image handling</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Analytics color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Google Search Console"
|
||||
secondary="SEO performance tracking and insights"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about GSC integration"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Google Search Console',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Google Search Console
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Monitor your website's SEO performance and get actionable insights
|
||||
for content optimization.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Search performance tracking</Typography>
|
||||
<Typography variant="body2">• Keyword ranking insights</Typography>
|
||||
<Typography variant="body2">• Technical SEO monitoring</Typography>
|
||||
<Typography variant="body2">• Content optimization suggestions</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Social Media & Website Management:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Group color="secondary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="6 Major Social Platforms"
|
||||
secondary="LinkedIn, Facebook, Instagram, Twitter, TikTok, YouTube"
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about social media platforms"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'6 Major Social Platforms',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
6 Major Social Platforms
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Comprehensive social media management across all major platforms with AI-powered content
|
||||
optimization.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Features:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Cross-platform scheduling</Typography>
|
||||
<Typography variant="body2">• Content performance insights</Typography>
|
||||
<Typography variant="body2">• Engagement analytics</Typography>
|
||||
<Typography variant="body2">• Platform-specific optimization</Typography>
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Support color="secondary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Team Collaboration"
|
||||
secondary="Invite team members, assign roles, and manage content workflows"
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Text Generation"
|
||||
secondary={
|
||||
plan.tier === 'free' || plan.tier === 'basic'
|
||||
? 'AI-powered text content creation'
|
||||
: 'Advanced text generation with multimodal capabilities'
|
||||
}
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about text generation"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Text Generation',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
AI Text Generation
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Generate high-quality text content with AI assistance. From blog posts to social media updates,
|
||||
create engaging content effortlessly.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Capabilities:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Blog posts and articles</Typography>
|
||||
<Typography variant="body2">• Social media content</Typography>
|
||||
<Typography variant="body2">• Email newsletters</Typography>
|
||||
<Typography variant="body2">• Marketing copy</Typography>
|
||||
{(plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<Typography variant="body2">• Audio transcription</Typography>
|
||||
<Typography variant="body2">• Video script writing</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Assistant color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<ListItemText
|
||||
primary="Image Generation"
|
||||
secondary={
|
||||
plan.tier === 'free' || plan.tier === 'basic'
|
||||
? 'AI image creation for visual content'
|
||||
: 'Advanced image generation with video capabilities'
|
||||
}
|
||||
/>
|
||||
<Tooltip
|
||||
title="Learn more about image generation"
|
||||
onClick={() =>
|
||||
openKnowMoreModal(
|
||||
'Image Generation',
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
AI Image Generation
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph>
|
||||
Create stunning visuals with AI-powered image generation. Perfect for social media, blog posts,
|
||||
and marketing materials.
|
||||
</Typography>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<strong>Capabilities:</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2">• Social media graphics</Typography>
|
||||
<Typography variant="body2">• Blog featured images</Typography>
|
||||
<Typography variant="body2">• Marketing visuals</Typography>
|
||||
<Typography variant="body2">• Custom illustrations</Typography>
|
||||
{(plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<Typography variant="body2">• Video thumbnail generation</Typography>
|
||||
<Typography variant="body2">• Animated graphics</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconButton size="small">
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</ListItem>
|
||||
|
||||
{(plan.tier === 'basic' || plan.tier === 'pro' || plan.tier === 'enterprise') && (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Audio Generation"
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? 'AI voice synthesis for podcasts, stories, and narration'
|
||||
: 'AI-powered audio content creation and voice synthesis'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Video Generation"
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? 'Create AI videos for YouTube, social media, and stories'
|
||||
: 'AI video creation with script writing and editing'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{plan.tier !== 'free' && (
|
||||
<>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2 }}>
|
||||
Support & Analytics:
|
||||
</Typography>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Support color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Priority Support" />
|
||||
</ListItem>
|
||||
|
||||
{plan.tier === 'pro' && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Analytics color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Advanced Analytics & Insights" />
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.tier === 'enterprise' && (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Business color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Custom Integrations" />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Support color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Dedicated Account Manager" />
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<Typography variant="caption" color="text.secondary" sx={{ px: 2, fontWeight: 600 }}>
|
||||
Monthly Usage Limits:
|
||||
</Typography>
|
||||
|
||||
{plan.tier === 'basic' && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Psychology color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="50 AI Text Generations"
|
||||
secondary="~16-25 blog posts or ~25-50 social posts per month"
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem', fontWeight: 500 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.tier !== 'basic' && (
|
||||
<>
|
||||
{plan.limits.gemini_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.gemini_calls === 0 ? '∞' : plan.limits.gemini_calls} Gemini AI calls`}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
{plan.limits.openai_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.openai_calls === 0 ? '∞' : plan.limits.openai_calls} OpenAI calls`}
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{plan.limits.stability_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<ImageIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.stability_calls} AI Images`}
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? 'Powered by open-source models (25% cost savings)'
|
||||
: undefined
|
||||
}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: plan.tier === 'basic' ? 500 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{(plan.limits.image_edit_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Edit color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.image_edit_calls ?? 0} Image Edits`}
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? 'Background removal, inpainting, recolor (50% cost savings with OSS)'
|
||||
: undefined
|
||||
}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: plan.tier === 'basic' ? 500 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{(plan.limits.video_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<VideoIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.video_calls ?? 0} AI Videos`}
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? '~5-6 full video projects (5 scenes each) per month'
|
||||
: undefined
|
||||
}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: plan.tier === 'basic' ? 500 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{(plan.limits.audio_calls ?? 0) > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<AudioIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.audio_calls ?? 0} Audio Generations`}
|
||||
secondary={
|
||||
plan.tier === 'basic'
|
||||
? 'Podcast narration, story audio, voice synthesis'
|
||||
: undefined
|
||||
}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: plan.tier === 'basic' ? 500 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.limits.tavily_calls > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<SearchIcon color="primary" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`${plan.limits.tavily_calls} Research Searches`}
|
||||
secondary="Web research, fact-checking, content discovery"
|
||||
sx={{ '& .MuiListItemText-primary': { fontSize: '0.875rem' } }}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.limits.monthly_cost > 0 && (
|
||||
<ListItem>
|
||||
<ListItemIcon sx={{ minWidth: 24 }}>
|
||||
<Verified color="success" fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={`$${plan.limits.monthly_cost} Monthly Cost Cap`}
|
||||
secondary="Automatic protection - you'll never exceed this amount"
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
color: 'success.main',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
{plan.tier === 'basic' && (
|
||||
<Box
|
||||
sx={{
|
||||
mt: 1,
|
||||
p: 1.5,
|
||||
bgcolor: 'info.lighter',
|
||||
borderRadius: 1,
|
||||
mx: 2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: 0.5, fontWeight: 500 }}
|
||||
>
|
||||
<StarIcon fontSize="small" sx={{ color: 'info.main' }} />
|
||||
Powered by Open-Source AI Models
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ display: 'block', mt: 0.5, color: 'text.secondary' }}
|
||||
>
|
||||
We use cost-effective open-source models to give you more value. 25-50% savings vs
|
||||
proprietary models.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</CardContent>
|
||||
|
||||
<CardActions sx={{ justifyContent: 'center', pb: 3, flexDirection: 'column', gap: 1 }}>
|
||||
{plan.tier === 'pro' ? (
|
||||
<Button variant="outlined" size="large" fullWidth disabled sx={{ mb: 1 }}>
|
||||
Coming Soon
|
||||
</Button>
|
||||
) : plan.tier === 'enterprise' ? (
|
||||
<Button variant="outlined" size="large" fullWidth disabled sx={{ mb: 1 }}>
|
||||
Contact Sales
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant={isSelected ? 'outlined' : 'contained'}
|
||||
color={getPlanColor(plan.tier)}
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={subscribing}
|
||||
onClick={() => onSelectPlan(plan.id)}
|
||||
sx={{ mb: 1 }}
|
||||
>
|
||||
{isSelected ? 'Selected' : 'Select Plan'}
|
||||
</Button>
|
||||
|
||||
{isSelected && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={subscribing}
|
||||
onClick={() => onSubscribe(plan.id)}
|
||||
>
|
||||
{subscribing ? <CircularProgress size={20} /> : `Subscribe to ${plan.name}`}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlanCard;
|
||||
|
||||
Reference in New Issue
Block a user