feat: add frontend subscription page - M4 (refs #55)
This commit is contained in:
Eric Gullickson
@@ -0,0 +1,365 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Elements } from '@stripe/react-stripe-js';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { format } from 'date-fns';
|
||||
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
||||
import { MobileContainer } from '../../../shared-minimal/components/mobile/MobileContainer';
|
||||
import { PaymentMethodForm } from '../components/PaymentMethodForm';
|
||||
import {
|
||||
useSubscription,
|
||||
useCheckout,
|
||||
useCancelSubscription,
|
||||
useReactivateSubscription,
|
||||
useInvoices,
|
||||
} from '../hooks/useSubscription';
|
||||
import { PLANS } from '../constants/plans';
|
||||
import type { BillingCycle, SubscriptionTier, SubscriptionPlan } from '../types/subscription.types';
|
||||
|
||||
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '');
|
||||
|
||||
interface MobileTierCardProps {
|
||||
plan: SubscriptionPlan;
|
||||
billingCycle: BillingCycle;
|
||||
currentTier?: string;
|
||||
isLoading?: boolean;
|
||||
onUpgrade: () => void;
|
||||
}
|
||||
|
||||
const MobileTierCard: React.FC<MobileTierCardProps> = ({
|
||||
plan,
|
||||
billingCycle,
|
||||
currentTier,
|
||||
isLoading = false,
|
||||
onUpgrade,
|
||||
}) => {
|
||||
const isCurrent = currentTier === plan.tier;
|
||||
const price = billingCycle === 'monthly' ? plan.monthlyPrice : plan.yearlyPrice;
|
||||
const priceLabel = billingCycle === 'monthly' ? '/month' : '/year';
|
||||
|
||||
return (
|
||||
<GlassCard className={`${isCurrent ? 'border-2 border-rose-500' : ''}`}>
|
||||
{isCurrent && (
|
||||
<div className="mb-3">
|
||||
<span className="inline-block bg-rose-500 text-white text-xs font-semibold px-3 py-1 rounded-full">
|
||||
Current Plan
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 className="text-xl font-bold text-slate-800 dark:text-avus mb-2">
|
||||
{plan.name}
|
||||
</h3>
|
||||
|
||||
<div className="my-4">
|
||||
<div className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
${price.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-sm text-slate-600 dark:text-titanio">
|
||||
{priceLabel}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 mb-4">
|
||||
{plan.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start gap-2 text-sm">
|
||||
<span className="text-rose-500 mt-0.5">✓</span>
|
||||
<span className="text-slate-700 dark:text-avus">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{isCurrent ? (
|
||||
<button
|
||||
disabled
|
||||
className="w-full py-3 px-4 bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-xl font-semibold"
|
||||
>
|
||||
Current Plan
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={onUpgrade}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-3 px-4 rounded-xl font-semibold min-h-[44px] ${
|
||||
plan.tier === 'enterprise'
|
||||
? 'bg-rose-500 text-white hover:bg-rose-600 disabled:bg-gray-300'
|
||||
: 'border-2 border-rose-500 text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/20 disabled:border-gray-300 disabled:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{plan.tier === 'free' ? 'Downgrade' : 'Upgrade'}
|
||||
</button>
|
||||
)}
|
||||
</GlassCard>
|
||||
);
|
||||
};
|
||||
|
||||
interface MobileModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const MobileModal: React.FC<MobileModalProps> = ({ isOpen, onClose, title, children }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-scuro rounded-3xl p-6 max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">{title}</h3>
|
||||
{children}
|
||||
<div className="flex justify-end mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-xl font-medium min-h-[44px]"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SubscriptionMobileScreen: React.FC = () => {
|
||||
const [billingCycle, setBillingCycle] = useState<BillingCycle>('monthly');
|
||||
const [selectedTier, setSelectedTier] = useState<SubscriptionTier | null>(null);
|
||||
const [showPaymentDialog, setShowPaymentDialog] = useState(false);
|
||||
|
||||
const { data: subscriptionData, isLoading: isLoadingSubscription } = useSubscription();
|
||||
const { data: invoicesData, isLoading: isLoadingInvoices } = useInvoices();
|
||||
const checkoutMutation = useCheckout();
|
||||
const cancelMutation = useCancelSubscription();
|
||||
const reactivateMutation = useReactivateSubscription();
|
||||
|
||||
const subscription = subscriptionData?.data;
|
||||
const invoices = invoicesData?.data || [];
|
||||
|
||||
const handleUpgradeClick = (tier: SubscriptionTier) => {
|
||||
setSelectedTier(tier);
|
||||
setShowPaymentDialog(true);
|
||||
};
|
||||
|
||||
const handlePaymentSubmit = (paymentMethodId: string) => {
|
||||
if (!selectedTier) return;
|
||||
|
||||
checkoutMutation.mutate(
|
||||
{
|
||||
tier: selectedTier,
|
||||
billingCycle,
|
||||
paymentMethodId,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setShowPaymentDialog(false);
|
||||
setSelectedTier(null);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (window.confirm('Are you sure you want to cancel your subscription? Your plan will remain active until the end of the current billing period.')) {
|
||||
cancelMutation.mutate();
|
||||
}
|
||||
};
|
||||
|
||||
const handleReactivate = () => {
|
||||
reactivateMutation.mutate();
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
|
||||
case 'past_due':
|
||||
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
|
||||
case 'canceled':
|
||||
return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoadingSubscription) {
|
||||
return (
|
||||
<MobileContainer>
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-rose-500"></div>
|
||||
</div>
|
||||
</MobileContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MobileContainer>
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Subscription
|
||||
</h1>
|
||||
|
||||
{subscription && (
|
||||
<GlassCard>
|
||||
<div className="flex gap-2 mb-3">
|
||||
<span className="inline-block bg-rose-500 text-white text-xs font-semibold px-3 py-1 rounded-full">
|
||||
{subscription.tier.toUpperCase()}
|
||||
</span>
|
||||
<span className={`inline-block text-xs font-semibold px-3 py-1 rounded-full ${getStatusColor(subscription.status)}`}>
|
||||
{subscription.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-avus mb-2">
|
||||
Current Plan: {PLANS.find((p) => p.tier === subscription.tier)?.name || subscription.tier}
|
||||
</h2>
|
||||
|
||||
{subscription.currentPeriodEnd && (
|
||||
<p className="text-sm text-slate-600 dark:text-titanio mb-3">
|
||||
Next billing date: {format(new Date(subscription.currentPeriodEnd), 'MMM dd, yyyy')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{subscription.cancelAtPeriodEnd && (
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-xl p-3 mb-3">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-300">
|
||||
Your subscription will be canceled at the end of the current billing period.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4">
|
||||
{subscription.cancelAtPeriodEnd ? (
|
||||
<button
|
||||
onClick={handleReactivate}
|
||||
disabled={reactivateMutation.isPending}
|
||||
className="w-full py-3 px-4 border-2 border-rose-500 text-rose-500 rounded-xl font-semibold min-h-[44px] hover:bg-rose-50 dark:hover:bg-rose-900/20 disabled:opacity-50"
|
||||
>
|
||||
Reactivate
|
||||
</button>
|
||||
) : subscription.tier !== 'free' ? (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={cancelMutation.isPending}
|
||||
className="w-full py-3 px-4 border-2 border-red-500 text-red-500 rounded-xl font-semibold min-h-[44px] hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
|
||||
>
|
||||
Cancel Subscription
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
<GlassCard>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-avus">
|
||||
Available Plans
|
||||
</h2>
|
||||
|
||||
<div className="flex bg-slate-100 dark:bg-scuro rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setBillingCycle('monthly')}
|
||||
className={`px-3 py-1 text-sm font-medium rounded min-h-[36px] ${
|
||||
billingCycle === 'monthly'
|
||||
? 'bg-white dark:bg-nero text-rose-500 shadow-sm'
|
||||
: 'text-slate-600 dark:text-titanio'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingCycle('yearly')}
|
||||
className={`px-3 py-1 text-sm font-medium rounded min-h-[36px] ${
|
||||
billingCycle === 'yearly'
|
||||
? 'bg-white dark:bg-nero text-rose-500 shadow-sm'
|
||||
: 'text-slate-600 dark:text-titanio'
|
||||
}`}
|
||||
>
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{PLANS.map((plan) => (
|
||||
<MobileTierCard
|
||||
key={plan.tier}
|
||||
plan={plan}
|
||||
billingCycle={billingCycle}
|
||||
currentTier={subscription?.tier}
|
||||
isLoading={checkoutMutation.isPending}
|
||||
onUpgrade={() => handleUpgradeClick(plan.tier)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard>
|
||||
<h2 className="text-xl font-bold text-slate-800 dark:text-avus mb-4">
|
||||
Billing History
|
||||
</h2>
|
||||
|
||||
{isLoadingInvoices ? (
|
||||
<div className="flex justify-center p-6">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-rose-500"></div>
|
||||
</div>
|
||||
) : invoices.length === 0 ? (
|
||||
<p className="text-center text-sm text-slate-600 dark:text-titanio p-6">
|
||||
No billing history available
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{invoices.map((invoice: { id: string; date: string; amount: number; status: string; pdfUrl?: string }) => (
|
||||
<div
|
||||
key={invoice.id}
|
||||
className="flex justify-between items-center p-3 bg-slate-50 dark:bg-scuro rounded-xl"
|
||||
>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-800 dark:text-avus">
|
||||
{format(new Date(invoice.date), 'MMM dd, yyyy')}
|
||||
</div>
|
||||
<div className="text-xs text-slate-600 dark:text-titanio">
|
||||
${(invoice.amount / 100).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs px-2 py-1 rounded-full ${
|
||||
invoice.status === 'paid'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
: invoice.status === 'pending'
|
||||
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}>
|
||||
{invoice.status}
|
||||
</span>
|
||||
{invoice.pdfUrl && (
|
||||
<a
|
||||
href={invoice.pdfUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-rose-500 text-sm min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||
>
|
||||
↓
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
<MobileModal
|
||||
isOpen={showPaymentDialog}
|
||||
onClose={() => !checkoutMutation.isPending && setShowPaymentDialog(false)}
|
||||
title={`Upgrade to ${selectedTier && PLANS.find((p) => p.tier === selectedTier)?.name}`}
|
||||
>
|
||||
<Elements stripe={stripePromise}>
|
||||
<PaymentMethodForm
|
||||
onSubmit={handlePaymentSubmit}
|
||||
isLoading={checkoutMutation.isPending}
|
||||
/>
|
||||
</Elements>
|
||||
</MobileModal>
|
||||
</MobileContainer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user