2e111364a2
This commit includes: - Django backend with multi-tenancy (django-tenants) - React + TypeScript frontend with Vite - Platform administration API with role-based access control - Authentication system with token-based auth - Quick login dev tools for testing different user roles - CORS and CSRF configuration for local development - Docker development environment setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
390 lines
16 KiB
TypeScript
390 lines
16 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate, useOutletContext } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Check, Loader2, CreditCard, Shield, Zap, Users, ArrowLeft } from 'lucide-react';
|
|
import { User, Business } from '../types';
|
|
|
|
type BillingPeriod = 'monthly' | 'annual';
|
|
type PlanTier = 'Professional' | 'Business' | 'Enterprise';
|
|
|
|
interface PlanFeature {
|
|
text: string;
|
|
included: boolean;
|
|
}
|
|
|
|
interface PlanDetails {
|
|
name: string;
|
|
description: string;
|
|
monthlyPrice: number;
|
|
annualPrice: number;
|
|
features: PlanFeature[];
|
|
popular?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Upgrade Page
|
|
* Allows businesses to upgrade from trial/free to a paid plan
|
|
*/
|
|
const Upgrade: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { user, business } = useOutletContext<{ user: User; business: Business }>();
|
|
|
|
const [billingPeriod, setBillingPeriod] = useState<BillingPeriod>('monthly');
|
|
const [selectedPlan, setSelectedPlan] = useState<PlanTier>('Professional');
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Plan configurations
|
|
const plans: Record<PlanTier, PlanDetails> = {
|
|
Professional: {
|
|
name: t('marketing.pricing.tiers.professional.name'),
|
|
description: t('marketing.pricing.tiers.professional.description'),
|
|
monthlyPrice: 29,
|
|
annualPrice: 290,
|
|
features: [
|
|
{ text: t('upgrade.features.resources', { count: 10 }), included: true },
|
|
{ text: t('upgrade.features.customDomain'), included: true },
|
|
{ text: t('upgrade.features.stripeConnect'), included: true },
|
|
{ text: t('upgrade.features.whitelabel'), included: true },
|
|
{ text: t('upgrade.features.emailReminders'), included: true },
|
|
{ text: t('upgrade.features.prioritySupport'), included: true },
|
|
{ text: t('upgrade.features.apiAccess'), included: false },
|
|
],
|
|
},
|
|
Business: {
|
|
name: t('marketing.pricing.tiers.business.name'),
|
|
description: t('marketing.pricing.tiers.business.description'),
|
|
monthlyPrice: 79,
|
|
annualPrice: 790,
|
|
popular: true,
|
|
features: [
|
|
{ text: t('upgrade.features.unlimitedResources'), included: true },
|
|
{ text: t('upgrade.features.customDomain'), included: true },
|
|
{ text: t('upgrade.features.stripeConnect'), included: true },
|
|
{ text: t('upgrade.features.whitelabel'), included: true },
|
|
{ text: t('upgrade.features.teamManagement'), included: true },
|
|
{ text: t('upgrade.features.advancedAnalytics'), included: true },
|
|
{ text: t('upgrade.features.apiAccess'), included: true },
|
|
{ text: t('upgrade.features.phoneSupport'), included: true },
|
|
],
|
|
},
|
|
Enterprise: {
|
|
name: t('marketing.pricing.tiers.enterprise.name'),
|
|
description: t('marketing.pricing.tiers.enterprise.description'),
|
|
monthlyPrice: 0,
|
|
annualPrice: 0,
|
|
features: [
|
|
{ text: t('upgrade.features.everything'), included: true },
|
|
{ text: t('upgrade.features.customIntegrations'), included: true },
|
|
{ text: t('upgrade.features.dedicatedManager'), included: true },
|
|
{ text: t('upgrade.features.sla'), included: true },
|
|
{ text: t('upgrade.features.customContracts'), included: true },
|
|
{ text: t('upgrade.features.onPremise'), included: true },
|
|
],
|
|
},
|
|
};
|
|
|
|
const currentPlan = plans[selectedPlan];
|
|
const price = billingPeriod === 'monthly' ? currentPlan.monthlyPrice : currentPlan.annualPrice;
|
|
const isEnterprise = selectedPlan === 'Enterprise';
|
|
|
|
const handleUpgrade = async () => {
|
|
if (isEnterprise) {
|
|
// For Enterprise, redirect to contact page
|
|
window.location.href = 'mailto:sales@smoothschedule.com?subject=Enterprise Plan Inquiry';
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// TODO: Integrate with Stripe Checkout or dj-stripe subscription creation
|
|
// This is a placeholder for the actual Stripe integration
|
|
|
|
// Example flow:
|
|
// 1. Call backend API to create Stripe Checkout session
|
|
// 2. Redirect to Stripe Checkout
|
|
// 3. Handle success/cancel callbacks
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
|
|
|
|
// For now, just show a message
|
|
alert(`Upgrading to ${selectedPlan} (${billingPeriod})\nThis would redirect to Stripe Checkout.`);
|
|
|
|
// After successful payment, redirect to dashboard
|
|
navigate('/');
|
|
} catch (err) {
|
|
setError(t('upgrade.errors.processingFailed'));
|
|
console.error('Upgrade error:', err);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const calculateSavings = () => {
|
|
if (billingPeriod === 'annual') {
|
|
const monthlyCost = currentPlan.monthlyPrice * 12;
|
|
const annualCost = currentPlan.annualPrice;
|
|
return monthlyCost - annualCost;
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Back Button */}
|
|
<button
|
|
onClick={() => navigate(-1)}
|
|
className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-8"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
{t('common.back')}
|
|
</button>
|
|
|
|
{/* Header */}
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
|
{t('upgrade.title')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
|
{t('upgrade.subtitle', { businessName: business.name })}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Billing Period Toggle */}
|
|
<div className="flex justify-center mb-12">
|
|
<div className="inline-flex items-center gap-4 bg-white dark:bg-gray-800 rounded-full p-1.5 shadow-sm border border-gray-200 dark:border-gray-700">
|
|
<button
|
|
onClick={() => setBillingPeriod('monthly')}
|
|
className={`px-6 py-2.5 rounded-full font-medium transition-all ${
|
|
billingPeriod === 'monthly'
|
|
? 'bg-brand-600 text-white shadow-sm'
|
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
{t('upgrade.billing.monthly')}
|
|
</button>
|
|
<button
|
|
onClick={() => setBillingPeriod('annual')}
|
|
className={`px-6 py-2.5 rounded-full font-medium transition-all relative ${
|
|
billingPeriod === 'annual'
|
|
? 'bg-brand-600 text-white shadow-sm'
|
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
{t('upgrade.billing.annual')}
|
|
<span className="absolute -top-2 -right-2 px-2 py-0.5 bg-green-500 text-white text-xs font-bold rounded-full">
|
|
{t('upgrade.billing.save20')}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plan Cards */}
|
|
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
|
{(Object.entries(plans) as [PlanTier, PlanDetails][]).map(([tier, plan]) => {
|
|
const isSelected = selectedPlan === tier;
|
|
const tierPrice = billingPeriod === 'monthly' ? plan.monthlyPrice : plan.annualPrice;
|
|
const isEnterprisePlan = tier === 'Enterprise';
|
|
|
|
return (
|
|
<div
|
|
key={tier}
|
|
onClick={() => setSelectedPlan(tier)}
|
|
className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border-2 transition-all cursor-pointer ${
|
|
isSelected
|
|
? 'border-brand-600 shadow-brand-500/20 scale-105'
|
|
: 'border-gray-200 dark:border-gray-700 hover:border-brand-300'
|
|
} ${plan.popular ? 'ring-2 ring-brand-500' : ''}`}
|
|
>
|
|
{plan.popular && (
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
|
<span className="px-4 py-1.5 bg-brand-600 text-white text-sm font-bold rounded-full shadow-lg">
|
|
{t('upgrade.mostPopular')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-8">
|
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{plan.name}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
{plan.description}
|
|
</p>
|
|
|
|
<div className="mb-6">
|
|
{isEnterprisePlan ? (
|
|
<div className="text-4xl font-bold text-gray-900 dark:text-white">
|
|
{t('upgrade.custom')}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="text-4xl font-bold text-gray-900 dark:text-white">
|
|
${tierPrice}
|
|
<span className="text-lg font-normal text-gray-500">
|
|
/{billingPeriod === 'monthly' ? t('upgrade.month') : t('upgrade.year')}
|
|
</span>
|
|
</div>
|
|
{billingPeriod === 'annual' && (
|
|
<div className="text-sm text-green-600 dark:text-green-400 mt-1">
|
|
{t('upgrade.billing.saveAmount', { amount: (plan.monthlyPrice * 12 - plan.annualPrice) })}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<ul className="space-y-3 mb-8">
|
|
{plan.features.map((feature, idx) => (
|
|
<li key={idx} className="flex items-start gap-3">
|
|
<div
|
|
className={`p-1 rounded-full mt-0.5 ${
|
|
feature.included
|
|
? 'bg-green-100 dark:bg-green-900/30'
|
|
: 'bg-gray-100 dark:bg-gray-700'
|
|
}`}
|
|
>
|
|
<Check
|
|
className={
|
|
feature.included
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-gray-400'
|
|
}
|
|
size={16}
|
|
/>
|
|
</div>
|
|
<span
|
|
className={`text-sm ${
|
|
feature.included
|
|
? 'text-gray-700 dark:text-gray-300'
|
|
: 'text-gray-400 dark:text-gray-500'
|
|
}`}
|
|
>
|
|
{feature.text}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div
|
|
className={`w-full py-3 rounded-xl font-semibold text-center transition-all ${
|
|
isSelected
|
|
? 'bg-brand-600 text-white shadow-lg'
|
|
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
{isSelected ? t('upgrade.selected') : t('upgrade.selectPlan')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Summary & Checkout */}
|
|
<div className="max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t('upgrade.orderSummary')}
|
|
</h2>
|
|
|
|
<div className="space-y-4 mb-8">
|
|
<div className="flex justify-between items-center pb-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div>
|
|
<div className="font-semibold text-gray-900 dark:text-white">
|
|
{currentPlan.name} {t('upgrade.plan')}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{billingPeriod === 'monthly' ? t('upgrade.billedMonthly') : t('upgrade.billedAnnually')}
|
|
</div>
|
|
</div>
|
|
{!isEnterprise && (
|
|
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
|
${price}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{billingPeriod === 'annual' && !isEnterprise && calculateSavings() > 0 && (
|
|
<div className="flex justify-between items-center text-green-600 dark:text-green-400">
|
|
<div className="font-medium">{t('upgrade.annualSavings')}</div>
|
|
<div className="font-bold">-${calculateSavings()}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Trust Indicators */}
|
|
<div className="grid grid-cols-3 gap-4 mb-8 p-6 bg-gray-50 dark:bg-gray-900 rounded-xl">
|
|
<div className="text-center">
|
|
<Shield className="mx-auto mb-2 text-brand-600" size={24} />
|
|
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
{t('upgrade.trust.secure')}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Zap className="mx-auto mb-2 text-brand-600" size={24} />
|
|
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
{t('upgrade.trust.instant')}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Users className="mx-auto mb-2 text-brand-600" size={24} />
|
|
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
{t('upgrade.trust.support')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<p className="text-red-800 dark:text-red-200 text-sm">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Upgrade Button */}
|
|
<button
|
|
onClick={handleUpgrade}
|
|
disabled={isProcessing}
|
|
className="w-full flex items-center justify-center gap-3 py-4 bg-gradient-to-r from-brand-600 to-brand-700 text-white font-bold rounded-xl hover:from-brand-700 hover:to-brand-800 transition-all shadow-lg shadow-brand-500/30 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isProcessing ? (
|
|
<>
|
|
<Loader2 className="animate-spin" size={20} />
|
|
{t('upgrade.processing')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<CreditCard size={20} />
|
|
{isEnterprise ? t('upgrade.contactSales') : t('upgrade.continueToPayment')}
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<p className="text-center text-xs text-gray-500 dark:text-gray-400 mt-4">
|
|
{t('upgrade.secureCheckout')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* FAQ or Additional Info */}
|
|
<div className="max-w-2xl mx-auto mt-12 text-center">
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{t('upgrade.questions')}{' '}
|
|
<a
|
|
href="mailto:support@smoothschedule.com"
|
|
className="text-brand-600 hover:text-brand-700 font-medium"
|
|
>
|
|
{t('upgrade.contactUs')}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Upgrade;
|