feat(billing): payment infrastructure pre-prep
db: add plan, planExpiresAt, planProvider to tenant_settings (Appwrite MCP) - schema.ts: TenantPlan type, TenantSettings plan fields - subscription-types.ts: Emlak plan catalog (Free / Pro 499₺/ay) - plan-limits.ts: resource limits (properties/customers/members/presentations) + getPlanUsage, requirePlanCapacity, PlanLimitError helpers - subscription-actions.ts: startCheckoutAction (Polar→Shopier→mock fallback), activatePlanInDb / deactivatePlanInDb for webhook handlers, downgradeToFreeAction, getCurrentPlanAction - /api/payments/polar/callback: verify webhook → activatePlanInDb on order/subscription events - /api/payments/shopier/callback: verify HMAC → activate on fulfilled+paid (tenant email-matching TODO pending Shopier metadata support) - /settings/billing: CurrentPlanCard with usage progress bars + UpgradeSection - sidebar: Plan & Faturalama nav item - PlanLimitDialog: Emlak-specific feature list
This commit is contained in:
egecankomur
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { Crown, Zap } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import type { PlanUsage } from "@/lib/appwrite/plan-limits";
|
||||
import type { TenantPlan } from "@/lib/appwrite/schema";
|
||||
import { RESOURCE_LABELS } from "@/lib/appwrite/plan-limits";
|
||||
|
||||
const LIMIT_LABELS: Record<string, string> = {
|
||||
properties: "İlan",
|
||||
customers: "Müşteri",
|
||||
members: "Ekip üyesi",
|
||||
presentations: "Sunum",
|
||||
};
|
||||
|
||||
export function CurrentPlanCard({
|
||||
plan,
|
||||
expiresAt,
|
||||
usage,
|
||||
}: {
|
||||
plan: TenantPlan;
|
||||
expiresAt: string | null;
|
||||
usage: PlanUsage["usage"];
|
||||
}) {
|
||||
const isPro = plan === "pro";
|
||||
const expiryDate = expiresAt ? new Date(expiresAt).toLocaleDateString("tr-TR") : null;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Mevcut Plan</CardTitle>
|
||||
<Badge
|
||||
variant={isPro ? "default" : "secondary"}
|
||||
className="gap-1"
|
||||
>
|
||||
{isPro ? <Crown className="h-3 w-3" /> : <Zap className="h-3 w-3" />}
|
||||
{isPro ? "Pro" : "Ücretsiz"}
|
||||
</Badge>
|
||||
</div>
|
||||
{isPro && expiryDate && (
|
||||
<p className="text-xs text-muted-foreground">{expiryDate} tarihine kadar geçerli</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{(Object.entries(usage) as [keyof typeof usage, PlanUsage["usage"][keyof PlanUsage["usage"]]][]).map(
|
||||
([resource, { used, limit, reached }]) => {
|
||||
const isUnlimited = limit === Number.POSITIVE_INFINITY;
|
||||
const pct = isUnlimited ? 0 : Math.min(100, (used / limit) * 100);
|
||||
return (
|
||||
<div key={resource} className="space-y-1">
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>{LIMIT_LABELS[resource] ?? RESOURCE_LABELS[resource as keyof typeof RESOURCE_LABELS]}</span>
|
||||
<span className={reached && !isUnlimited ? "text-destructive font-medium" : ""}>
|
||||
{isUnlimited ? `${used} / ∞` : `${used} / ${limit}`}
|
||||
</span>
|
||||
</div>
|
||||
{!isUnlimited && (
|
||||
<Progress
|
||||
value={pct}
|
||||
className={`h-1.5 ${reached ? "[&>div]:bg-destructive" : ""}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Crown, Check, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { startCheckoutAction, downgradeToFreeAction } from "@/lib/appwrite/subscription-actions";
|
||||
import { PLAN_CATALOG } from "@/lib/appwrite/subscription-types";
|
||||
import type { TenantPlan } from "@/lib/appwrite/schema";
|
||||
|
||||
export function UpgradeSection({ currentPlan }: { currentPlan: TenantPlan }) {
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
const pro = PLAN_CATALOG.pro;
|
||||
const isPro = currentPlan === "pro";
|
||||
|
||||
async function handleUpgrade(formData: FormData) {
|
||||
try {
|
||||
await startCheckoutAction(formData);
|
||||
} catch (e) {
|
||||
if (e instanceof Error && e.message.includes("NEXT_REDIRECT")) throw e;
|
||||
toast.error("Ödeme başlatılamadı. Tekrar deneyin.");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDowngrade() {
|
||||
const fd = new FormData();
|
||||
try {
|
||||
await downgradeToFreeAction();
|
||||
} catch (e) {
|
||||
if (e instanceof Error && e.message.includes("NEXT_REDIRECT")) throw e;
|
||||
void fd;
|
||||
toast.error("İşlem başarısız. Tekrar deneyin.");
|
||||
}
|
||||
}
|
||||
|
||||
if (isPro) {
|
||||
return (
|
||||
<Card className="border-primary/30 bg-primary/5">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Crown className="h-5 w-5 text-primary" />
|
||||
<CardTitle className="text-base">Pro Plan Aktif</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Tüm özelliklere sınırsız erişiminiz var.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form action={handleDowngrade}>
|
||||
<Button type="submit" variant="outline" size="sm" className="text-muted-foreground">
|
||||
Ücretsiz plana geç
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-primary/30">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-base">{pro.name} Plana Geç</CardTitle>
|
||||
<Badge variant="secondary" className="text-xs">Önerilen</Badge>
|
||||
</div>
|
||||
<CardDescription>{pro.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ul className="space-y-1.5">
|
||||
{pro.features.map((f) => (
|
||||
<li key={f} className="flex items-center gap-2 text-sm">
|
||||
<Check className="h-3.5 w-3.5 text-primary shrink-0" />
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold">{pro.price.toLocaleString("tr-TR")}</span>
|
||||
<span className="text-muted-foreground text-sm">₺ / ay</span>
|
||||
</div>
|
||||
|
||||
<form ref={formRef} action={handleUpgrade}>
|
||||
<input type="hidden" name="plan" value="pro" />
|
||||
<Button type="submit" className="w-full gap-2 cursor-pointer">
|
||||
<Crown className="h-4 w-4" />
|
||||
Pro'ya Geç
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import { CheckCircle2, XCircle } from "lucide-react";
|
||||
|
||||
import { requireTenant } from "@/lib/appwrite/tenant-guard";
|
||||
import { getEffectivePlan, getPlanUsage } from "@/lib/appwrite/plan-limits";
|
||||
import { CurrentPlanCard } from "./components/current-plan-card";
|
||||
import { UpgradeSection } from "./components/upgrade-section";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "KovakEmlak — Plan & Faturalama",
|
||||
};
|
||||
|
||||
export default async function BillingPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<Record<string, string>>;
|
||||
}) {
|
||||
let ctx;
|
||||
try {
|
||||
ctx = await requireTenant();
|
||||
} catch {
|
||||
redirect("/onboarding");
|
||||
}
|
||||
|
||||
const params = await searchParams;
|
||||
const upgraded = params.upgraded === "1";
|
||||
const downgraded = params.downgraded === "1";
|
||||
|
||||
const plan = getEffectivePlan(ctx);
|
||||
const { usage } = await getPlanUsage(ctx);
|
||||
|
||||
const officeName = ctx.settings?.officeName ?? "Ofis";
|
||||
|
||||
return (
|
||||
<div className="flex-1 space-y-6 px-6 pt-0">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-muted-foreground text-sm">{officeName}</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Plan & Faturalama</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Mevcut planınızı görüntüleyin ve yönetin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{upgraded && (
|
||||
<div className="flex items-center gap-2 rounded-md border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-700 dark:text-green-400">
|
||||
<CheckCircle2 className="h-4 w-4 shrink-0" />
|
||||
Pro plana başarıyla geçtiniz. İyi kullanımlar!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{downgraded && (
|
||||
<div className="flex items-center gap-2 rounded-md border border-muted bg-muted/40 px-4 py-3 text-sm text-muted-foreground">
|
||||
<XCircle className="h-4 w-4 shrink-0" />
|
||||
Ücretsiz plana geçildi.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<CurrentPlanCard
|
||||
plan={plan}
|
||||
expiresAt={ctx.settings?.planExpiresAt ?? null}
|
||||
usage={usage}
|
||||
/>
|
||||
<UpgradeSection currentPlan={plan} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user