asdsadsad
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,20 +1,21 @@
|
||||
/**
|
||||
* Plans & Billing Page - Consolidated
|
||||
* Tabs: Current Plan, Credits Overview, Billing History
|
||||
* Plans & Billing Page - Refactored for Better UX
|
||||
* Organized tabs: Current Plan, Plan Limits, Credits, Purchase Credits, Billing History
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
|
||||
Loader2, AlertCircle, CheckCircle, Download
|
||||
Loader2, AlertCircle, CheckCircle, Download, BarChart3, Zap, Globe, Users
|
||||
} from 'lucide-react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
|
||||
import { PricingTable } from '../../components/ui/pricing-table';
|
||||
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
|
||||
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
|
||||
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
|
||||
import {
|
||||
getCreditBalance,
|
||||
getCreditPackages,
|
||||
@@ -41,7 +42,7 @@ import {
|
||||
} from '../../services/billing.api';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
type TabType = 'plan' | 'credits' | 'purchase' | 'invoices';
|
||||
type TabType = 'plan' | 'limits' | 'credits' | 'upgrade' | 'invoices';
|
||||
|
||||
export default function PlansAndBillingPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
||||
@@ -342,9 +343,10 @@ export default function PlansAndBillingPage() {
|
||||
|
||||
const tabs = [
|
||||
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
|
||||
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
|
||||
{ id: 'purchase' as TabType, label: 'Purchase Credits', icon: <Wallet className="w-4 h-4" /> },
|
||||
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
|
||||
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
|
||||
{ id: 'credits' as TabType, label: 'Credits', icon: <TrendingUp className="w-4 h-4" /> },
|
||||
{ id: 'upgrade' as TabType, label: 'Purchase/Upgrade', icon: <Wallet className="w-4 h-4" /> },
|
||||
{ id: 'invoices' as TabType, label: 'History', icon: <FileText className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -403,14 +405,18 @@ export default function PlansAndBillingPage() {
|
||||
{/* Current Plan Tab */}
|
||||
{activeTab === 'plan' && (
|
||||
<div className="space-y-6">
|
||||
{/* 2/3 Current Plan + 1/3 Plan Features Layout */}
|
||||
{/* Current Plan Overview */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Current Plan Card - 2/3 width */}
|
||||
{/* Main Plan Card */}
|
||||
<Card className="p-6 lg:col-span-2">
|
||||
<h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
|
||||
{!hasActivePlan && (
|
||||
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
|
||||
No active plan found. Please choose a plan to activate your account.
|
||||
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200 flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">No Active Plan</p>
|
||||
<p className="text-sm mt-1">Choose a plan below to activate your account and unlock all features.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
@@ -419,40 +425,65 @@ export default function PlansAndBillingPage() {
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{currentPlan?.name || 'No Plan Selected'}
|
||||
</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">
|
||||
<div className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
{currentPlan?.description || 'Select a plan to unlock full access.'}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
|
||||
{hasActivePlan ? subscriptionStatus : 'plan required'}
|
||||
<Badge variant="soft" tone={hasActivePlan ? 'success' : 'warning'} className="text-sm px-3 py-1">
|
||||
{hasActivePlan ? subscriptionStatus : 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
|
||||
{/* Quick Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 rounded-lg border border-brand-200 dark:border-brand-700">
|
||||
<div className="flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300 mb-1">
|
||||
<Zap className="w-4 h-4" />
|
||||
Monthly Credits
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
|
||||
{creditBalance?.plan_credits_per_month?.toLocaleString?.() || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Current Balance</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
<div className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 rounded-lg border border-success-200 dark:border-success-700">
|
||||
<div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
|
||||
<Wallet className="w-4 h-4" />
|
||||
Current Balance
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-success-600 dark:text-success-400">
|
||||
{creditBalance?.credits?.toLocaleString?.() || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Period Ends</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
<div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg border border-purple-200 dark:border-purple-700">
|
||||
<div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
|
||||
<Package className="w-4 h-4" />
|
||||
Renewal Date
|
||||
</div>
|
||||
<div className="text-lg font-bold text-purple-600 dark:text-purple-400">
|
||||
{currentSubscription?.current_period_end
|
||||
? new Date(currentSubscription.current_period_end).toLocaleDateString()
|
||||
? new Date(currentSubscription.current_period_end).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
||||
: '—'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-3">
|
||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
onClick={() => setActiveTab('upgrade')}
|
||||
startIcon={<ArrowUpCircle className="w-4 h-4" />}
|
||||
>
|
||||
Purchase Credits
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="neutral"
|
||||
onClick={() => setActiveTab('limits')}
|
||||
>
|
||||
View Limits
|
||||
</Button>
|
||||
{hasActivePlan && (
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -460,23 +491,30 @@ export default function PlansAndBillingPage() {
|
||||
disabled={planLoadingId === currentSubscription?.id}
|
||||
onClick={handleCancelSubscription}
|
||||
>
|
||||
{planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
|
||||
{planLoadingId === currentSubscription?.id ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Cancelling...
|
||||
</>
|
||||
) : (
|
||||
'Cancel Plan'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Plan Features Card - 1/3 width with 2-column layout */}
|
||||
{/* Plan Features Card */}
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Included Features</h2>
|
||||
<div className="space-y-2">
|
||||
{(currentPlan?.features && currentPlan.features.length > 0
|
||||
? currentPlan.features
|
||||
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
|
||||
.map((feature: string) => (
|
||||
<div key={feature} className="flex items-start gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
: ['AI Content Writer', 'Image Generation', 'Auto Publishing', 'Custom Prompts', 'Email Support', 'API Access'])
|
||||
.map((feature: string, index: number) => (
|
||||
<div key={index} className="flex items-start gap-2 text-sm">
|
||||
<CheckCircle className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -484,100 +522,167 @@ export default function PlansAndBillingPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Upgrade/Downgrade Section with Pricing Table */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="mx-auto" style={{ maxWidth: '1200px' }}>
|
||||
<PricingTable
|
||||
variant="1"
|
||||
plans={plans.map(plan => {
|
||||
const discount = plan.annual_discount_percent || 15;
|
||||
return {
|
||||
id: plan.id,
|
||||
name: plan.name,
|
||||
monthlyPrice: plan.price || 0,
|
||||
price: plan.price || 0,
|
||||
annualDiscountPercent: discount,
|
||||
period: `/${plan.interval || 'month'}`,
|
||||
description: plan.description || 'Standard plan',
|
||||
features: plan.features && plan.features.length > 0
|
||||
? plan.features
|
||||
: ['Monthly credits included', 'Module access', 'Email support'],
|
||||
buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Select Plan',
|
||||
highlighted: plan.is_featured || false,
|
||||
disabled: plan.id === currentPlanId || planLoadingId === plan.id,
|
||||
// Plan limits
|
||||
max_sites: plan.max_sites,
|
||||
max_users: plan.max_users,
|
||||
max_keywords: plan.max_keywords,
|
||||
max_clusters: plan.max_clusters,
|
||||
max_content_ideas: plan.max_content_ideas,
|
||||
max_content_words: plan.max_content_words,
|
||||
max_images_basic: plan.max_images_basic,
|
||||
max_images_premium: plan.max_images_premium,
|
||||
included_credits: plan.included_credits,
|
||||
};
|
||||
})}
|
||||
showToggle={true}
|
||||
onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 border-[var(--color-brand-200)] dark:border-[var(--color-brand-800)] mt-6">
|
||||
<h3 className="font-semibold text-[var(--color-brand-900)] dark:text-[var(--color-brand-100)] mb-2">Plan Change Policy</h3>
|
||||
<ul className="space-y-2 text-sm text-[var(--color-brand-800)] dark:text-[var(--color-brand-200)]">
|
||||
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
|
||||
<li>• Downgrades take effect at the end of your current billing period</li>
|
||||
<li>• Unused credits from your current plan will carry over</li>
|
||||
<li>• You can cancel your subscription at any time</li>
|
||||
</ul>
|
||||
{/* Plan Limits Overview */}
|
||||
{hasActivePlan && (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Quick Limits Overview</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Key plan limits at a glance
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="brand"
|
||||
size="sm"
|
||||
onClick={() => setActiveTab('limits')}
|
||||
>
|
||||
View All Limits
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
Sites
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{currentPlan?.max_sites === 9999 ? '∞' : currentPlan?.max_sites || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<Users className="w-4 h-4" />
|
||||
Team Members
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{currentPlan?.max_users === 9999 ? '∞' : currentPlan?.max_users || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<FileText className="w-4 h-4" />
|
||||
Content Words/mo
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{currentPlan?.max_content_words === 9999999
|
||||
? '∞'
|
||||
: currentPlan?.max_content_words
|
||||
? `${(currentPlan.max_content_words / 1000).toFixed(0)}K`
|
||||
: 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<Zap className="w-4 h-4" />
|
||||
Monthly Credits
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{currentPlan?.included_credits?.toLocaleString?.() || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Plan Limits Tab */}
|
||||
{activeTab === 'limits' && (
|
||||
<div className="space-y-6">
|
||||
<UsageLimitsPanel />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credits Overview Tab */}
|
||||
{activeTab === 'credits' && (
|
||||
<div className="space-y-6">
|
||||
{/* Credit Balance Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||
<Card className="p-6 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="p-2 bg-brand-500 rounded-lg">
|
||||
<Wallet className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="text-sm font-medium text-brand-700 dark:text-brand-300">Current Balance</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
|
||||
{creditBalance?.credits.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">credits available</div>
|
||||
<div className="text-sm text-brand-600 dark:text-brand-400 mt-2">credits available</div>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Used This Month</div>
|
||||
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
|
||||
|
||||
<Card className="p-6 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/10 border-red-200 dark:border-red-700">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="p-2 bg-red-500 rounded-lg">
|
||||
<TrendingUp className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="text-sm font-medium text-red-700 dark:text-red-300">Used This Month</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-red-600 dark:text-red-400">
|
||||
{creditBalance?.credits_used_this_month.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">credits consumed</div>
|
||||
<div className="text-sm text-red-600 dark:text-red-400 mt-2">credits consumed</div>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Monthly Included</div>
|
||||
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
|
||||
<Card className="p-6 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 border-success-200 dark:border-success-700">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="p-2 bg-success-500 rounded-lg">
|
||||
<Package className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="text-sm font-medium text-success-700 dark:text-success-300">Monthly Included</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-success-600 dark:text-success-400">
|
||||
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-2">from your plan</div>
|
||||
<div className="text-sm text-success-600 dark:text-success-400 mt-2">from your plan</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Usage Summary with Progress Bar */}
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Credit Usage Summary</h2>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700 dark:text-gray-300">Remaining Credits</span>
|
||||
<span className="font-semibold">{creditBalance?.credits_remaining.toLocaleString() || 0}</span>
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Credit Usage Summary</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-700 dark:text-gray-300">Monthly Allocation</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{creditBalance?.plan_credits_per_month.toLocaleString() || 0} credits
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-[var(--color-brand-500)] h-2 rounded-full"
|
||||
style={{
|
||||
width: creditBalance?.credits
|
||||
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
|
||||
: '0%'
|
||||
}}
|
||||
></div>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-700 dark:text-gray-300">Used This Month</span>
|
||||
<span className="font-semibold text-red-600 dark:text-red-400">
|
||||
{creditBalance?.credits_used_this_month.toLocaleString() || 0} credits
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-700 dark:text-gray-300">Remaining Balance</span>
|
||||
<span className="font-semibold text-success-600 dark:text-success-400">
|
||||
{creditBalance?.credits_remaining.toLocaleString() || 0} credits
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="pt-2">
|
||||
<div className="flex justify-between items-center text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
<span>Usage Progress</span>
|
||||
<span>
|
||||
{creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
|
||||
? `${Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)}%`
|
||||
: '0%'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
|
||||
<div
|
||||
className="bg-gradient-to-r from-brand-500 to-brand-600 h-3 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
|
||||
? `${Math.min((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100, 100)}%`
|
||||
: '0%'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -585,8 +690,8 @@ export default function PlansAndBillingPage() {
|
||||
{/* Credit Cost Breakdown */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold">Credit Cost Analytics</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Cost breakdown by operation type</p>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">Credit Cost Analytics</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Detailed breakdown of credit usage by operation type</p>
|
||||
</div>
|
||||
<CreditCostBreakdownPanel />
|
||||
</div>
|
||||
@@ -598,78 +703,190 @@ export default function PlansAndBillingPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Purchase Credits Tab */}
|
||||
{activeTab === 'purchase' && (
|
||||
{/* Purchase/Upgrade Tab */}
|
||||
{activeTab === 'upgrade' && (
|
||||
<div className="space-y-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex gap-4 pb-4">
|
||||
{packages.map((pkg) => (
|
||||
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-brand-500)] dark:hover:border-[var(--color-brand-500)] transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
|
||||
<div className="relative p-5 pb-6">
|
||||
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-500)]/10">
|
||||
<svg className="w-6 h-6 text-[var(--color-brand-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<span className="text-3xl font-bold text-[var(--color-brand-500)]">{pkg.credits.toLocaleString()}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
||||
</div>
|
||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||
${pkg.price}
|
||||
</div>
|
||||
{pkg.description && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-gray-200 p-4 dark:border-gray-800">
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
onClick={() => handlePurchase(pkg.id)}
|
||||
fullWidth
|
||||
size="md"
|
||||
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
|
||||
>
|
||||
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
{packages.length === 0 && (
|
||||
<div className="col-span-3 text-center py-12 text-gray-500">
|
||||
No credit packages available at this time
|
||||
</div>
|
||||
)}
|
||||
{/* Upgrade Plans Section */}
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Select the plan that best fits your needs
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto" style={{ maxWidth: '1200px' }}>
|
||||
<PricingTable
|
||||
variant="1"
|
||||
plans={plans
|
||||
.filter(plan => {
|
||||
// Only show paid plans (exclude Free Plan)
|
||||
const planName = (plan.name || '').toLowerCase();
|
||||
const planPrice = plan.price || 0;
|
||||
return planPrice > 0 && !planName.includes('free');
|
||||
})
|
||||
.map(plan => {
|
||||
const discount = plan.annual_discount_percent || 15;
|
||||
return {
|
||||
id: plan.id,
|
||||
name: plan.name,
|
||||
monthlyPrice: plan.price || 0,
|
||||
price: plan.price || 0,
|
||||
annualDiscountPercent: discount,
|
||||
period: `/${plan.interval || 'month'}`,
|
||||
description: plan.description || 'Standard plan',
|
||||
features: plan.features && plan.features.length > 0
|
||||
? plan.features
|
||||
: ['Monthly credits included', 'Module access', 'Email support'],
|
||||
buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Select Plan',
|
||||
highlighted: plan.is_featured || false,
|
||||
disabled: plan.id === currentPlanId || planLoadingId === plan.id,
|
||||
max_sites: plan.max_sites,
|
||||
max_users: plan.max_users,
|
||||
max_keywords: plan.max_keywords,
|
||||
max_clusters: plan.max_clusters,
|
||||
max_content_ideas: plan.max_content_ideas,
|
||||
max_content_words: plan.max_content_words,
|
||||
max_images_basic: plan.max_images_basic,
|
||||
max_images_premium: plan.max_images_premium,
|
||||
included_credits: plan.included_credits,
|
||||
};
|
||||
})}
|
||||
showToggle={true}
|
||||
onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Plan Change Policy */}
|
||||
<Card className="p-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mt-6">
|
||||
<h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
|
||||
<AlertCircle className="w-5 h-5" />
|
||||
Plan Change Policy
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm text-brand-800 dark:text-brand-200">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
Upgrades take effect immediately with prorated billing
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
Downgrades take effect at the end of your current billing period
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
Unused credits carry over when changing plans
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
Cancel anytime - no long-term commitments
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods Info */}
|
||||
{!hasPaymentMethods && paymentMethods.length === 0 && (
|
||||
<Card className="p-6 bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-900)]/20 border-[var(--color-warning-200)] dark:border-[var(--color-warning-700)]">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-[var(--color-warning-600)] mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--color-warning-900)] dark:text-[var(--color-warning-100)] mb-1">
|
||||
Payment Method Required
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-warning-800)] dark:text-[var(--color-warning-200)]">
|
||||
Please contact support to set up a payment method before purchasing credits.
|
||||
</p>
|
||||
{/* Purchase Additional Credits Section */}
|
||||
<div className="mt-12 pt-8 border-t-2 border-gray-200 dark:border-gray-700">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Purchase Additional Credits</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our credit packages</p>
|
||||
</div>
|
||||
|
||||
{/* Current Balance Quick View */}
|
||||
<Card className="p-6 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border-brand-200 dark:border-brand-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-brand-500 rounded-lg">
|
||||
<Wallet className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Current Credit Balance</div>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{creditBalance?.credits.toLocaleString() || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Allocation</div>
|
||||
<div className="text-xl font-bold text-brand-600 dark:text-brand-400">
|
||||
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Credit Packages Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
|
||||
{packages.map((pkg) => (
|
||||
<Card
|
||||
key={pkg.id}
|
||||
className="p-6 hover:shadow-lg transition-all duration-200 hover:border-brand-300 dark:hover:border-brand-600"
|
||||
>
|
||||
<div className="mb-4">
|
||||
<div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-md">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
{pkg.description && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
{pkg.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-baseline gap-2 mb-1">
|
||||
<span className="text-4xl font-bold text-brand-600 dark:text-brand-400">
|
||||
{pkg.credits.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
||||
</div>
|
||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-6">
|
||||
${pkg.price}
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
onClick={() => handlePurchase(pkg.id)}
|
||||
fullWidth
|
||||
size="md"
|
||||
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
|
||||
startIcon={purchaseLoadingId === pkg.id ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
|
||||
>
|
||||
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase Now'}
|
||||
</Button>
|
||||
</Card>
|
||||
))}
|
||||
{packages.length === 0 && (
|
||||
<div className="col-span-3 text-center py-16">
|
||||
<div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
|
||||
<Package className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Packages Available</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">Credit packages will be available soon</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Payment Methods Info */}
|
||||
{!hasPaymentMethods && paymentMethods.length === 0 && (
|
||||
<Card className="p-6 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-700 mt-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 bg-warning-100 dark:bg-warning-800/50 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-warning-900 dark:text-warning-100 mb-1">
|
||||
Payment Method Required
|
||||
</h3>
|
||||
<p className="text-sm text-warning-800 dark:text-warning-200">
|
||||
Please contact support to set up a payment method before purchasing credits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user