SubscriptionManager

subscriptionmanager-1779388706084.tsx

'use client';
import { useState } from 'react';

export default function SubscriptionManager() {
  const [current, setCurrent] = useState('pro');
  const [confirming, setConfirming] = useState(null);

  const plans = [
    { id: 'starter', name: 'Starter', price: 9, features: ['5 projects', '10GB storage', 'Email support'] },
    { id: 'pro', name: 'Pro', price: 49, features: ['Unlimited projects', '100GB storage', 'Priority support', 'API access'] },
    { id: 'enterprise', name: 'Enterprise', price: 199, features: ['Everything in Pro', 'SSO', 'SLA 99.99%', 'Dedicated manager'] },
  ];

  const currentPlan = plans.find(p => p.id === current);
  const handleSwitch = (id) => {
    if (id === current) return;
    if (confirming === id) { setCurrent(id); setConfirming(null); }
    else setConfirming(id);
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '500px' }}>
      <div style={{ background: 'rgba(201,168,76,0.06)', border: '1px solid rgba(201,168,76,0.2)', borderRadius: '12px', padding: '14px 18px', marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <p style={{ margin: 0, color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>Current Plan</p>
          <p style={{ margin: '2px 0 0 0', color: '#C9A84C', fontWeight: 700, fontSize: '16px' }}>{currentPlan?.name} · ${currentPlan?.price}/mo</p>
        </div>
        <span style={{ color: '#4ade80', fontSize: '12px', fontWeight: 600 }}>● Active</span>
      </div>
      {plans.map(plan => {
        const isCurrent = plan.id === current;
        const isConfirming = confirming === plan.id;
        const isUpgrade = plans.findIndex(p => p.id === plan.id) > plans.findIndex(p => p.id === current);
        return (
          <div key={plan.id} style={{
            display: 'flex', alignItems: 'center', gap: '16px',
            background: isCurrent ? 'rgba(201,168,76,0.06)' : 'rgba(255,255,255,0.02)',
            border: `1px solid ${isCurrent ? 'rgba(201,168,76,0.25)' : 'rgba(255,255,255,0.07)'}`,
            borderRadius: '12px', padding: '16px 18px', marginBottom: '8px',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                <span style={{ color: '#F5F5F0', fontWeight: 700, fontSize: '14px' }}>{plan.name}</span>
                <span style={{ color: '#C9A84C', fontWeight: 700, fontSize: '14px' }}>${plan.price}/mo</span>
                {isCurrent && <span style={{ background: 'rgba(201,168,76,0.15)', color: '#C9A84C', borderRadius: '6px', padding: '1px 8px', fontSize: '11px' }}>Current</span>}
              </div>
              <p style={{ color: 'rgba(245,245,240,0.4)', fontSize: '12px', margin: 0 }}>{plan.features.slice(0, 2).join(' · ')}</p>
            </div>
            {!isCurrent && (
              <button onClick={() => handleSwitch(plan.id)} style={{
                background: isConfirming ? (isUpgrade ? 'rgba(74,222,128,0.1)' : 'rgba(239,68,68,0.1)') : 'rgba(255,255,255,0.05)',
                border: `1px solid ${isConfirming ? (isUpgrade ? 'rgba(74,222,128,0.3)' : 'rgba(239,68,68,0.3)') : 'rgba(255,255,255,0.1)'}`,
                borderRadius: '8px', padding: '7px 14px',
                color: isConfirming ? (isUpgrade ? '#4ade80' : '#ef4444') : 'rgba(245,245,240,0.6)',
                fontSize: '12px', cursor: 'pointer', whiteSpace: 'nowrap',
              }}>
                {isConfirming ? 'Confirm?' : isUpgrade ? 'Upgrade' : 'Downgrade'}
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}

Component info

CategoryE-commerce

Frameworkreact

TierFREE

Copies0

About

Subscription plan management with upgrade/downgrade

More from E-commerce

'use client'
import { useState } from 'react'

interface CartItem { id: number; name: string; price: number; qty: number; color: string }

const INITIAL_ITEMS: CartItem[] = [
  { id: 1, name: 'Empire UI Pro', price: 19, qty: 1, color: '#C9A84C' },

CartDrawer

E-commerce

'use client'
import { useState } from 'react'

const images = ['🖥️', '💻', '⌨️', '🖱️']
const colors = [{ name: 'Space Gray', hex: '#4a4a4a' }, { name: 'Silver', hex: '#c0c0c0' }, { name: 'Gold', hex: '#C9A84C' }]
const sizes = ['8GB / 256GB', '16GB

ProductQuickView

E-commerce