657 lines
28 KiB
TypeScript
657 lines
28 KiB
TypeScript
/**
|
|
* Unified Signup Form with Integrated Pricing Selection
|
|
* Combines free and paid signup flows in one modern interface
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from '../../icons';
|
|
import { CreditCard, Building2, Wallet, Check, Loader2, CheckCircle } from 'lucide-react';
|
|
import Label from '../form/Label';
|
|
import Input from '../form/input/InputField';
|
|
import Checkbox from '../form/input/Checkbox';
|
|
import Button from '../ui/button/Button';
|
|
import SelectDropdown from '../form/SelectDropdown';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
|
|
interface Plan {
|
|
id: number;
|
|
name: string;
|
|
slug: string;
|
|
price: string | number;
|
|
billing_cycle: string;
|
|
is_active: boolean;
|
|
max_users: number;
|
|
max_sites: number;
|
|
max_keywords: number;
|
|
monthly_word_count_limit: number;
|
|
included_credits: number;
|
|
features: string[];
|
|
}
|
|
|
|
interface PaymentMethodConfig {
|
|
id: number;
|
|
payment_method: string;
|
|
display_name: string;
|
|
instructions: string | null;
|
|
country_code: string;
|
|
is_enabled: boolean;
|
|
}
|
|
|
|
interface SignUpFormUnifiedProps {
|
|
plans: Plan[];
|
|
selectedPlan: Plan | null;
|
|
onPlanSelect: (plan: Plan) => void;
|
|
plansLoading: boolean;
|
|
}
|
|
|
|
export default function SignUpFormUnified({
|
|
plans,
|
|
selectedPlan,
|
|
onPlanSelect,
|
|
plansLoading,
|
|
}: SignUpFormUnifiedProps) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly');
|
|
|
|
const [formData, setFormData] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
password: '',
|
|
accountName: '',
|
|
billingCountry: 'US',
|
|
});
|
|
|
|
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('');
|
|
const [paymentMethods, setPaymentMethods] = useState<PaymentMethodConfig[]>([]);
|
|
const [paymentMethodsLoading, setPaymentMethodsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const navigate = useNavigate();
|
|
const { register, loading } = useAuthStore();
|
|
|
|
const isPaidPlan = selectedPlan && parseFloat(String(selectedPlan.price || 0)) > 0;
|
|
|
|
// Update URL when plan changes
|
|
useEffect(() => {
|
|
if (selectedPlan) {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('plan', selectedPlan.slug);
|
|
window.history.replaceState({}, '', url.toString());
|
|
}
|
|
}, [selectedPlan]);
|
|
|
|
// Load payment methods for paid plans
|
|
useEffect(() => {
|
|
if (!isPaidPlan) {
|
|
setPaymentMethods([]);
|
|
return;
|
|
}
|
|
|
|
const loadPaymentMethods = async () => {
|
|
setPaymentMethodsLoading(true);
|
|
try {
|
|
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || 'https://api.igny8.com/api';
|
|
const country = formData.billingCountry || 'US';
|
|
const response = await fetch(`${API_BASE_URL}/v1/billing/payment-configs/payment-methods/?country=${country}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load payment methods');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
let methodsList: PaymentMethodConfig[] = [];
|
|
if (Array.isArray(data)) {
|
|
methodsList = data;
|
|
} else if (data.success && data.data) {
|
|
methodsList = Array.isArray(data.data) ? data.data : data.data.results || [];
|
|
} else if (data.results) {
|
|
methodsList = data.results;
|
|
}
|
|
|
|
const enabledMethods = methodsList.filter((m: PaymentMethodConfig) => m.is_enabled);
|
|
setPaymentMethods(enabledMethods);
|
|
|
|
if (enabledMethods.length > 0 && !selectedPaymentMethod) {
|
|
setSelectedPaymentMethod(enabledMethods[0].payment_method);
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Failed to load payment methods:', err);
|
|
// Don't set error for free plans or if payment methods fail to load
|
|
// Just log it and continue
|
|
} finally {
|
|
setPaymentMethodsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadPaymentMethods();
|
|
}, [isPaidPlan, formData.billingCountry]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (!formData.email || !formData.password || !formData.firstName || !formData.lastName) {
|
|
setError('Please fill in all required fields');
|
|
return;
|
|
}
|
|
|
|
if (!isChecked) {
|
|
setError('Please agree to the Terms and Conditions');
|
|
return;
|
|
}
|
|
|
|
if (!selectedPlan) {
|
|
setError('Please select a plan');
|
|
return;
|
|
}
|
|
|
|
if (isPaidPlan && !selectedPaymentMethod) {
|
|
setError('Please select a payment method');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const username = formData.email.split('@')[0];
|
|
|
|
const registerPayload: any = {
|
|
email: formData.email,
|
|
password: formData.password,
|
|
username: username,
|
|
first_name: formData.firstName,
|
|
last_name: formData.lastName,
|
|
account_name: formData.accountName,
|
|
plan_slug: selectedPlan.slug,
|
|
};
|
|
|
|
if (isPaidPlan) {
|
|
registerPayload.payment_method = selectedPaymentMethod;
|
|
registerPayload.billing_email = formData.email;
|
|
registerPayload.billing_country = formData.billingCountry;
|
|
}
|
|
|
|
const user = (await register(registerPayload)) as any;
|
|
|
|
// CRITICAL: Verify auth state is actually set in Zustand store
|
|
// The register function should have already set isAuthenticated=true
|
|
const currentAuthState = useAuthStore.getState();
|
|
|
|
console.log('Post-registration auth state check:', {
|
|
isAuthenticated: currentAuthState.isAuthenticated,
|
|
hasUser: !!currentAuthState.user,
|
|
hasToken: !!currentAuthState.token,
|
|
userData: user
|
|
});
|
|
|
|
// If for some reason state wasn't set, force set it again
|
|
if (!currentAuthState.isAuthenticated || !currentAuthState.user || !currentAuthState.token) {
|
|
console.error('Auth state not properly set after registration, forcing update...');
|
|
|
|
// Extract tokens from user data if available
|
|
const tokenData = user?.tokens || {};
|
|
const accessToken = user?.access || tokenData.access || localStorage.getItem('access_token');
|
|
const refreshToken = user?.refresh || tokenData.refresh || localStorage.getItem('refresh_token');
|
|
|
|
// Force set the state
|
|
useAuthStore.setState({
|
|
user: user,
|
|
token: accessToken,
|
|
refreshToken: refreshToken,
|
|
isAuthenticated: true,
|
|
loading: false
|
|
});
|
|
|
|
// Wait a bit for state to propagate
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
|
|
// Final verification before navigation
|
|
const finalState = useAuthStore.getState();
|
|
if (!finalState.isAuthenticated) {
|
|
throw new Error('Failed to authenticate after registration. Please try logging in manually.');
|
|
}
|
|
|
|
const status = user?.account?.status;
|
|
if (status === 'pending_payment') {
|
|
navigate('/account/plans', { replace: true });
|
|
} else {
|
|
navigate('/sites', { replace: true });
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message || 'Registration failed. Please try again.');
|
|
}
|
|
};
|
|
|
|
const getPaymentIcon = (method: string) => {
|
|
switch (method) {
|
|
case 'stripe':
|
|
return <CreditCard className="w-5 h-5" />;
|
|
case 'bank_transfer':
|
|
return <Building2 className="w-5 h-5" />;
|
|
case 'local_wallet':
|
|
return <Wallet className="w-5 h-5" />;
|
|
default:
|
|
return <CreditCard className="w-5 h-5" />;
|
|
}
|
|
};
|
|
|
|
const formatNumber = (num: number): string => {
|
|
if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
|
|
if (num >= 1000) return `${(num / 1000).toFixed(0)}K`;
|
|
return num.toString();
|
|
};
|
|
|
|
const extractFeatures = (plan: Plan): string[] => {
|
|
// Use features from plan's JSON field if available, otherwise build from limits
|
|
if (plan.features && plan.features.length > 0) {
|
|
return plan.features;
|
|
}
|
|
|
|
// Fallback to building from plan limits
|
|
const features: string[] = [];
|
|
features.push(`${plan.max_sites} ${plan.max_sites === 1 ? 'Site' : 'Sites'}`);
|
|
features.push(`${plan.max_users} ${plan.max_users === 1 ? 'User' : 'Users'}`);
|
|
features.push(`${formatNumber(plan.max_keywords || 0)} Keywords`);
|
|
features.push(`${formatNumber(plan.monthly_word_count_limit || 0)} Words/Month`);
|
|
features.push(`${formatNumber(plan.included_credits || 0)} AI Credits`);
|
|
return features;
|
|
};
|
|
|
|
const getDisplayPrice = (plan: Plan): number => {
|
|
const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
|
|
if (billingPeriod === 'annually') {
|
|
return monthlyPrice * 12 * 0.85; // 15% discount
|
|
}
|
|
return monthlyPrice;
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col lg:w-1/2 w-full">
|
|
{/* Mobile Pricing Toggle */}
|
|
<div className="lg:hidden bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm">
|
|
<span
|
|
className={`absolute top-1/2 left-1 flex h-9 w-28 -translate-y-1/2 rounded-md bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
|
|
billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-28'
|
|
}`}
|
|
></span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingPeriod('monthly')}
|
|
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
|
|
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
|
}`}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingPeriod('annually')}
|
|
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
|
|
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
|
}`}
|
|
>
|
|
Annually
|
|
</button>
|
|
</div>
|
|
<div className="h-6 flex items-center justify-center">
|
|
<span className={`inline-flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 font-semibold bg-green-50 dark:bg-green-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
|
|
billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
|
|
}`}>
|
|
<svg className="w-3.5 h-3.5" 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>
|
|
Save 15%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto no-scrollbar flex items-center">
|
|
<div className={`w-full mx-auto p-6 sm:p-8 ${
|
|
isPaidPlan ? 'max-w-2xl' : 'max-w-md'
|
|
}`}>
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-6"
|
|
>
|
|
<ChevronLeftIcon className="size-5" />
|
|
Back to dashboard
|
|
</Link>
|
|
|
|
<div className="mb-6">
|
|
<h1 className="mb-2 font-semibold text-gray-800 dark:text-white text-2xl">Sign Up for {selectedPlan?.name || 'IGNY8'}</h1>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Complete your registration and select a payment method.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Plan Selection - Mobile */}
|
|
<div className="lg:hidden mb-6">
|
|
<Label>Select Plan</Label>
|
|
<div className="grid grid-cols-2 gap-2 mt-2">
|
|
{plans.map((plan) => {
|
|
const displayPrice = getDisplayPrice(plan);
|
|
const isSelected = selectedPlan?.id === plan.id;
|
|
const isFree = parseFloat(String(plan.price || 0)) === 0;
|
|
|
|
return (
|
|
<button
|
|
key={plan.id}
|
|
onClick={() => onPlanSelect(plan)}
|
|
className={`p-3 rounded-lg border-2 text-left transition-all ${
|
|
isSelected
|
|
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
|
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className={`font-semibold text-sm ${isSelected ? 'text-brand-600 dark:text-brand-400' : 'text-gray-900 dark:text-white'}`}>
|
|
{plan.name}
|
|
</span>
|
|
{isSelected && <CheckCircle className="w-4 h-4 text-brand-500" />}
|
|
</div>
|
|
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
|
{isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{billingPeriod === 'annually' && !isFree ? '/year' : '/month'}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<Label>
|
|
First Name<span className="text-error-500">*</span>
|
|
</Label>
|
|
<Input type="text" name="firstName" value={formData.firstName} onChange={handleChange} placeholder="Enter your first name" />
|
|
</div>
|
|
<div>
|
|
<Label>
|
|
Last Name<span className="text-error-500">*</span>
|
|
</Label>
|
|
<Input type="text" name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Enter your last name" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>
|
|
Email<span className="text-error-500">*</span>
|
|
</Label>
|
|
<Input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Enter your email" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Account Name (optional)</Label>
|
|
<Input type="text" name="accountName" value={formData.accountName} onChange={handleChange} placeholder="Workspace / Company name" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>
|
|
Password<span className="text-error-500">*</span>
|
|
</Label>
|
|
<div className="relative">
|
|
<Input placeholder="Enter your password" type={showPassword ? 'text' : 'password'} name="password" value={formData.password} onChange={handleChange} />
|
|
<span onClick={() => setShowPassword(!showPassword)} className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2">
|
|
{showPassword ? <EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" /> : <EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{isPaidPlan && (
|
|
<div className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>
|
|
Country<span className="text-error-500">*</span>
|
|
</Label>
|
|
<SelectDropdown
|
|
options={[
|
|
{ value: 'US', label: '🇺🇸 United States' },
|
|
{ value: 'GB', label: '🇬🇧 United Kingdom' },
|
|
{ value: 'IN', label: '🇮🇳 India' },
|
|
{ value: 'PK', label: '🇵🇰 Pakistan' },
|
|
{ value: 'CA', label: '🇨🇦 Canada' },
|
|
{ value: 'AU', label: '🇦🇺 Australia' },
|
|
{ value: 'DE', label: '🇩🇪 Germany' },
|
|
{ value: 'FR', label: '🇫🇷 France' },
|
|
]}
|
|
value={formData.billingCountry}
|
|
onChange={(value) => setFormData((prev) => ({ ...prev, billingCountry: value }))}
|
|
className="text-base"
|
|
/>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Payment methods filtered by country</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>
|
|
Payment Method<span className="text-error-500">*</span>
|
|
</Label>
|
|
{paymentMethodsLoading ? (
|
|
<div className="flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg h-[52px]">
|
|
<Loader2 className="w-4 h-4 animate-spin text-brand-500" />
|
|
</div>
|
|
) : paymentMethods.length === 0 ? (
|
|
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
|
|
<p className="text-xs">No payment methods available</p>
|
|
</div>
|
|
) : (
|
|
<SelectDropdown
|
|
options={paymentMethods.map(m => ({
|
|
value: m.payment_method,
|
|
label: m.display_name
|
|
}))}
|
|
value={selectedPaymentMethod}
|
|
onChange={(value) => setSelectedPaymentMethod(value)}
|
|
className="text-base"
|
|
/>
|
|
)}
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">How you'd like to pay</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Method Details - Full Width Below */}
|
|
{selectedPaymentMethod && paymentMethods.length > 0 && (
|
|
<div className="space-y-2">
|
|
{paymentMethods.filter(m => m.payment_method === selectedPaymentMethod).map((method) => (
|
|
method.instructions && (
|
|
<div
|
|
key={method.id}
|
|
className="p-4 rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-brand-500 text-white flex-shrink-0">
|
|
{getPaymentIcon(method.payment_method)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white text-sm mb-1">{method.display_name}</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-line">{method.instructions}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start gap-3 pt-2">
|
|
<Checkbox className="w-5 h-5 mt-0.5" checked={isChecked} onChange={setIsChecked} />
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
By creating an account means you agree to the <span className="text-gray-800 dark:text-white/90">Terms and Conditions</span>, and our{' '}
|
|
<span className="text-gray-800 dark:text-white">Privacy Policy</span>
|
|
</p>
|
|
</div>
|
|
|
|
<Button type="submit" variant="primary" disabled={loading} className="w-full">
|
|
{loading ? (
|
|
<span className="flex items-center justify-center">
|
|
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
|
Creating your account...
|
|
</span>
|
|
) : isPaidPlan ? (
|
|
'Create Account & Continue to Payment'
|
|
) : (
|
|
'Start Free Trial'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-5 text-center">
|
|
<p className="text-sm text-gray-700 dark:text-gray-400">
|
|
Already have an account?{' '}
|
|
<Link to="/signin" className="text-brand-500 hover:text-brand-600 dark:text-brand-400 font-medium">
|
|
Sign In
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Pricing Panel - Renders in right side */}
|
|
<div className="hidden lg:block">
|
|
{/* This will be portaled to the right side */}
|
|
{typeof document !== 'undefined' &&
|
|
document.getElementById('signup-pricing-plans') &&
|
|
ReactDOM.createPortal(
|
|
<div className="space-y-8">
|
|
{/* Billing Toggle - Improved UI */}
|
|
<div className="text-center space-y-3">
|
|
<div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm">
|
|
<span
|
|
className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
|
|
billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-32'
|
|
}`}
|
|
></span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingPeriod('monthly')}
|
|
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
|
|
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
|
}`}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingPeriod('annually')}
|
|
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
|
|
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
|
|
}`}
|
|
>
|
|
Annually
|
|
</button>
|
|
</div>
|
|
<div className="h-7 flex items-center justify-center">
|
|
<p className={`inline-flex items-center gap-1.5 text-green-600 dark:text-green-400 text-sm font-semibold bg-green-50 dark:bg-green-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
|
|
billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
|
|
}`}>
|
|
<svg className="w-4 h-4" 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>
|
|
Save 15% with annual billing
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plan Cards - 2 columns, wider cards, no buttons */}
|
|
<div className="grid gap-5 grid-cols-1 xl:grid-cols-2">
|
|
{plans.map((plan) => {
|
|
const displayPrice = getDisplayPrice(plan);
|
|
const features = extractFeatures(plan);
|
|
const isSelected = selectedPlan?.id === plan.id;
|
|
const isFree = parseFloat(String(plan.price || 0)) === 0;
|
|
const isPopular = plan.slug.toLowerCase().includes('growth');
|
|
|
|
return (
|
|
<div
|
|
key={plan.id}
|
|
onClick={() => onPlanSelect(plan)}
|
|
className={`relative rounded-2xl p-6 cursor-pointer transition-all duration-300 border-2 ${
|
|
isSelected
|
|
? 'border-brand-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-brand-500/20'
|
|
: isPopular
|
|
? 'border-brand-200 dark:border-brand-800 bg-white dark:bg-gray-800/50 hover:shadow-xl'
|
|
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:shadow-lg'
|
|
}`}
|
|
>
|
|
{isPopular && !isSelected && (
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
|
<span className="bg-gradient-to-r from-green-500 to-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
|
|
⭐ POPULAR
|
|
</span>
|
|
</div>
|
|
)}
|
|
{isSelected && (
|
|
<div className="absolute -top-4 -right-4">
|
|
<div className="bg-brand-500 rounded-full p-2 shadow-lg">
|
|
<CheckCircle className="w-8 h-8 text-white" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="mb-5">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{plan.name}</h3>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-4xl font-bold text-gray-900 dark:text-white">
|
|
{isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
|
|
</span>
|
|
<div className="h-5 flex items-center">
|
|
{!isFree && (
|
|
<span className="text-gray-500 dark:text-gray-400 text-sm">
|
|
{billingPeriod === 'annually' ? '/year' : '/month'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="h-5">
|
|
{billingPeriod === 'annually' && !isFree && (
|
|
<p className="text-gray-500 dark:text-gray-400 text-xs">
|
|
${(displayPrice / 12).toFixed(2)}/month billed annually
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features - All features in 2 columns */}
|
|
<div className="grid grid-cols-2 gap-x-3 gap-y-2.5">
|
|
{features.map((feature, idx) => (
|
|
<div key={idx} className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
|
<span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>,
|
|
document.getElementById('signup-pricing-plans')!
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|