241 lines
8.8 KiB
TypeScript
241 lines
8.8 KiB
TypeScript
|
import { redirect } from "next/navigation"
|
||
|
|
import { and, eq, sql } from "drizzle-orm"
|
||
|
|
import { db } from "@/lib/db"
|
||
|
|
import { profiles, properties, tenants } from "@/lib/db/schema"
|
||
|
|
import { getSessionUser } from "@/lib/session"
|
||
|
|
import { CheckoutButton } from "@/components/forms/checkout-button"
|
||
|
|
import { PortalButton } from "@/components/forms/portal-button"
|
||
|
|
import { getPlanLabel, PLAN_LIMITS } from "@/lib/stripe/plans"
|
||
|
|
import { Check } from "lucide-react"
|
||
|
|
import type { Plan } from "@/types"
|
||
|
|
|
||
|
|
export const metadata = { title: "Billing" }
|
||
|
|
|
||
|
|
const PLANS = [
|
||
|
|
{
|
||
|
|
key: "starter" as Plan,
|
||
|
|
name: "Starter",
|
||
|
|
price: "$0",
|
||
|
|
interval: "forever",
|
||
|
|
description: "For landlords just getting started",
|
||
|
|
features: ["1 property", "3 tenants", "Maintenance tracking", "Rent tracker"],
|
||
|
|
cta: "Current plan",
|
||
|
|
highlight: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "pro" as Plan,
|
||
|
|
name: "Pro",
|
||
|
|
price: "$29",
|
||
|
|
interval: "/month",
|
||
|
|
description: "For active landlords growing their portfolio",
|
||
|
|
features: ["10 properties", "Unlimited tenants", "50 AI calls/month", "5GB storage", "Email notifications", "Stripe rent collection"],
|
||
|
|
cta: "Upgrade to Pro",
|
||
|
|
highlight: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "landlord" as Plan,
|
||
|
|
name: "Landlord",
|
||
|
|
price: "$59",
|
||
|
|
interval: "/month",
|
||
|
|
description: "For property managers at scale",
|
||
|
|
features: ["Unlimited properties", "Unlimited tenants", "200 AI calls/month", "25GB storage", "Team access", "White-label"],
|
||
|
|
cta: "Upgrade to Landlord",
|
||
|
|
highlight: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "lifetime" as Plan,
|
||
|
|
name: "Lifetime",
|
||
|
|
price: "$199",
|
||
|
|
interval: "one-time",
|
||
|
|
description: "Everything in Landlord, forever",
|
||
|
|
features: ["Everything in Landlord", "Lifetime updates", "Priority support", "Flippa-ready asset"],
|
||
|
|
cta: "Get Lifetime Deal",
|
||
|
|
highlight: false,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
export default async function BillingPage({
|
||
|
|
searchParams,
|
||
|
|
}: {
|
||
|
|
searchParams: Promise<{ success?: string; canceled?: string }>
|
||
|
|
}) {
|
||
|
|
const user = await getSessionUser()
|
||
|
|
if (!user) redirect("/login")
|
||
|
|
|
||
|
|
const profile = await db.query.profiles.findFirst({
|
||
|
|
where: eq(profiles.id, user.id),
|
||
|
|
columns: {
|
||
|
|
plan: true,
|
||
|
|
subscription_status: true,
|
||
|
|
plan_expires_at: true,
|
||
|
|
stripe_customer_id: true,
|
||
|
|
stripe_subscription_id: true,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
const params = await searchParams
|
||
|
|
const currentPlan = (profile?.plan ?? "starter") as Plan
|
||
|
|
const hasStripeAccount = !!profile?.stripe_customer_id
|
||
|
|
const limits = PLAN_LIMITS[currentPlan]
|
||
|
|
|
||
|
|
const [[{ count: propertiesUsed }], [{ count: tenantsUsed }]] = await Promise.all([
|
||
|
|
db
|
||
|
|
.select({ count: sql<number>`count(*)::int` })
|
||
|
|
.from(properties)
|
||
|
|
.where(eq(properties.user_id, user.id)),
|
||
|
|
db
|
||
|
|
.select({ count: sql<number>`count(*)::int` })
|
||
|
|
.from(tenants)
|
||
|
|
.where(and(eq(tenants.user_id, user.id), eq(tenants.status, "active"))),
|
||
|
|
])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-5xl space-y-8">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-lg font-semibold text-white">Billing</h2>
|
||
|
|
<p className="text-sm text-white/40">Manage your subscription and plan</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{params.success && (
|
||
|
|
<div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-5 py-4 text-sm text-emerald-400">
|
||
|
|
Payment successful! Your plan has been upgraded.
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{params.canceled && (
|
||
|
|
<div className="rounded-xl border border-amber-500/20 bg-amber-500/10 px-5 py-4 text-sm text-amber-400">
|
||
|
|
Checkout canceled — no charge was made.
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Current plan */}
|
||
|
|
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-white/40">Current Plan</p>
|
||
|
|
<p className="mt-1 text-xl font-bold text-white">{getPlanLabel(currentPlan)}</p>
|
||
|
|
{profile?.subscription_status && (
|
||
|
|
<p className="mt-0.5 text-xs text-white/40 capitalize">Status: {profile.subscription_status}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{hasStripeAccount && currentPlan !== "starter" && currentPlan !== "lifetime" && (
|
||
|
|
<PortalButton />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Plans grid */}
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
{PLANS.map((plan) => {
|
||
|
|
const isCurrent = currentPlan === plan.key
|
||
|
|
const isDowngrade = (
|
||
|
|
currentPlan === "landlord" && (plan.key === "pro" || plan.key === "starter") ||
|
||
|
|
currentPlan === "lifetime"
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={plan.key}
|
||
|
|
className={`relative flex flex-col rounded-xl border p-5 ${
|
||
|
|
plan.highlight
|
||
|
|
? "border-indigo-500/40 bg-indigo-600/5"
|
||
|
|
: "border-white/[0.06] bg-[#16161f]"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{plan.highlight && (
|
||
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
|
|
<span className="rounded-full bg-indigo-600 px-3 py-0.5 text-xs font-semibold text-white">
|
||
|
|
Most Popular
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-semibold text-white">{plan.name}</p>
|
||
|
|
<div className="mt-1 flex items-baseline gap-1">
|
||
|
|
<span className="text-2xl font-bold text-white">{plan.price}</span>
|
||
|
|
<span className="text-xs text-white/40">{plan.interval}</span>
|
||
|
|
</div>
|
||
|
|
<p className="mt-1 text-xs text-white/40">{plan.description}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className="mt-4 flex-1 space-y-2">
|
||
|
|
{plan.features.map((f) => (
|
||
|
|
<li key={f} className="flex items-center gap-2 text-xs text-white/60">
|
||
|
|
<Check className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
|
||
|
|
{f}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div className="mt-5">
|
||
|
|
{isCurrent ? (
|
||
|
|
<div className="w-full rounded-lg border border-white/10 py-2 text-center text-xs font-medium text-white/40">
|
||
|
|
Current Plan
|
||
|
|
</div>
|
||
|
|
) : plan.key === "starter" || isDowngrade ? (
|
||
|
|
<div className="w-full rounded-lg border border-white/10 py-2 text-center text-xs font-medium text-white/30">
|
||
|
|
{plan.key === "starter" ? "Free" : "Downgrade via portal"}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<CheckoutButton plan={plan.key} label={plan.cta} highlight={plan.highlight} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Usage overview */}
|
||
|
|
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-5">
|
||
|
|
<h3 className="text-sm font-semibold text-white">Usage</h3>
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
label: "Properties",
|
||
|
|
used: propertiesUsed ?? 0,
|
||
|
|
max: limits.maxProperties,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "Active Tenants",
|
||
|
|
used: tenantsUsed ?? 0,
|
||
|
|
max: limits.maxTenants,
|
||
|
|
},
|
||
|
|
].map(({ label, used, max }) => {
|
||
|
|
const unlimited = max === Infinity
|
||
|
|
const pct = unlimited ? 0 : Math.min(100, Math.round((used / max) * 100))
|
||
|
|
const nearLimit = !unlimited && pct >= 80
|
||
|
|
return (
|
||
|
|
<div key={label}>
|
||
|
|
<div className="mb-1.5 flex items-center justify-between text-xs">
|
||
|
|
<span className="text-white/60">{label}</span>
|
||
|
|
<span className={nearLimit ? "text-amber-400 font-medium" : "text-white/40"}>
|
||
|
|
{used} / {unlimited ? "Unlimited" : max}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
{!unlimited && (
|
||
|
|
<div className="h-1.5 w-full rounded-full bg-white/[0.06]">
|
||
|
|
<div
|
||
|
|
className={`h-full rounded-full transition-all ${
|
||
|
|
pct >= 100 ? "bg-red-500" : pct >= 80 ? "bg-amber-500" : "bg-indigo-500"
|
||
|
|
}`}
|
||
|
|
style={{ width: `${pct}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
<div className="grid grid-cols-2 gap-4 pt-1 sm:grid-cols-2 border-t border-white/[0.06]">
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-white/40">AI Calls / mo</p>
|
||
|
|
<p className="mt-1 text-sm font-semibold text-white">{limits.maxAiCalls === 0 ? "Not included" : limits.maxAiCalls}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-xs text-white/40">Storage</p>
|
||
|
|
<p className="mt-1 text-sm font-semibold text-white">{limits.maxStorageMB >= 1024 ? `${limits.maxStorageMB / 1024}GB` : `${limits.maxStorageMB}MB`}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|