File size: 15,714 Bytes
8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 8a013a0 1755110 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 | import { X, Check } from 'lucide-react';
interface RechargeModalProps {
user: any;
onClose: () => void;
onSelectPackage: (amountInRupees: number) => Promise<void>;
}
export default function RechargeModal({ user, onClose, onSelectPackage }: RechargeModalProps) {
// Check if account age is under 3 days (3 * 24 * 60 * 60 * 1000 = 259200000 ms)
const isNewUser = (() => {
if (!user || !user.createdAt) return false;
try {
const createdDate = new Date(user.createdAt).getTime();
const currentDate = new Date().getTime();
const ageDiff = currentDate - createdDate;
return ageDiff <= 3 * 24 * 60 * 60 * 1000;
} catch (e) {
return false;
}
})();
return (
<div className="modal-overlay animate-fade">
<div className="modal-content glass-panel pricing-modal-content" style={{ maxWidth: isNewUser ? '1000px' : '850px', width: '90%', padding: '24px 32px' }}>
<div className="modal-header" style={{ marginBottom: '8px' }}>
<div>
<h2 style={{ fontSize: '24px', fontWeight: 800, background: 'linear-gradient(90deg, #00f2fe, #a154ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
Choose Your Plan
</h2>
<p style={{ fontSize: '13px', color: 'var(--text-muted)', marginTop: '4px' }}>
Unlock high-fidelity AI Strategy generations & local ML market predictions.
</p>
</div>
<button className="close-btn" onClick={onClose} aria-label="Close modal">
<X size={20} />
</button>
</div>
<div className="recharge-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${isNewUser ? 4 : 3}, minmax(0, 1fr))`, gap: '16px', margin: '20px 0' }}>
{/* Card 0: Free Tier */}
<div className="pricing-card free-card" style={{ display: 'flex', flexDirection: 'column', padding: '20px', background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.03)', borderRadius: '12px', transition: 'all 0.3s ease', position: 'relative' }}>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Starter</span>
<h3 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginTop: '6px' }}>Free Tier</h3>
<div style={{ margin: '16px 0 20px' }}>
<span style={{ fontSize: '28px', fontWeight: 800, color: 'var(--text-primary)' }}>₹0</span>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', marginLeft: '4px' }}>/ week</span>
</div>
<ul style={{ flex: 1, listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: '10px', fontSize: '12px', color: 'var(--text-secondary)' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>5 weekly AI strategies</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Basic candlestick charts</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Active alerts (Limit: 2)</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Live stream ticker tape</span>
</li>
</ul>
<button disabled style={{ width: '100%', padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.05)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-muted)', fontSize: '13px', fontWeight: 600, cursor: 'not-allowed' }}>
Active Free Tier
</button>
</div>
{/* Card 1: 10 Credits */}
<div className="pricing-card package-card-pro" onClick={() => onSelectPackage(500)} style={{ display: 'flex', flexDirection: 'column', padding: '20px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border-glass)', borderRadius: '12px', transition: 'all 0.3s ease', cursor: 'pointer', position: 'relative' }}>
<span style={{ fontSize: '12px', color: 'var(--neon-cyan)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Analyst Pack</span>
<h3 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginTop: '6px' }}>10 Credits</h3>
<div style={{ margin: '16px 0 20px' }}>
<span style={{ fontSize: '28px', fontWeight: 800, color: 'var(--text-primary)' }}>₹500</span>
</div>
<ul style={{ flex: 1, listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: '10px', fontSize: '12px', color: 'var(--text-secondary)' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>10 Strategy Generations</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Advanced indicators scanning</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Active alerts (Limit: 10)</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Standard processing queue</span>
</li>
</ul>
<button className="insight-btn" style={{ width: '100%', padding: '10px', borderRadius: '8px', border: 'none', background: 'var(--neon-cyan)', color: 'var(--bg-black)', fontSize: '13px', fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s ease' }}>
Select Pack
</button>
</div>
{/* Card 2: 50 Credits */}
<div className="pricing-card package-card-pro hot-deal-card" onClick={() => onSelectPackage(1500)} style={{ display: 'flex', flexDirection: 'column', padding: '20px', background: 'rgba(161, 84, 255, 0.05)', border: '1px solid rgba(161, 84, 255, 0.3)', borderRadius: '12px', transition: 'all 0.3s ease', cursor: 'pointer', position: 'relative', boxShadow: '0 8px 32px rgba(161, 84, 255, 0.1)' }}>
<div style={{ position: 'absolute', top: '-10px', right: '12px', background: 'var(--neon-violet)', color: 'var(--text-primary)', fontSize: '10px', fontWeight: 800, padding: '3px 8px', borderRadius: '20px', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Best Value</div>
<span style={{ fontSize: '12px', color: 'var(--neon-violet)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Trader Pack</span>
<h3 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginTop: '6px' }}>50 Credits</h3>
<div style={{ margin: '16px 0 20px' }}>
<span style={{ fontSize: '28px', fontWeight: 800, color: 'var(--text-primary)' }}>₹1,500</span>
</div>
<ul style={{ flex: 1, listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: '10px', fontSize: '12px', color: 'var(--text-secondary)' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-violet)', flexShrink: 0 }} />
<span>50 Strategy Generations</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-violet)', flexShrink: 0 }} />
<span>Priority processing queue</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-violet)', flexShrink: 0 }} />
<span>Active alerts (Limit: 50)</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-violet)', flexShrink: 0 }} />
<span>Historical strategy history</span>
</li>
</ul>
<button className="insight-btn" style={{ width: '100%', padding: '10px', borderRadius: '8px', border: 'none', background: 'var(--neon-violet)', color: 'var(--text-primary)', fontSize: '13px', fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s ease', boxShadow: '0 4px 12px rgba(161, 84, 255, 0.3)' }}>
Select Pack
</button>
</div>
{/* Card 3: 100 Credits / Lifetime Offer */}
{isNewUser ? (
/* Special Lifetime Offer for New Users (Age <= 3 days) */
<div className="pricing-card package-card-pro lifetime-deal-card" onClick={() => onSelectPackage(10500)} style={{ display: 'flex', flexDirection: 'column', padding: '20px', background: 'rgba(0, 242, 254, 0.05)', border: '1px solid rgba(0, 242, 254, 0.5)', borderRadius: '12px', transition: 'all 0.3s ease', cursor: 'pointer', position: 'relative', boxShadow: '0 8px 32px rgba(0, 242, 254, 0.15)' }}>
<div style={{ position: 'absolute', top: '-10px', right: '12px', background: 'var(--neon-cyan)', color: 'var(--bg-black)', fontSize: '10px', fontWeight: 800, padding: '3px 8px', borderRadius: '20px', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Limited Offer</div>
<span style={{ fontSize: '12px', color: 'var(--neon-cyan)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Lifetime Plan</span>
<h3 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginTop: '6px' }}>Unlimited AI</h3>
<div style={{ margin: '16px 0 20px' }}>
<span style={{ fontSize: '28px', fontWeight: 800, color: 'var(--text-primary)' }}>₹10,500</span>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', marginLeft: '4px' }}>once</span>
</div>
<ul style={{ flex: 1, listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: '10px', fontSize: '12px', color: 'var(--text-secondary)' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<strong style={{ color: 'var(--text-primary)' }}>Lifetime Unlimited AI chats</strong>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Instant strategy reports</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Unlimited watchlist & alerts</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--neon-cyan)', flexShrink: 0 }} />
<span>Exclusive developer features</span>
</li>
</ul>
<button className="insight-btn" style={{ width: '100%', padding: '10px', borderRadius: '8px', border: 'none', background: 'linear-gradient(90deg, #00f2fe, #a154ff)', color: 'var(--bg-black)', fontSize: '13px', fontWeight: 800, cursor: 'pointer', transition: 'all 0.2s ease', boxShadow: '0 4px 12px rgba(0, 242, 254, 0.4)' }}>
Claim Offer
</button>
</div>
) : (
/* Standard 100 Credits Card */
<div className="pricing-card package-card-pro" onClick={() => onSelectPackage(2500)} style={{ display: 'flex', flexDirection: 'column', padding: '20px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border-glass)', borderRadius: '12px', transition: 'all 0.3s ease', cursor: 'pointer', position: 'relative' }}>
<span style={{ fontSize: '12px', color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Pro Pack</span>
<h3 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginTop: '6px' }}>100 Credits</h3>
<div style={{ margin: '16px 0 20px' }}>
<span style={{ fontSize: '28px', fontWeight: 800, color: 'var(--text-primary)' }}>₹2,500</span>
</div>
<ul style={{ flex: 1, listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: '10px', fontSize: '12px', color: 'var(--text-secondary)' }}>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
<span>100 Strategy Generations</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
<span>Dedicated priority agent queue</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
<span>Unlimited price alerts</span>
</li>
<li style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<Check size={14} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
<span>Custom indicator weights</span>
</li>
</ul>
<button className="insight-btn" style={{ width: '100%', padding: '10px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.05)', color: 'var(--text-primary)', fontSize: '13px', fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s ease' }}>
Select Pack
</button>
</div>
)}
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--border-glass)', paddingTop: '16px', marginTop: '16px' }}>
<p style={{ fontSize: '11px', color: 'var(--text-muted)', margin: 0 }}>
Test Mode active. Pay using Razorpay Test UPI / cards.
</p>
{isNewUser && (
<p style={{ fontSize: '11px', color: 'var(--neon-cyan)', margin: 0, fontWeight: 600 }} className="offer-countdown">
⚡ New User Special Offer ends in 3 days!
</p>
)}
</div>
</div>
</div>
);
}
|