miranshala
7 months ago
parent
f5927f2e76
commit
bfedd5fdaa
@ -0,0 +1,123 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { stripe } from "@/lib/stripe";
|
||||||
|
import { formatAmountForStripe } from "@/lib/stripe";
|
||||||
|
import { getPool } from "@/lib/database";
|
||||||
|
|
||||||
|
// Define pricing tiers
|
||||||
|
const PRICING_TIERS = {
|
||||||
|
basic: {
|
||||||
|
name: "Basic",
|
||||||
|
amount: 9.99,
|
||||||
|
storageLimit: 5,
|
||||||
|
},
|
||||||
|
standard: {
|
||||||
|
name: "Standard",
|
||||||
|
amount: 19.99,
|
||||||
|
storageLimit: 20,
|
||||||
|
},
|
||||||
|
premium: {
|
||||||
|
name: "Premium",
|
||||||
|
amount: 39.99,
|
||||||
|
storageLimit: 100,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
// Check if Stripe is configured
|
||||||
|
if (!process.env.STRIPE_SECRET_KEY) {
|
||||||
|
console.error("Stripe secret key is not configured");
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
error:
|
||||||
|
"Stripe is not configured. Please add STRIPE_SECRET_KEY to your environment variables.",
|
||||||
|
},
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { tier, userId } = await request.json();
|
||||||
|
|
||||||
|
// Validate tier
|
||||||
|
const selectedTier = PRICING_TIERS[tier as keyof typeof PRICING_TIERS];
|
||||||
|
if (!selectedTier) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Invalid tier selected" },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate user
|
||||||
|
if (!userId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "User ID is required" },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if user already has an active subscription
|
||||||
|
const pool = getPool();
|
||||||
|
const client = await pool.connect();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const existingSub = await client.query(
|
||||||
|
`SELECT id, status FROM subscriptions WHERE user_id = $1 AND status = 'ACTIVE'`,
|
||||||
|
[userId]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (existingSub.rows.length > 0) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
error:
|
||||||
|
"You already have an active subscription. Please cancel your current subscription before purchasing a new one.",
|
||||||
|
},
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (dbError) {
|
||||||
|
console.error("Database error checking existing subscription:", dbError);
|
||||||
|
// Continue with payment creation even if check fails
|
||||||
|
} finally {
|
||||||
|
client.release();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the base URL
|
||||||
|
const origin = request.headers.get("origin") || "http://localhost:3000";
|
||||||
|
|
||||||
|
// Create checkout session
|
||||||
|
const session = await stripe.checkout.sessions.create({
|
||||||
|
mode: "subscription",
|
||||||
|
payment_method_types: ["card"],
|
||||||
|
line_items: [
|
||||||
|
{
|
||||||
|
price_data: {
|
||||||
|
currency: "usd",
|
||||||
|
product_data: {
|
||||||
|
name: selectedTier.name,
|
||||||
|
description: `${selectedTier.storageLimit}GB storage limit`,
|
||||||
|
},
|
||||||
|
unit_amount: formatAmountForStripe(selectedTier.amount),
|
||||||
|
recurring: {
|
||||||
|
interval: "month",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
quantity: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
success_url: `${origin}/?success=true&session_id={CHECKOUT_SESSION_ID}`,
|
||||||
|
cancel_url: `${origin}/?canceled=true`,
|
||||||
|
metadata: {
|
||||||
|
userId: userId,
|
||||||
|
tier: tier,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ sessionId: session.id, url: session.url });
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Error creating checkout session:", error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error.message || "Failed to create checkout session" },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { getPool } from "@/lib/database";
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
// Get user ID from auth token or session
|
||||||
|
const userId = request.headers.get("user-id");
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "User not authenticated" },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pool = getPool();
|
||||||
|
const client = await pool.connect();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Cancel the subscription
|
||||||
|
await client.query(
|
||||||
|
`UPDATE subscriptions
|
||||||
|
SET status = 'CANCELLED', updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE user_id = $1 AND status = 'ACTIVE'`,
|
||||||
|
[userId]
|
||||||
|
);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: "Subscription cancelled",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
client.release();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error cancelling subscription:", error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Failed to cancel subscription" },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { getPool } from "@/lib/database";
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
// Get user ID from auth token or session
|
||||||
|
const userId = request.headers.get("user-id");
|
||||||
|
|
||||||
|
if (!userId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "User not authenticated" },
|
||||||
|
{ status: 401 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pool = getPool();
|
||||||
|
const client = await pool.connect();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Try to get active subscription first, otherwise get the most recent one
|
||||||
|
const result = await client.query(
|
||||||
|
`SELECT id, tier, status, storage_limit_gb, current_usage_gb, created_at, updated_at
|
||||||
|
FROM subscriptions
|
||||||
|
WHERE user_id = $1
|
||||||
|
ORDER BY
|
||||||
|
CASE WHEN status = 'ACTIVE' THEN 0 ELSE 1 END,
|
||||||
|
created_at DESC
|
||||||
|
LIMIT 1`,
|
||||||
|
[userId]
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`Found ${result.rows.length} subscriptions for user ${userId}`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.rows.length === 0) {
|
||||||
|
console.log("No subscriptions found");
|
||||||
|
return NextResponse.json({ subscription: null });
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Returning subscription:", result.rows[0]);
|
||||||
|
return NextResponse.json({ subscription: result.rows[0] });
|
||||||
|
} finally {
|
||||||
|
client.release();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching subscription:", error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Failed to fetch subscription" },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { stripe } from "@/lib/stripe";
|
||||||
|
import { getPool } from "@/lib/database";
|
||||||
|
import Stripe from "stripe";
|
||||||
|
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
const body = await request.text();
|
||||||
|
const signature = request.headers.get("stripe-signature");
|
||||||
|
|
||||||
|
if (!signature) {
|
||||||
|
return NextResponse.json({ error: "No signature" }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
|
||||||
|
if (!webhookSecret) {
|
||||||
|
console.error("Missing STRIPE_WEBHOOK_SECRET");
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Webhook secret not configured" },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let event: Stripe.Event;
|
||||||
|
|
||||||
|
try {
|
||||||
|
event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error(`Webhook signature verification failed: ${err.message}`);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: `Webhook Error: ${err.message}` },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pool = getPool();
|
||||||
|
const client = await pool.connect();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Handle different event types
|
||||||
|
switch (event.type) {
|
||||||
|
case "checkout.session.completed": {
|
||||||
|
const session = event.data.object as Stripe.Checkout.Session;
|
||||||
|
const userId = session.metadata?.userId;
|
||||||
|
const tier = session.metadata?.tier;
|
||||||
|
|
||||||
|
console.log("Webhook received - userId:", userId, "tier:", tier);
|
||||||
|
|
||||||
|
if (!userId || !tier) {
|
||||||
|
console.error("Missing user or tier in session metadata");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if subscription exists
|
||||||
|
const existing = await client.query(
|
||||||
|
`SELECT id FROM subscriptions WHERE user_id = $1`,
|
||||||
|
[userId]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Normalize tier name
|
||||||
|
const tierName = tier.toUpperCase();
|
||||||
|
console.log("Processing tier:", tierName);
|
||||||
|
const storageLimit =
|
||||||
|
tierName === "BASIC"
|
||||||
|
? 5
|
||||||
|
: tierName === "STANDARD"
|
||||||
|
? 20
|
||||||
|
: tierName === "PREMIUM"
|
||||||
|
? 100
|
||||||
|
: 5;
|
||||||
|
|
||||||
|
if (existing.rows.length > 0) {
|
||||||
|
// Update existing subscription
|
||||||
|
await client.query(
|
||||||
|
`UPDATE subscriptions
|
||||||
|
SET status = 'ACTIVE', tier = $1, storage_limit_gb = $2, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE user_id = $3`,
|
||||||
|
[tierName, storageLimit, userId]
|
||||||
|
);
|
||||||
|
console.log(`Subscription updated for user ${userId}`);
|
||||||
|
} else {
|
||||||
|
// Create new subscription
|
||||||
|
await client.query(
|
||||||
|
`INSERT INTO subscriptions (user_id, tier, status, storage_limit_gb, current_usage_gb)
|
||||||
|
VALUES ($1, $2, 'ACTIVE', $3, 0)`,
|
||||||
|
[userId, tierName, storageLimit]
|
||||||
|
);
|
||||||
|
console.log(`Subscription created for user ${userId}`);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "customer.subscription.deleted":
|
||||||
|
case "customer.subscription.updated": {
|
||||||
|
const subscription = event.data.object as Stripe.Subscription;
|
||||||
|
const customerId = subscription.customer as string;
|
||||||
|
|
||||||
|
// Find user by customer ID and update subscription status
|
||||||
|
const status = subscription.status === "active" ? "ACTIVE" : "INACTIVE";
|
||||||
|
await client.query(
|
||||||
|
`UPDATE subscriptions
|
||||||
|
SET status = $1, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE stripe_customer_id = $2`,
|
||||||
|
[status, customerId]
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(`Subscription ${event.type} for customer ${customerId}`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
console.log(`Unhandled event type: ${event.type}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({ received: true });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error processing webhook:", error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Webhook processing failed" },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
client.release();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,303 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useAuth } from "@/lib/auth-context";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
interface Subscription {
|
||||||
|
id: string;
|
||||||
|
tier: string;
|
||||||
|
status: string;
|
||||||
|
storage_limit_gb: number;
|
||||||
|
current_usage_gb: number;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SubscriptionsPage() {
|
||||||
|
const { isAuthenticated, user, logout, token } = useAuth();
|
||||||
|
const router = useRouter();
|
||||||
|
const [subscription, setSubscription] = useState<Subscription | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [authInitialized, setAuthInitialized] = useState(false);
|
||||||
|
|
||||||
|
// Wait for auth to initialize from localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
// Small delay to let auth context initialize
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAuthInitialized(true);
|
||||||
|
}, 100);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!authInitialized) return;
|
||||||
|
|
||||||
|
// Check if user is authenticated
|
||||||
|
if (user && token) {
|
||||||
|
// User is authenticated, fetch subscription
|
||||||
|
fetchSubscription();
|
||||||
|
} else {
|
||||||
|
// Not authenticated, redirect to login
|
||||||
|
router.push("/login?redirect=/subscriptions");
|
||||||
|
}
|
||||||
|
}, [authInitialized, user, token, router]);
|
||||||
|
|
||||||
|
const fetchSubscription = async () => {
|
||||||
|
if (!user?.id) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/subscriptions/me", {
|
||||||
|
headers: {
|
||||||
|
"user-id": user.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setSubscription(data.subscription);
|
||||||
|
} else {
|
||||||
|
setError("Failed to fetch subscription data");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError("Error loading subscription");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelSubscription = async () => {
|
||||||
|
if (!confirm("Are you sure you want to cancel your subscription?")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/subscriptions/cancel", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"user-id": user?.id || "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert("Subscription cancelled successfully");
|
||||||
|
fetchSubscription(); // Refresh data
|
||||||
|
} else {
|
||||||
|
const data = await response.json();
|
||||||
|
alert(data.error || "Failed to cancel subscription");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
alert("Error cancelling subscription");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Don't show content until auth has initialized
|
||||||
|
if (!authInitialized) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return null; // Will redirect to login
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
Loading subscription...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center text-red-500">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTierDisplayName = (tier: string) => {
|
||||||
|
const tierMap: Record<string, string> = {
|
||||||
|
BASIC: "Basic",
|
||||||
|
STANDARD: "Standard",
|
||||||
|
PREMIUM: "Premium",
|
||||||
|
};
|
||||||
|
return tierMap[tier.toUpperCase()] || tier;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTierPrice = (tier: string) => {
|
||||||
|
const priceMap: Record<string, string> = {
|
||||||
|
BASIC: "$9.99",
|
||||||
|
STANDARD: "$19.99",
|
||||||
|
PREMIUM: "$39.99",
|
||||||
|
};
|
||||||
|
return priceMap[tier.toUpperCase()] || "N/A";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 py-12">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||||
|
My Subscriptions
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Manage your subscription and billing information
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!subscription ? (
|
||||||
|
// No subscription
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-8 text-center">
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-3xl">📦</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||||
|
No Active Subscription
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
You don't have an active subscription. Subscribe to a plan to
|
||||||
|
start using our services.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md"
|
||||||
|
>
|
||||||
|
Browse Plans
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// Active subscription
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Subscription Card */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-8 border-2 border-gray-200">
|
||||||
|
<div className="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||||
|
{getTierDisplayName(subscription.tier)} Plan
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600">Current subscription details</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span
|
||||||
|
className={`px-3 py-1 rounded-full text-sm font-semibold ${
|
||||||
|
subscription.status === "ACTIVE"
|
||||||
|
? "bg-green-100 text-green-800"
|
||||||
|
: "bg-red-100 text-red-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subscription.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subscription Details */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Plan</p>
|
||||||
|
<p className="text-lg font-semibold text-gray-900">
|
||||||
|
{getTierDisplayName(subscription.tier)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Monthly Price</p>
|
||||||
|
<p className="text-lg font-semibold text-gray-900">
|
||||||
|
{getTierPrice(subscription.tier)}/month
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Storage Limit</p>
|
||||||
|
<p className="text-lg font-semibold text-gray-900">
|
||||||
|
{subscription.storage_limit_gb} GB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Current Usage</p>
|
||||||
|
<p className="text-lg font-semibold text-gray-900">
|
||||||
|
{parseFloat(subscription.current_usage_gb).toFixed(2)} GB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Storage Usage Bar */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<p className="text-sm text-gray-500 mb-2">Storage Usage</p>
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-4">
|
||||||
|
<div
|
||||||
|
className="bg-orange-500 h-4 rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(
|
||||||
|
(parseFloat(subscription.current_usage_gb) /
|
||||||
|
subscription.storage_limit_gb) *
|
||||||
|
100,
|
||||||
|
100
|
||||||
|
)}%`,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-2">
|
||||||
|
{parseFloat(subscription.current_usage_gb).toFixed(2)} GB of{" "}
|
||||||
|
{subscription.storage_limit_gb} GB used
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Billing Info */}
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Member Since</p>
|
||||||
|
<p className="text-gray-900">
|
||||||
|
{new Date(subscription.created_at).toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
{subscription.status === "ACTIVE" && (
|
||||||
|
<div className="mt-6 pt-6 border-t">
|
||||||
|
<Button
|
||||||
|
onClick={handleCancelSubscription}
|
||||||
|
variant="outline"
|
||||||
|
className="border-red-300 text-red-600 hover:bg-red-50 hover:border-red-400"
|
||||||
|
>
|
||||||
|
Cancel Subscription
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upgrade/Downgrade Options */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
Change Plan
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Looking to upgrade or downgrade? Cancel your current
|
||||||
|
subscription and choose a new plan.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md"
|
||||||
|
>
|
||||||
|
Browse All Plans
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useAuth } from "@/lib/auth-context";
|
||||||
|
import { useState } from "react";
|
||||||
|
import UploadArea from "@/components/UploadArea";
|
||||||
|
|
||||||
|
export default function UploadPage() {
|
||||||
|
const { isAuthenticated, user } = useAuth();
|
||||||
|
const router = useRouter();
|
||||||
|
const [userSubscription, setUserSubscription] = useState<any>(null);
|
||||||
|
const [authInitialized, setAuthInitialized] = useState(false);
|
||||||
|
|
||||||
|
// Wait for auth to initialize from localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setAuthInitialized(true);
|
||||||
|
}, 100);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Check authentication and fetch subscription
|
||||||
|
useEffect(() => {
|
||||||
|
if (!authInitialized) return;
|
||||||
|
|
||||||
|
if (!isAuthenticated || !user) {
|
||||||
|
router.push("/login?redirect=/upload");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch user subscription
|
||||||
|
const fetchSubscription = async () => {
|
||||||
|
if (!user?.id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/subscriptions/me", {
|
||||||
|
headers: {
|
||||||
|
"user-id": user.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setUserSubscription(data.subscription);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching subscription:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSubscription();
|
||||||
|
}, [authInitialized, isAuthenticated, user, router]);
|
||||||
|
|
||||||
|
// Show loading while auth initializes
|
||||||
|
if (!authInitialized || !isAuthenticated) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no subscription found after loading, treat it as no subscription
|
||||||
|
// Don't block the page from showing
|
||||||
|
const hasActiveSubscription =
|
||||||
|
userSubscription && userSubscription.status === "ACTIVE";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 py-12">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||||
|
Upload Files
|
||||||
|
</h1>
|
||||||
|
{/* <p className="text-gray-600">
|
||||||
|
Upload your .blend files to start rendering
|
||||||
|
</p> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subscription Warning */}
|
||||||
|
{!hasActiveSubscription && (
|
||||||
|
<div className="bg-red-50 border-2 border-red-500 rounded-lg p-6 mb-8">
|
||||||
|
<p className="text-red-800 font-semibold text-lg">
|
||||||
|
Subscribe to use our services
|
||||||
|
</p>
|
||||||
|
<p className="text-red-700 text-sm mt-2">
|
||||||
|
You need an active subscription to upload files. Subscribe to a
|
||||||
|
plan to continue.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className="mt-4 bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-md text-sm font-medium"
|
||||||
|
>
|
||||||
|
Browse Plans
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subscription Info - Only show if active */}
|
||||||
|
{hasActiveSubscription && userSubscription && (
|
||||||
|
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-2">
|
||||||
|
Your {userSubscription.tier} Plan
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
Storage:{" "}
|
||||||
|
{parseFloat(userSubscription.current_usage_gb).toFixed(2)} GB /{" "}
|
||||||
|
{userSubscription.storage_limit_gb} GB used
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 w-full bg-gray-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-orange-500 h-2 rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(
|
||||||
|
(parseFloat(userSubscription.current_usage_gb) /
|
||||||
|
userSubscription.storage_limit_gb) *
|
||||||
|
100,
|
||||||
|
100
|
||||||
|
)}%`,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Upload Area */}
|
||||||
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
|
Start by uploading at least one .blend file
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
!hasActiveSubscription ? "pointer-events-none opacity-50" : ""
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<UploadArea className="w-full shadow-sm" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useAuth } from "@/lib/auth-context";
|
||||||
|
|
||||||
|
interface StripePaymentButtonProps {
|
||||||
|
tier: "basic" | "pro" | "enterprise";
|
||||||
|
amount: number;
|
||||||
|
storageLimit: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StripePaymentButton({
|
||||||
|
tier,
|
||||||
|
amount,
|
||||||
|
storageLimit,
|
||||||
|
}: StripePaymentButtonProps) {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const { user } = useAuth();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handlePayment = async () => {
|
||||||
|
if (!user) {
|
||||||
|
// Redirect to login page
|
||||||
|
router.push("/login?redirect=/pricing");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/create-checkout-session", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
tier,
|
||||||
|
userId: user.id,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if response is JSON before parsing
|
||||||
|
const contentType = response.headers.get("content-type");
|
||||||
|
if (!contentType || !contentType.includes("application/json")) {
|
||||||
|
throw new Error(
|
||||||
|
"Invalid response from server. Please check your Stripe configuration."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(data.error || "Failed to create checkout session");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to Stripe Checkout
|
||||||
|
if (data.url) {
|
||||||
|
window.location.href = data.url;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Payment error:", error);
|
||||||
|
alert("Failed to start payment process. Please try again.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={handlePayment}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md transition-colors"
|
||||||
|
>
|
||||||
|
{loading ? "Processing..." : `Subscribe - $${amount}/month`}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import Stripe from "stripe";
|
||||||
|
|
||||||
|
// Initialize Stripe with your secret key from environment variables
|
||||||
|
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
|
||||||
|
apiVersion: "2024-11-20.acacia",
|
||||||
|
typescript: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Helper function to format amount for Stripe (convert to cents)
|
||||||
|
export function formatAmountForStripe(
|
||||||
|
amount: number,
|
||||||
|
currency: string = "usd"
|
||||||
|
): number {
|
||||||
|
return Math.round(amount * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to format amount from Stripe (convert from cents)
|
||||||
|
export function formatAmountFromStripe(
|
||||||
|
amount: number,
|
||||||
|
currency: string = "usd"
|
||||||
|
): number {
|
||||||
|
return Math.round(amount) / 100;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 197 KiB |
Loading…
Reference in new issue