npx create-next-app@latest kofi-clone --typescript --tailwind --app --turbopack --eslint
cd kofi-clonenpm install @prisma/client @whop/checkout @whop/embedded-components-react-js @whop/embedded-components-vanilla-js @whop/react @whop/sdk iron-session sharp zod
npm install -D prisma @vercel/confignpx prisma init --datasource-provider postgresql{
"name": "kofi-clone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 3005",
"build": "prisma generate && next build",
"start": "next start -p 3005",
"lint": "eslint",
"postinstall": "prisma generate",
"db:migrate": "prisma migrate dev",
"db:push": "prisma db push",
"db:studio": "prisma studio"
},
"dependencies": {
"@prisma/client": "^5.22.0",
"@whop/checkout": "^0.0.54",
"@whop/embedded-components-react-js": "^1.0.0",
"@whop/embedded-components-vanilla-js": "^1.0.0",
"@whop/react": "^0.3.2",
"@whop/sdk": "^0.0.39",
"iron-session": "^8.0.4",
"next": "16.2.6",
"react": "19.2.4",
"react-dom": "19.2.4",
"sharp": "^0.35.1",
"zod": "^4.4.3"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@vercel/config": "^0.5.1",
"eslint": "^9",
"eslint-config-next": "16.2.6",
"prisma": "^5.22.0",
"tailwindcss": "^4",
"typescript": "^5"
}
}DATABASE_URL="postgresql://USER:PASSWORD@HOST:5432/kofi_clone?schema=public"
SESSION_SECRET="a-random-string-at-least-32-characters-long"
NEXT_PUBLIC_APP_URL="http://localhost:3005"
WHOP_SANDBOX="true"
WHOP_PLATFORM_COMPANY_ID="biz_xxxxxxxxxxxxx"
NEXT_PUBLIC_WHOP_COMPANY_ID="biz_xxxxxxxxxxxxx"
WHOP_CLIENT_ID="app_xxxxxxxxxxxxx"
NEXT_PUBLIC_WHOP_APP_ID="app_xxxxxxxxxxxxx"
WHOP_CLIENT_SECRET="your-app-oauth-client-secret"
WHOP_COMPANY_API_KEY="apik_xxxxxxxxxxxxx"
WHOP_WEBHOOK_SECRET=""
NEXT_PUBLIC_PLATFORM_FEE_PERCENT="5"node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"import type { Metadata } from "next";
import { DM_Sans, Fraunces } from "next/font/google";
import { WhopApp } from "@whop/react/components";
import "./globals.css";
const dmSans = DM_Sans({
subsets: ["latin"],
variable: "--font-dm-sans",
weight: ["400", "500", "600", "700"],
});
const fraunces = Fraunces({
subsets: ["latin"],
variable: "--font-fraunces",
display: "swap",
});
export const metadata: Metadata = {
title: "Cuppa — get paid by the people who love your work",
description:
"Cuppa is where fans back the creators they love with tips, memberships, and shop purchases. Built with Next.js and Whop.",
};
const themeScript = `(function(){try{var t=localStorage.getItem('theme')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.toggle('dark',d);}catch(e){}})();`;
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html
lang="en"
className={`${dmSans.variable} ${fraunces.variable}`}
suppressHydrationWarning
>
<head>
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
</head>
<body className="min-h-screen antialiased">
<WhopApp accentColor="blue" grayColor="sand" appearance="inherit" hasBackground={false}>
{children}
</WhopApp>
</body>
</html>
);
}@layer theme, base, frosted, components, utilities;
@import "tailwindcss";
@import "@whop/react/styles.css" layer(frosted);
@custom-variant dark (&:where(.dark, .dark *));
:root {
--page: #f4efe7;
--surface: #ffffff;
--surface-2: #ede6dd;
--foreground: #192025;
--muted: #6a6a6a;
--line: #e6ddd0;
--brand: #467ceb;
--accent: #467ceb;
--accent-strong: #305de0;
--soft-blue: #c3d8fa;
--btn-primary: #202020;
--btn-primary-fg: #ffffff;
--btn-primary-hover: #2a2625;
--positive: #07b25d;
}
.dark {
--page: #192025;
--surface: #2b3a44;
--surface-2: #324653;
--foreground: #eef2f3;
--muted: #8eacba;
--line: #324653;
--brand: #72a4f2;
--accent: #72a4f2;
--accent-strong: #467ceb;
--soft-blue: #263da7;
--btn-primary: #edebea;
--btn-primary-fg: #192025;
--btn-primary-hover: #d4cfcd;
--positive: #10d773;
}
.fui-BaseButton {
border-radius: 9999px;
}
@theme inline {
--font-sans: var(--font-dm-sans), Nunito, ui-sans-serif, system-ui, sans-serif;
--font-display: var(--font-fraunces), Georgia, "Times New Roman", serif;
--color-page: var(--page);
--color-surface: var(--surface);
--color-surface-2: var(--surface-2);
--color-ink: var(--foreground);
--color-muted: var(--muted);
--color-line: var(--line);
--color-brand: var(--brand);
--color-soft-blue: var(--soft-blue);
--color-positive: var(--positive);
--radius-card: 18px;
}
@layer base {
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var(--page);
color: var(--foreground);
font-family: var(--font-dm-sans), Nunito, ui-sans-serif, system-ui, sans-serif;
}
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
label[for] {
cursor: pointer;
}
}
@layer components {
h1,
h2,
h3,
.font-display {
font-family: var(--font-fraunces), Georgia, "Times New Roman", serif;
font-weight: 800;
letter-spacing: -0.015em;
}
.kofi-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 9999px;
font-weight: 700;
line-height: 1;
padding: 0.625rem 1.25rem;
transition: filter 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
cursor: pointer;
}
.btn-pill:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-primary {
background: var(--btn-primary);
color: var(--btn-primary-fg);
}
.btn-primary:hover:not(:disabled) {
background: var(--btn-primary-hover);
}
.btn-soft {
background: var(--soft-blue);
color: var(--foreground);
}
.btn-soft:hover:not(:disabled) {
filter: brightness(0.97);
}
.btn-accent {
background: var(--accent);
color: #ffffff;
}
.btn-accent:hover:not(:disabled) {
filter: brightness(0.95);
}
.btn-secondary {
background: color-mix(in srgb, var(--muted) 22%, transparent);
color: var(--foreground);
}
.btn-secondary:hover:not(:disabled) {
background: color-mix(in srgb, var(--muted) 32%, transparent);
}
.btn-outline {
background: transparent;
border: 1px solid var(--line);
color: var(--foreground);
}
.text-muted {
color: var(--muted);
}
}import type { NextConfig } from "next";
const csp = [
"default-src 'self'",
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https://js.whop.com https://*.whop.com",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: blob: https:",
"font-src 'self' data: https:",
"frame-src https://*.whop.com",
"connect-src 'self' https://*.whop.com wss://*.whop.com",
"frame-ancestors 'self'",
].join("; ");
const nextConfig: NextConfig = {
turbopack: {
root: __dirname,
},
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "Content-Security-Policy", value: csp }],
},
];
},
};
export default nextConfig;npm run devgit init
git add .
git commit -m "Scaffold Cuppa: Next.js + Tailwind + DM Sans"
git branch -M main
git remote add origin https://github.com/your-username/kofi-clone.git
git push -u origin mainnpm i -g vercel
vercel linkimport type { VercelConfig } from "@vercel/config/v1";
export const config: VercelConfig = {
framework: "nextjs",
buildCommand: "npm run build",
};SESSION_SECRET
WHOP_SANDBOX
WHOP_PLATFORM_COMPANY_ID
NEXT_PUBLIC_WHOP_COMPANY_ID
WHOP_CLIENT_ID
NEXT_PUBLIC_WHOP_APP_ID
WHOP_CLIENT_SECRET
WHOP_COMPANY_API_KEY
WHOP_WEBHOOK_SECRET
NEXT_PUBLIC_PLATFORM_FEE_PERCENTvercel env pull .envconst csp = [
"default-src 'self'",
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https://js.whop.com https://*.whop.com",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: blob: https:",
"font-src 'self' data: https:",
"frame-src https://*.whop.com",
"connect-src 'self' https://*.whop.com wss://*.whop.com",
"frame-ancestors 'self'",
].join("; ");vercel --prodgenerator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
whopUserId String @unique
username String
email String?
name String?
avatarUrl String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
creator Creator?
supports Support[] @relation("UserSupports")
memberships Membership[]
orders Order[] @relation("UserOrders")
follows Follow[] @relation("UserFollows")
}
model Creator {
id String @id @default(cuid())
userId String @unique
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
whopCompanyId String? @unique
whopOnboarded Boolean @default(false)
username String @unique
displayName String
bio String?
coverImageUrl String?
avatarUrl String?
accentColor String @default("sky")
websiteUrl String?
socialLinks Json?
tags String[]
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
tiers Tier[]
posts Post[]
products Product[]
goals Goal[]
supports Support[]
memberships Membership[]
orders Order[]
followers Follow[]
}
model Tier {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
whopPlanId String? @unique
name String
description String?
priceCents Int
benefits String[]
order Int @default(0)
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
memberships Membership[]
gatedPosts Post[] @relation("TierGatedPosts")
}
model Product {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
whopPlanId String? @unique
title String
description String?
priceCents Int @default(0)
imageUrl String?
type ProductType @default(DIGITAL)
downloadUrl String?
salesCount Int @default(0)
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
orders Order[]
}
model Post {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
title String
content String
imageUrl String?
visibility Visibility @default(PUBLIC)
minimumTierId String?
minimumTier Tier? @relation("TierGatedPosts", fields: [minimumTierId], references: [id])
pinned Boolean @default(false)
published Boolean @default(true)
reactionsCount Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Goal {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
title String
description String?
targetCents Int
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
supports Support[]
}
model Support {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
supporterUserId String?
supporter User? @relation("UserSupports", fields: [supporterUserId], references: [id])
supporterName String
message String?
amountCents Int
coffees Int @default(1)
isPublic Boolean @default(true)
whopPaymentId String? @unique
status SupportStatus @default(PENDING)
goalId String?
goal Goal? @relation(fields: [goalId], references: [id])
createdAt DateTime @default(now())
}
model Membership {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
tierId String
tier Tier @relation(fields: [tierId], references: [id])
whopMembershipId String? @unique
status MembershipStatus @default(ACTIVE)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@unique([userId, tierId])
}
model Order {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
productId String
product Product @relation(fields: [productId], references: [id])
buyerUserId String?
buyer User? @relation("UserOrders", fields: [buyerUserId], references: [id])
buyerName String
amountCents Int
whopPaymentId String? @unique
status SupportStatus @default(PENDING)
createdAt DateTime @default(now())
}
model Follow {
id String @id @default(cuid())
creatorId String
creator Creator @relation(fields: [creatorId], references: [id], onDelete: Cascade)
userId String
user User @relation("UserFollows", fields: [userId], references: [id], onDelete: Cascade)
createdAt DateTime @default(now())
@@unique([creatorId, userId])
}
model ProcessedWebhook {
id String @id
type String
createdAt DateTime @default(now())
}
enum Visibility {
PUBLIC
SUPPORTERS
TIER
}
enum SupportStatus {
PENDING
COMPLETED
REFUNDED
FAILED
}
enum MembershipStatus {
ACTIVE
CANCELING
CANCELED
PAST_DUE
EXPIRED
}
enum ProductType {
DIGITAL
PHYSICAL
}npm run db:migrate -- --name initimport { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const prisma =
globalForPrisma.prisma ??
new PrismaClient({
log: process.env.NODE_ENV === "development" ? ["error", "warn"] : ["error"],
});
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
export default prisma;import { z } from "zod";
const serverSchema = z.object({
DATABASE_URL: z.string().min(1),
SESSION_SECRET: z.string().min(32, "SESSION_SECRET must be at least 32 characters"),
WHOP_SANDBOX: z.string().optional().default("true"),
WHOP_PLATFORM_COMPANY_ID: z.string().min(1),
WHOP_CLIENT_ID: z.string().min(1),
WHOP_CLIENT_SECRET: z.string().min(1),
WHOP_COMPANY_API_KEY: z.string().min(1),
WHOP_WEBHOOK_SECRET: z.string().optional().default(""),
NEXT_PUBLIC_APP_URL: z.string().url(),
NEXT_PUBLIC_WHOP_APP_ID: z.string().min(1),
NEXT_PUBLIC_WHOP_COMPANY_ID: z.string().min(1),
NEXT_PUBLIC_PLATFORM_FEE_PERCENT: z.string().optional().default("5"),
});
type ServerEnv = z.infer<typeof serverSchema>;
let cached: ServerEnv | null = null;
function validate(): ServerEnv {
if (cached) return cached;
const parsed = serverSchema.safeParse(process.env);
if (!parsed.success) {
console.error("Invalid environment variables:", parsed.error.flatten().fieldErrors);
throw new Error("Invalid environment variables. Check your .env file.");
}
cached = parsed.data;
return cached;
}
export const env = new Proxy({} as ServerEnv, {
get(_target, prop: string) {
return validate()[prop as keyof ServerEnv];
},
});
export function isSandbox(): boolean {
return env.WHOP_SANDBOX !== "false";
}
export function whopApiBaseUrl(): string {
return isSandbox()
? "https://sandbox-api.whop.com/api/v1"
: "https://api.whop.com/api/v1";
}
export function whopOAuthBaseUrl(): string {
return isSandbox() ? "https://sandbox-api.whop.com" : "https://api.whop.com";
}
export function platformFeePercent(): number {
const n = Number(env.NEXT_PUBLIC_PLATFORM_FEE_PERCENT);
return Number.isFinite(n) ? n : 5;
}import type { SessionOptions } from "iron-session";
export interface SessionData {
userId?: string;
whopUserId?: string;
isLoggedIn: boolean;
}
export const sessionOptions: SessionOptions = {
password: process.env.SESSION_SECRET as string,
cookieName: "kofi_session",
cookieOptions: {
secure: process.env.NODE_ENV === "production",
httpOnly: true,
sameSite: "lax",
maxAge: 60 * 60 * 24 * 7,
path: "/",
},
};
export const defaultSession: SessionData = {
isLoggedIn: false,
};
export const PKCE_COOKIE = "kofi_pkce";import crypto from "crypto";
import { env, whopOAuthBaseUrl } from "./env";
const REDIRECT_URI = `${env.NEXT_PUBLIC_APP_URL}/oauth/callback`;
const SCOPE = "openid profile email";
function base64url(buf: Buffer): string {
return buf.toString("base64url");
}
export function randomString(bytes = 32): string {
return base64url(crypto.randomBytes(bytes));
}
export function codeChallengeS256(verifier: string): string {
return base64url(crypto.createHash("sha256").update(verifier).digest());
}
export interface PkceState {
verifier: string;
state: string;
nonce: string;
returnTo?: string;
}
export function buildAuthorizeUrl(pkce: PkceState): string {
const params = new URLSearchParams({
response_type: "code",
client_id: env.WHOP_CLIENT_ID,
redirect_uri: REDIRECT_URI,
scope: SCOPE,
state: pkce.state,
nonce: pkce.nonce,
code_challenge: codeChallengeS256(pkce.verifier),
code_challenge_method: "S256",
});
return `${whopOAuthBaseUrl()}/oauth/authorize?${params.toString()}`;
}
export interface WhopTokens {
access_token: string;
refresh_token: string;
id_token?: string;
token_type: string;
expires_in: number;
}
export async function exchangeCodeForTokens(
code: string,
codeVerifier: string,
): Promise<WhopTokens> {
const res = await fetch(`${whopOAuthBaseUrl()}/oauth/token`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri: REDIRECT_URI,
client_id: env.WHOP_CLIENT_ID,
client_secret: env.WHOP_CLIENT_SECRET,
code_verifier: codeVerifier,
}),
});
if (!res.ok) {
const detail = await res.text().catch(() => "");
throw new Error(`Token exchange failed (${res.status}): ${detail}`);
}
return (await res.json()) as WhopTokens;
}
export interface WhopUserInfo {
sub: string;
preferred_username?: string;
name?: string;
picture?: string;
email?: string;
email_verified?: boolean;
}
export async function getUserInfo(accessToken: string): Promise<WhopUserInfo> {
const res = await fetch(`${whopOAuthBaseUrl()}/oauth/userinfo`, {
headers: { Authorization: `Bearer ${accessToken}` },
});
if (!res.ok) {
throw new Error(`Failed to fetch userinfo (${res.status})`);
}
return (await res.json()) as WhopUserInfo;
}import { NextRequest, NextResponse } from "next/server";
import { buildAuthorizeUrl, randomString } from "@/lib/oauth";
import { PKCE_COOKIE } from "@/lib/session";
export async function GET(req: NextRequest) {
const params = req.nextUrl.searchParams;
const handle = (params.get("handle") || "").trim();
const explicitReturnTo = params.get("returnTo");
const returnTo = handle
? `/dashboard/start?handle=${encodeURIComponent(handle)}`
: explicitReturnTo && explicitReturnTo.startsWith("/")
? explicitReturnTo
: "";
const pkce = {
verifier: randomString(32),
state: randomString(16),
nonce: randomString(16),
returnTo,
};
const res = NextResponse.redirect(buildAuthorizeUrl(pkce));
res.cookies.set(PKCE_COOKIE, JSON.stringify(pkce), {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
maxAge: 600,
path: "/",
});
return res;
}import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";
import { exchangeCodeForTokens, getUserInfo, type PkceState } from "@/lib/oauth";
import { PKCE_COOKIE } from "@/lib/session";
import { getSession } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
export async function GET(req: NextRequest) {
const base = req.nextUrl.origin;
const params = req.nextUrl.searchParams;
const code = params.get("code");
const state = params.get("state");
const oauthError = params.get("error");
if (oauthError) {
return NextResponse.redirect(new URL(`/?authError=${encodeURIComponent(oauthError)}`, base));
}
if (!code || !state) {
return NextResponse.redirect(new URL("/?authError=missing_code", base));
}
const cookieStore = await cookies();
const pkceRaw = cookieStore.get(PKCE_COOKIE)?.value;
if (!pkceRaw) {
return NextResponse.redirect(new URL("/?authError=missing_pkce", base));
}
let pkce: PkceState;
try {
pkce = JSON.parse(pkceRaw) as PkceState;
} catch {
return NextResponse.redirect(new URL("/?authError=bad_pkce", base));
}
if (pkce.state !== state) {
return NextResponse.redirect(new URL("/?authError=state_mismatch", base));
}
let accessToken: string;
let info: Awaited<ReturnType<typeof getUserInfo>>;
try {
const tokens = await exchangeCodeForTokens(code, pkce.verifier);
accessToken = tokens.access_token;
info = await getUserInfo(accessToken);
} catch (err: unknown) {
console.error("OAuth callback failed:", err);
return NextResponse.redirect(new URL("/?authError=token_exchange_failed", base));
}
const user = await prisma.user.upsert({
where: { whopUserId: info.sub },
update: {
username: info.preferred_username ?? info.sub,
name: info.name ?? null,
email: info.email ?? null,
avatarUrl: info.picture ?? null,
},
create: {
whopUserId: info.sub,
username: info.preferred_username ?? info.sub,
name: info.name ?? null,
email: info.email ?? null,
avatarUrl: info.picture ?? null,
},
});
const session = await getSession();
session.userId = user.id;
session.whopUserId = user.whopUserId;
session.isLoggedIn = true;
await session.save();
cookieStore.delete(PKCE_COOKIE);
let dest: string;
if (pkce.returnTo && pkce.returnTo.startsWith("/")) {
dest = pkce.returnTo;
} else {
const creator = await prisma.creator.findUnique({
where: { userId: user.id },
select: { id: true },
});
dest = creator ? "/dashboard" : "/feed";
}
return NextResponse.redirect(new URL(dest, base));
}import { NextRequest, NextResponse } from "next/server";
import { getSession } from "@/lib/auth";
async function destroy(req: NextRequest) {
const session = await getSession();
session.destroy();
return NextResponse.redirect(new URL("/", req.nextUrl.origin));
}
export async function GET(req: NextRequest) {
return destroy(req);
}
export async function POST(req: NextRequest) {
return destroy(req);
}import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { getIronSession } from "iron-session";
import { prisma } from "./prisma";
import { sessionOptions, type SessionData } from "./session";
import type { Creator, User } from "@prisma/client";
export async function getSession() {
const cookieStore = await cookies();
return getIronSession<SessionData>(cookieStore, sessionOptions);
}
export type CurrentUser = User & { creator: Creator | null };
export async function getCurrentUser(): Promise<CurrentUser | null> {
const session = await getSession();
if (!session.isLoggedIn || !session.userId) return null;
const user = await prisma.user.findUnique({
where: { id: session.userId },
include: { creator: true },
});
return user;
}
export async function requireAuth(): Promise<CurrentUser> {
const user = await getCurrentUser();
if (!user) redirect("/api/auth/login");
return user;
}
export async function requireCreator(): Promise<CurrentUser & { creator: Creator }> {
const user = await requireAuth();
if (!user.creator) redirect("/dashboard/start");
return user as CurrentUser & { creator: Creator };
}import { NextResponse } from "next/server";
import { getCurrentUser } from "@/lib/auth";
export async function GET() {
const user = await getCurrentUser();
if (!user) return NextResponse.json({ user: null });
return NextResponse.json({
user: {
id: user.id,
username: user.username,
name: user.name,
avatarUrl: user.avatarUrl,
isCreator: Boolean(user.creator),
creatorUsername: user.creator?.username ?? null,
},
});
}import { NextRequest, NextResponse } from "next/server";
const SESSION_COOKIE = "kofi_session";
export function proxy(req: NextRequest) {
if (!req.cookies.has(SESSION_COOKIE)) {
const url = new URL("/api/auth/login", req.url);
url.searchParams.set("returnTo", req.nextUrl.pathname);
return NextResponse.redirect(url);
}
return NextResponse.next();
}
export const config = {
matcher: ["/dashboard", "/dashboard/:path*", "/feed", "/feed/:path*"],
};npm run devimport { Whop } from "@whop/sdk";
import { env, isSandbox, whopApiBaseUrl } from "./env";
function webhookKey(): string | null {
const secret = env.WHOP_WEBHOOK_SECRET;
if (!secret) return null;
return Buffer.from(secret).toString("base64");
}
export const whopsdk = new Whop({
apiKey: env.WHOP_COMPANY_API_KEY,
webhookKey: webhookKey(),
...(isSandbox() ? { baseURL: whopApiBaseUrl() } : {}),
});function platformFeePercent(): number {
const n = Number(process.env.NEXT_PUBLIC_PLATFORM_FEE_PERCENT);
return Number.isFinite(n) && n >= 0 ? n : 5;
}
export function applicationFeeCents(amountCents: number): number {
const pct = platformFeePercent();
const fee = Math.round((amountCents * pct) / 100);
if (amountCents <= 0) return 0;
return Math.min(Math.max(fee, 1), amountCents - 1);
}
export function centsToDollars(cents: number): number {
return Math.round(cents) / 100;
}
export function dollarsToCents(dollars: number): number {
return Math.round(dollars * 100);
}
export function formatUsd(cents: number): string {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: cents % 100 === 0 ? 0 : 2,
}).format(cents / 100);
}export const ACCENT_OPTIONS = [
{ name: "sky", hex: "#0ea5e9" },
{ name: "blue", hex: "#3b82f6" },
{ name: "cyan", hex: "#06b6d4" },
{ name: "teal", hex: "#14b8a6" },
{ name: "jade", hex: "#10b981" },
{ name: "green", hex: "#22c55e" },
{ name: "grass", hex: "#65a30d" },
{ name: "pink", hex: "#ec4899" },
{ name: "crimson", hex: "#e11d48" },
{ name: "tomato", hex: "#ef4444" },
{ name: "orange", hex: "#f97316" },
{ name: "amber", hex: "#f59e0b" },
{ name: "purple", hex: "#a855f7" },
{ name: "violet", hex: "#8b5cf6" },
{ name: "indigo", hex: "#6366f1" },
{ name: "gold", hex: "#ca8a04" },
] as const;
export type AccentName = (typeof ACCENT_OPTIONS)[number]["name"];
const HEX_BY_NAME = new Map<string, string>(ACCENT_OPTIONS.map((a) => [a.name, a.hex] as [string, string]));
export const DEFAULT_ACCENT: AccentName = "sky";
export function accentHex(name: string | null | undefined): string {
if (!name) return HEX_BY_NAME.get(DEFAULT_ACCENT)!;
return HEX_BY_NAME.get(name) ?? HEX_BY_NAME.get(DEFAULT_ACCENT)!;
}
export function isAccentName(name: string): name is AccentName {
return HEX_BY_NAME.has(name);
}type Bucket = { count: number; resetAt: number };
const buckets = new Map<string, Bucket>();
export function rateLimit(key: string, limit = 20, windowMs = 60_000): boolean {
const now = Date.now();
const bucket = buckets.get(key);
if (!bucket || now > bucket.resetAt) {
buckets.set(key, { count: 1, resetAt: now + windowMs });
return true;
}
if (bucket.count >= limit) return false;
bucket.count += 1;
return true;
}
export function clientIp(req: Request): string {
const h = req.headers;
const fwd = h.get("x-forwarded-for");
if (fwd) return fwd.split(",")[0]!.trim();
return h.get("x-real-ip") ?? "local";
}import { whopsdk } from "@/lib/whop";
import { env } from "@/lib/env";
import { centsToDollars } from "@/lib/fees";
import type { CheckoutKind } from "@/constants";
export async function createConnectedCompany(params: {
email: string;
title: string;
internalUserId: string;
}): Promise<string> {
const company = await whopsdk.companies.create({
email: params.email,
parent_company_id: env.WHOP_PLATFORM_COMPANY_ID,
title: params.title,
metadata: { internal_user_id: params.internalUserId },
});
return company.id;
}
export async function createAccountLink(params: {
companyId: string;
useCase: "account_onboarding" | "payouts_portal";
returnUrl: string;
refreshUrl: string;
}): Promise<string> {
const link = await whopsdk.accountLinks.create({
company_id: params.companyId,
use_case: params.useCase,
return_url: params.returnUrl,
refresh_url: params.refreshUrl,
});
return link.url;
}
export async function createCompanyAccessToken(companyId: string): Promise<string> {
const { token } = await whopsdk.accessTokens.create({ company_id: companyId });
return token;
}
export interface PayoutSnapshot {
activated: boolean;
status: string | null;
availableCents: number;
pendingCents: number;
}
export async function getPayoutSnapshot(companyId: string): Promise<PayoutSnapshot> {
const ledger = await whopsdk.ledgerAccounts.retrieve(companyId);
const balance = ledger.balances?.find((b) => b.currency === "usd") ?? ledger.balances?.[0];
const status = ledger.payout_account_details?.status ?? null;
return {
activated: status === "connected",
status,
availableCents: Math.round((balance?.balance ?? 0) * 100),
pendingCents: Math.round((balance?.pending_balance ?? 0) * 100),
};
}
export interface CheckoutResult {
sessionId: string;
planId: string;
purchaseUrl: string;
}
export async function createCheckoutConfiguration(params: {
connectedCompanyId: string;
amountCents: number;
applicationFeeCents: number;
planType: "one_time" | "renewal";
title: string;
redirectUrl: string;
metadata: { kind: CheckoutKind } & Record<string, string>;
}): Promise<CheckoutResult> {
const amount = centsToDollars(params.amountCents);
const fee = centsToDollars(params.applicationFeeCents);
const cfg = await whopsdk.checkoutConfigurations.create({
plan: {
company_id: params.connectedCompanyId,
currency: "usd",
plan_type: params.planType,
application_fee_amount: fee,
title: params.title,
...(params.planType === "renewal"
? { renewal_price: amount, billing_period: 30, initial_price: 0 }
: { initial_price: amount }),
},
metadata: params.metadata,
...(params.redirectUrl.startsWith("https://") ? { redirect_url: params.redirectUrl } : {}),
});
const planId = cfg.plan?.id;
if (!planId) throw new Error("Checkout configuration did not return a plan id");
return { sessionId: cfg.id, planId, purchaseUrl: cfg.purchase_url };
}
export async function retrievePayment(paymentId: string) {
return whopsdk.payments.retrieve(paymentId);
}
export async function notifyCreator(params: {
companyId: string;
title: string;
subtitle?: string;
content: string;
restPath?: string;
iconUserId?: string;
}): Promise<boolean> {
try {
await whopsdk.notifications.create({
company_id: params.companyId,
title: params.title,
subtitle: params.subtitle,
content: params.content,
rest_path: params.restPath,
icon_user_id: params.iconUserId,
});
return true;
} catch (err: unknown) {
console.error("notifyCreator failed:", err);
return false;
}
}
export async function createPaymentsWebhook(appUrl: string): Promise<{ id: string; secret?: string }> {
const res = await whopsdk.webhooks.create({
url: `${appUrl}/api/webhooks/whop`,
events: [
"payment.succeeded",
"payment.failed",
"membership.activated",
"membership.deactivated",
"refund.created",
],
} as Parameters<typeof whopsdk.webhooks.create>[0]);
const anyRes = res as unknown as { id: string; webhook_secret?: string; secret?: string };
return { id: anyRes.id, secret: anyRes.webhook_secret ?? anyRes.secret };
}export const APP_NAME = "Cuppa";
export const COFFEE_UNIT_CENTS = 500;
export const COFFEE_PRESETS = [1, 3, 5] as const;
export const MIN_TIP_CENTS = 100;
export const MAX_TIP_CENTS = 100_000;
export type CheckoutKind = "tip" | "membership" | "shop";
export const PAGE_SIZE = 10;
export const EARN_GOALS = [
"Tips & donations",
"Monthly memberships",
"Digital products",
"Physical products",
"Commissions",
] as const;
export const CREATOR_CATEGORIES = [
"Art & Illustration",
"Music",
"Writing",
"Podcasts",
"Video & Film",
"Photography",
"Gaming",
"Education",
"Technology",
"Crafts & DIY",
"Comics & Animation",
"Cooking",
"Fitness & Health",
"Cosplay",
"Charity & Causes",
] as const;import { z } from "zod";
export const RESERVED_USERNAMES = new Set([
"dashboard", "signin", "api", "oauth", "explore", "admin", "settings", "about",
"login", "register", "account", "creator", "support", "help", "terms", "privacy",
"feed", "features",
]);
export const usernameSchema = z
.string()
.min(3)
.max(30)
.regex(/^[a-z0-9_]+$/, "Use lowercase letters, numbers, and underscores");
export type UsernameFormat = { ok: true } | { ok: false; reason: string };
export function checkUsernameFormat(value: string): UsernameFormat {
const parsed = usernameSchema.safeParse(value);
if (!parsed.success) {
return { ok: false, reason: parsed.error.issues[0]?.message ?? "Invalid username" };
}
if (RESERVED_USERNAMES.has(value)) {
return { ok: false, reason: "That username is reserved" };
}
return { ok: true };
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { getCurrentUser } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { createConnectedCompany } from "@/services/whop";
import { rateLimit, clientIp } from "@/lib/rate-limit";
import { DEFAULT_ACCENT } from "@/lib/accent";
import { CREATOR_CATEGORIES } from "@/constants";
import { usernameSchema, RESERVED_USERNAMES } from "@/lib/username";
const schema = z.object({
username: usernameSchema,
displayName: z.string().min(1).max(60),
bio: z.string().max(500).optional(),
tags: z.array(z.string().max(40)).max(8).optional(),
});
export async function POST(req: NextRequest) {
if (!rateLimit(`creator:${clientIp(req)}`, 5, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const user = await getCurrentUser();
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
if (user.creator) return NextResponse.json({ error: "You already have a page" }, { status: 400 });
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const { username, displayName, bio, tags } = parsed.data;
const allowed = new Set<string>(CREATOR_CATEGORIES);
const cleanTags = (tags ?? []).filter((t) => allowed.has(t));
if (RESERVED_USERNAMES.has(username)) {
return NextResponse.json({ error: "That username is reserved" }, { status: 409 });
}
const existing = await prisma.creator.findUnique({ where: { username } });
if (existing) {
return NextResponse.json({ error: "That username is taken" }, { status: 409 });
}
let whopCompanyId: string | null = null;
try {
whopCompanyId = await createConnectedCompany({
email: user.email ?? `${username}@example.com`,
title: displayName,
internalUserId: user.id,
});
} catch (err: unknown) {
console.error("Failed to create connected company:", err);
return NextResponse.json(
{ error: "We couldn't set up your payments account. Please try again." },
{ status: 502 },
);
}
const creator = await prisma.creator.create({
data: {
userId: user.id,
username,
displayName,
bio: bio || null,
tags: cleanTags,
whopCompanyId,
whopOnboarded: true,
accentColor: DEFAULT_ACCENT,
},
});
return NextResponse.json({ ok: true, username: creator.username });
}/* eslint-disable @next/next/no-img-element */
const BRAND_ICONS = {
coffee: "/brand/coffee-cup.webp",
palette: "/brand/paint-palette.webp",
megaphone: "/brand/megaphone.webp",
money: "/brand/money-stack.webp",
heart: "/brand/heart.webp",
shop: "/brand/shopping-bag.webp",
lock: "/brand/lock.webp",
confetti: "/brand/confetti.webp",
} as const;
export type BrandIconName = keyof typeof BRAND_ICONS;
export default function BrandIcon({
name,
className = "h-6 w-6",
alt = "",
}: {
name: BrandIconName;
className?: string;
alt?: string;
}) {
return (
<img
src={BRAND_ICONS[name]}
alt={alt}
aria-hidden={alt === "" ? true : undefined}
draggable={false}
className={`inline-block shrink-0 select-none object-contain ${className}`}
/>
);
}type IconProps = { className?: string };
function Svg({ className = "h-4 w-4", children }: IconProps & { children: React.ReactNode }) {
return (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className={`inline-block shrink-0 ${className}`}
>
{children}
</svg>
);
}
export function Check({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M20 6 9 17l-5-5" />
</Svg>
);
}
export function X({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M18 6 6 18M6 6l12 12" />
</Svg>
);
}
export function ChevronLeft({ className }: IconProps) {
return (
<Svg className={className}>
<path d="m15 18-6-6 6-6" />
</Svg>
);
}
export function ChevronRight({ className }: IconProps) {
return (
<Svg className={className}>
<path d="m9 18 6-6-6-6" />
</Svg>
);
}
export function ArrowUpRight({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M7 17 17 7M7 7h10v10" />
</Svg>
);
}
export function Pin({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M12 17v5" />
<path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
</Svg>
);
}
export function Sun({ className }: IconProps) {
return (
<Svg className={className}>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
</Svg>
);
}
export function Moon({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
</Svg>
);
}
export function Monitor({ className }: IconProps) {
return (
<Svg className={className}>
<rect x="2" y="3" width="20" height="14" rx="2" />
<path d="M8 21h8M12 17v4" />
</Svg>
);
}
export function Home({ className }: IconProps) {
return (
<Svg className={className}>
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="M9 22V12h6v10" />
</Svg>
);
}
export function User({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</Svg>
);
}
export function Users({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
</Svg>
);
}
export function Gear({ className }: IconProps) {
return (
<Svg className={className}>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</Svg>
);
}
export function Wallet({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
<path d="M21 12a2 2 0 0 0-2-2h-4a2 2 0 0 0 0 4h4a2 2 0 0 0 2-2Z" />
</Svg>
);
}
export function FileText({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
</Svg>
);
}
export function Crown({ className }: IconProps) {
return (
<Svg className={className}>
<path d="m2 6 4 4 6-7 6 7 4-4-2 13H4z" />
<path d="M5 21h14" />
</Svg>
);
}
export function Bag({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
<path d="M3 6h18" />
<path d="M16 10a4 4 0 0 1-8 0" />
</Svg>
);
}
export function Share({ className }: IconProps) {
return (
<Svg className={className}>
<circle cx="18" cy="5" r="3" />
<circle cx="6" cy="12" r="3" />
<circle cx="18" cy="19" r="3" />
<path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98" />
</Svg>
);
}
export function Link({ className }: IconProps) {
return (
<Svg className={className}>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</Svg>
);
}import { NextRequest, NextResponse } from "next/server";
import { getCurrentUser } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { rateLimit, clientIp } from "@/lib/rate-limit";
import { checkUsernameFormat } from "@/lib/username";
export async function GET(req: NextRequest) {
if (!rateLimit(`username:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const user = await getCurrentUser();
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const value = (req.nextUrl.searchParams.get("username") ?? "").toLowerCase();
const format = checkUsernameFormat(value);
if (!format.ok) {
return NextResponse.json({ available: false, reason: format.reason });
}
const existing = await prisma.creator.findUnique({
where: { username: value },
select: { id: true },
});
return NextResponse.json(
existing ? { available: false, reason: "That username is taken" } : { available: true },
);
}"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { EARN_GOALS, CREATOR_CATEGORIES } from "@/constants";
import { Button } from "@whop/react/components";
import BrandIcon from "@/components/BrandIcon";
import { ChevronLeft } from "@/components/Icons";
type Role = "creator" | "supporter";
function pillClass(active: boolean) {
return [
"rounded-full border px-4 py-2 text-sm font-semibold transition",
active ? "border-brand bg-brand text-white" : "border-line bg-surface hover:border-brand/60",
].join(" ");
}
function toggle(list: string[], value: string): string[] {
return list.includes(value) ? list.filter((v) => v !== value) : [...list, value];
}
export default function OnboardingWizard({
email,
defaultName,
defaultUsername,
}: {
email?: string;
defaultName?: string;
defaultUsername?: string;
}) {
const router = useRouter();
const [step, setStep] = useState(1);
const [earnGoals, setEarnGoals] = useState<string[]>([]);
const [username, setUsername] = useState(
(defaultUsername ?? "").toLowerCase().replace(/[^a-z0-9_]/g, ""),
);
const [interests, setInterests] = useState<string[]>([]);
const [displayName, setDisplayName] = useState(defaultName ?? "");
const [bio, setBio] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [availability, setAvailability] = useState<{
status: "idle" | "checking" | "available" | "unavailable";
message?: string;
}>({ status: "idle" });
useEffect(() => {
if (step !== 3) return;
const handle = username;
if (handle.length < 3) {
setAvailability({ status: "idle" });
return;
}
setAvailability({ status: "checking" });
const controller = new AbortController();
const timer = setTimeout(async () => {
try {
const res = await fetch(
`/api/creator/username?username=${encodeURIComponent(handle)}`,
{ signal: controller.signal },
);
const data: { available?: boolean; reason?: string } = await res.json();
setAvailability(
data.available
? { status: "available" }
: { status: "unavailable", message: data.reason ?? "That username is taken" },
);
} catch {
if (!controller.signal.aborted) setAvailability({ status: "idle" });
}
}, 400);
return () => {
clearTimeout(timer);
controller.abort();
};
}, [username, step]);
function chooseRole(role: Role) {
if (role === "supporter") {
router.push("/feed");
return;
}
setStep(2);
}
function goToInterests() {
if (availability.status !== "available") return;
setError(null);
setStep(4);
}
async function createPage() {
setError(null);
setLoading(true);
try {
const res = await fetch("/api/creator", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, displayName, bio, tags: interests }),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Something went wrong");
setLoading(false);
return;
}
router.push(`/${data.username}`);
} catch {
setError("Network error. Please try again.");
setLoading(false);
}
}
if (step === 1) {
return (
<div className="kofi-card p-7">
<h1 className="text-2xl">I’m a…</h1>
<p className="mt-1 text-sm text-muted">
{email ? (
<>
Signing up as <span className="font-semibold text-ink">{email}</span>.
</>
) : (
"Tell us how you’ll use Cuppa."
)}
</p>
<div className="mt-6 grid gap-3">
<button
type="button"
onClick={() => chooseRole("creator")}
className="flex items-center gap-4 rounded-2xl border border-muted/30 bg-surface p-5 text-left transition hover:border-brand hover:bg-surface-2"
>
<span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-surface-2">
<BrandIcon name="palette" className="h-7 w-7" />
</span>
<span>
<span className="block font-bold">Creator</span>
<span className="block text-sm text-muted">
I want a page to accept tips, memberships and sales.
</span>
</span>
</button>
<button
type="button"
onClick={() => chooseRole("supporter")}
className="flex items-center gap-4 rounded-2xl border border-muted/30 bg-surface p-5 text-left transition hover:border-brand hover:bg-surface-2"
>
<span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-surface-2">
<BrandIcon name="coffee" className="h-7 w-7" />
</span>
<span>
<span className="block font-bold">Supporter</span>
<span className="block text-sm text-muted">
I’m here to support and follow creators I love.
</span>
</span>
</button>
</div>
<a
href="/api/auth/logout"
className="mt-6 block text-center text-sm text-muted hover:text-ink"
>
Start over
</a>
</div>
);
}
if (step === 2) {
return (
<div className="kofi-card p-7">
<button
type="button"
onClick={() => setStep(1)}
className="mb-4 inline-flex items-center gap-1 text-sm text-muted hover:text-ink"
>
<ChevronLeft className="h-4 w-4" /> Back
</button>
<h1 className="text-2xl">How are you planning to earn?</h1>
<p className="mt-1 text-sm text-muted">Pick what fits. You can offer all of it later.</p>
<div className="mt-6 flex flex-wrap gap-2">
{EARN_GOALS.map((g) => (
<button
key={g}
type="button"
onClick={() => setEarnGoals(toggle(earnGoals, g))}
className={pillClass(earnGoals.includes(g))}
>
{g}
</button>
))}
</div>
<Button onClick={() => setStep(3)} size="3" variant="solid" color="gray" highContrast className="mt-8 w-full">
Continue
</Button>
</div>
);
}
if (step === 3) {
return (
<div className="kofi-card p-7">
<button
type="button"
onClick={() => setStep(2)}
className="mb-4 inline-flex items-center gap-1 text-sm text-muted hover:text-ink"
>
<ChevronLeft className="h-4 w-4" /> Back
</button>
<h1 className="text-2xl">Pick a username</h1>
<p className="mt-1 text-sm text-muted">This is your page link. You can change it later.</p>
<div className="mt-6 flex items-center rounded-xl border border-line bg-surface px-4 py-3 focus-within:border-brand">
<span className="text-muted">kofi-clone-whop-tutorial.vercel.app/</span>
<input
autoFocus
value={username}
onChange={(e) =>
setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ""))
}
placeholder="yourname"
className="flex-1 bg-transparent outline-none"
/>
</div>
<p className="mt-2 min-h-[1.25rem] text-sm">
{username.length > 0 && username.length < 3 ? (
<span className="text-muted">At least 3 characters.</span>
) : availability.status === "checking" ? (
<span className="text-muted">Checking availability…</span>
) : availability.status === "available" ? (
<span className="text-positive">kofi-clone-whop-tutorial.vercel.app/{username} is available</span>
) : availability.status === "unavailable" ? (
<span className="text-red-600">{availability.message}</span>
) : null}
</p>
<Button
onClick={goToInterests}
disabled={availability.status !== "available"}
size="3"
variant="solid"
color="gray"
highContrast
className="mt-8 w-full"
>
Next
</Button>
</div>
);
}
if (step === 4) {
return (
<div className="kofi-card p-7">
<button
type="button"
onClick={() => setStep(3)}
className="mb-4 inline-flex items-center gap-1 text-sm text-muted hover:text-ink"
>
<ChevronLeft className="h-4 w-4" /> Back
</button>
<h1 className="text-2xl">Choose your interests</h1>
<p className="mt-1 text-sm text-muted">
We use these to describe your page. Pick a few that match your work.
</p>
<div className="mt-6 flex flex-wrap gap-2">
{CREATOR_CATEGORIES.map((c) => (
<button
key={c}
type="button"
onClick={() => setInterests(toggle(interests, c))}
className={pillClass(interests.includes(c))}
>
{c}
</button>
))}
</div>
<Button onClick={() => setStep(5)} size="3" variant="solid" color="gray" highContrast className="mt-8 w-full">
Next
</Button>
</div>
);
}
return (
<div className="kofi-card p-7">
<button
type="button"
onClick={() => setStep(4)}
className="mb-4 text-sm text-muted hover:text-ink"
>
<ChevronLeft className="h-4 w-4" /> Back
</button>
<h1 className="text-2xl">About you</h1>
<div className="mt-6 space-y-4">
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="displayName">
Display name
</label>
<input
id="displayName"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder="Anje's Art"
className="w-full rounded-xl border border-line bg-surface px-4 py-2.5 outline-none focus:border-brand"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="bio">
Bio
</label>
<textarea
id="bio"
value={bio}
onChange={(e) => setBio(e.target.value)}
rows={4}
placeholder="Introduce yourself so others can get to know you…"
className="w-full resize-none rounded-xl border border-line bg-surface px-4 py-2.5 outline-none focus:border-brand"
/>
</div>
</div>
{error ? (
<p className="mt-3 text-sm text-red-600">
{error} {error.toLowerCase().includes("username") ? "Go back to change it." : null}
</p>
) : null}
<Button
onClick={createPage}
disabled={loading || !displayName.trim()}
size="3"
variant="solid"
color="gray"
highContrast
className="mt-8 w-full"
>
{loading ? "Setting up your page…" : "Next"}
</Button>
<p className="mt-3 text-center text-xs text-muted">
We create a secure payments account so supporters pay you directly.
</p>
</div>
);
}import { redirect } from "next/navigation";
import Link from "next/link";
import { requireAuth } from "@/lib/auth";
import OnboardingWizard from "@/components/OnboardingWizard";
import BrandIcon from "@/components/BrandIcon";
export default async function StartPage({
searchParams,
}: {
searchParams: Promise<{ handle?: string }>;
}) {
const user = await requireAuth();
if (user.creator) redirect("/dashboard");
const { handle } = await searchParams;
const suggestedUsername = (handle ?? "").toLowerCase().replace(/[^a-z0-9_]/g, "");
return (
<main className="min-h-dvh bg-page">
<div className="mx-auto max-w-lg px-5 py-12">
<Link href="/" className="mb-8 flex items-center justify-center gap-2">
<BrandIcon name="coffee" className="h-9 w-9" />
<span className="font-display text-2xl font-extrabold">Cuppa</span>
</Link>
<OnboardingWizard
email={user.email ?? undefined}
defaultName={user.name ?? undefined}
defaultUsername={suggestedUsername || undefined}
/>
</div>
</main>
);
}import { cache } from "react";
import { prisma } from "./prisma";
import { getCurrentUser } from "./auth";
export const getCreatorLite = cache(async (username: string) => {
return prisma.creator.findUnique({
where: { username },
select: {
id: true,
userId: true,
username: true,
displayName: true,
bio: true,
avatarUrl: true,
coverImageUrl: true,
accentColor: true,
isActive: true,
},
});
});
export interface ViewerContext {
userId: string | null;
isOwner: boolean;
isSupporter: boolean;
activeTierIds: string[];
isFollowing: boolean;
}
export async function getViewerContext(creatorId: string, creatorUserId?: string): Promise<ViewerContext> {
const user = await getCurrentUser();
if (!user) {
return { userId: null, isOwner: false, isSupporter: false, activeTierIds: [], isFollowing: false };
}
const [memberships, follow] = await Promise.all([
prisma.membership.findMany({
where: { creatorId, userId: user.id, status: { in: ["ACTIVE", "CANCELING"] } },
select: { tierId: true },
}),
prisma.follow.findUnique({
where: { creatorId_userId: { creatorId, userId: user.id } },
select: { id: true },
}),
]);
return {
userId: user.id,
isOwner: creatorUserId ? user.id === creatorUserId : Boolean(user.creator && user.creator.id === creatorId),
isSupporter: memberships.length > 0,
activeTierIds: memberships.map((m) => m.tierId),
isFollowing: Boolean(follow),
};
}
export function canViewPost(
post: { visibility: "PUBLIC" | "SUPPORTERS" | "TIER"; minimumTierId: string | null },
viewer: ViewerContext,
): boolean {
if (post.visibility === "PUBLIC") return true;
if (viewer.isOwner) return true;
if (post.visibility === "SUPPORTERS") return viewer.isSupporter;
if (post.visibility === "TIER") {
return post.minimumTierId ? viewer.activeTierIds.includes(post.minimumTierId) : viewer.isSupporter;
}
return false;
}"use client";
import { useEffect, useState } from "react";
import { Monitor, Sun, Moon } from "@/components/Icons";
type Theme = "system" | "light" | "dark";
function apply(theme: Theme) {
const dark =
theme === "dark" ||
(theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);
}
export default function ThemeToggle() {
const [theme, setTheme] = useState<Theme>("system");
useEffect(() => {
const stored = (localStorage.getItem("theme") as Theme) || "system";
setTheme(stored);
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const onChange = () => {
if ((localStorage.getItem("theme") as Theme) === "system") apply("system");
};
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, []);
function cycle() {
const next: Theme = theme === "system" ? "light" : theme === "light" ? "dark" : "system";
setTheme(next);
localStorage.setItem("theme", next);
apply(next);
}
const Icon = theme === "system" ? Monitor : theme === "light" ? Sun : Moon;
const label = theme === "system" ? "System theme" : theme === "light" ? "Light theme" : "Dark theme";
return (
<button
onClick={cycle}
title={label}
aria-label={label}
className="grid h-9 w-9 place-items-center rounded-full border border-line text-muted"
>
<Icon className="h-[18px] w-[18px]" />
</button>
);
}"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
const TABS = [
{ label: "Home", path: "" },
{ label: "Membership", path: "/membership" },
{ label: "Shop", path: "/shop" },
{ label: "Gallery", path: "/gallery" },
{ label: "Posts", path: "/posts" },
];
export default function CreatorTabs({ username }: { username: string }) {
const pathname = usePathname();
const base = `/${username}`;
return (
<div className="no-scrollbar overflow-x-auto border-b border-line">
<div className="mx-auto flex max-w-5xl gap-6 px-5">
{TABS.map((tab) => {
const href = `${base}${tab.path}`;
const active = tab.path === "" ? pathname === base : pathname === href;
return (
<Link
key={tab.label}
href={href}
className={`whitespace-nowrap border-b-2 py-3 text-sm font-semibold transition ${
active
? "border-[var(--accent)] text-ink"
: "border-transparent text-muted hover:text-ink"
}`}
>
{tab.label}
</Link>
);
})}
</div>
</div>
);
}"use client";
import { useState } from "react";
import { Button } from "@whop/react/components";
export default function FollowButton({
username,
initialFollowing,
isLoggedIn,
}: {
username: string;
initialFollowing: boolean;
isLoggedIn: boolean;
}) {
const [following, setFollowing] = useState(initialFollowing);
const [loading, setLoading] = useState(false);
async function toggle() {
if (!isLoggedIn) {
window.location.href = `/api/auth/login?returnTo=/${username}`;
return;
}
setLoading(true);
const optimistic = !following;
setFollowing(optimistic);
try {
const res = await fetch("/api/follow", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username }),
});
const data = await res.json();
if (typeof data.following === "boolean") setFollowing(data.following);
} catch {
setFollowing(!optimistic);
} finally {
setLoading(false);
}
}
return (
<Button onClick={toggle} disabled={loading} size="2" variant="soft" color="gray">
{following ? "Following" : "Follow"}
</Button>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getCurrentUser } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const schema = z.object({ username: z.string().min(1) });
export async function POST(req: NextRequest) {
if (!rateLimit(`follow:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const user = await getCurrentUser();
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: "Invalid input" }, { status: 400 });
const creator = await prisma.creator.findUnique({
where: { username: parsed.data.username },
select: { id: true },
});
if (!creator) return NextResponse.json({ error: "Not found" }, { status: 404 });
const existing = await prisma.follow.findUnique({
where: { creatorId_userId: { creatorId: creator.id, userId: user.id } },
});
if (existing) {
await prisma.follow.delete({ where: { id: existing.id } });
return NextResponse.json({ following: false });
}
await prisma.follow.create({ data: { creatorId: creator.id, userId: user.id } });
return NextResponse.json({ following: true });
}/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { getCreatorLite, getViewerContext } from "@/lib/creator";
import { accentHex } from "@/lib/accent";
import CreatorTabs from "@/components/creator/CreatorTabs";
import FollowButton from "@/components/creator/FollowButton";
import BrandIcon from "@/components/BrandIcon";
export default async function CreatorProfileHeader({ username }: { username: string }) {
const creator = await getCreatorLite(username);
if (!creator) return null;
const [supportersCount, viewer] = await Promise.all([
prisma.support.count({ where: { creatorId: creator.id, status: "COMPLETED" } }),
getViewerContext(creator.id, creator.userId),
]);
const accent = accentHex(creator.accentColor);
return (
<>
<div
className="h-40 w-full sm:h-56"
style={{
background: creator.coverImageUrl
? `url(${creator.coverImageUrl}) center/cover`
: `linear-gradient(120deg, ${accent}, ${accent}99)`,
}}
/>
<div className="mx-auto max-w-5xl px-5">
<div className="-mt-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div className="flex items-end gap-4">
{creator.avatarUrl ? (
<img
src={creator.avatarUrl}
alt={creator.displayName}
className="h-24 w-24 rounded-full border-4 border-surface object-cover"
/>
) : (
<div
className="grid h-24 w-24 place-items-center rounded-full border-4 border-surface text-4xl text-white"
style={{ background: accent }}
>
{creator.displayName.charAt(0)}
</div>
)}
<div className="pb-1">
<h1 className="text-2xl font-bold">{creator.displayName}</h1>
<p className="mt-0.5 flex items-center gap-1.5 text-sm text-muted">
<BrandIcon name="heart" className="h-4 w-4" />
{supportersCount} {supportersCount === 1 ? "supporter" : "supporters"}
</p>
</div>
</div>
<div className="flex items-center gap-2 pb-1">
<FollowButton username={username} initialFollowing={viewer.isFollowing} isLoggedIn={Boolean(viewer.userId)} />
<a href={`/${username}#support`} className="btn-pill btn-accent text-sm sm:hidden">
Tip
</a>
{viewer.isOwner ? (
<Link href="/dashboard" className="btn-pill btn-outline text-sm">
Edit page
</Link>
) : null}
</div>
</div>
</div>
<div className="mt-5">
<CreatorTabs username={username} />
</div>
</>
);
}import Link from "next/link";
import { getCreatorLite } from "@/lib/creator";
import { getCurrentUser } from "@/lib/auth";
import { accentHex } from "@/lib/accent";
import ThemeToggle from "@/components/ThemeToggle";
import BrandIcon from "@/components/BrandIcon";
export default async function CreatorLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ username: string }>;
}) {
const { username } = await params;
const [creator, user] = await Promise.all([getCreatorLite(username), getCurrentUser()]);
const accent = accentHex(creator?.accentColor);
const isOwner = Boolean(user?.creator && user.creator.username === username);
return (
<div style={{ ["--accent" as string]: accent } as React.CSSProperties} className="min-h-screen">
<header className="sticky top-0 z-20 border-b border-line bg-surface/90 backdrop-blur">
<div className="mx-auto flex max-w-5xl items-center justify-between px-5 py-2.5">
<Link href={`/${username}`} className="flex items-center gap-2 font-bold">
{creator?.avatarUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={creator.avatarUrl} alt="" className="h-7 w-7 rounded-full object-cover" />
) : (
<span className="grid h-7 w-7 place-items-center rounded-full bg-surface-2">
<BrandIcon name="coffee" className="h-6 w-6" />
</span>
)}
<span className="truncate">{creator?.displayName ?? "Cuppa"}</span>
</Link>
<div className="flex items-center gap-2">
<ThemeToggle />
{user ? (
<Link href={isOwner ? "/dashboard" : "/dashboard"} className="btn-pill btn-secondary text-sm">
{isOwner ? "My dashboard" : "Dashboard"}
</Link>
) : (
<a href={`/api/auth/login?returnTo=/${username}`} className="btn-pill btn-secondary text-sm">
Log in
</a>
)}
</div>
</div>
</header>
{children}
<footer className="mt-16 border-t border-line py-10 text-center text-sm text-muted">
<p>
Creating something worth supporting?{" "}
<a href="/api/auth/login?returnTo=/dashboard" className="font-semibold text-ink underline">
Start your own page
</a>
</p>
</footer>
</div>
);
}export default function SupportWidget(_props: {
creatorUsername: string;
creatorDisplayName: string;
accentColor: string;
sandbox: boolean;
hasMemberships: boolean;
}) {
return null;
}/* eslint-disable @next/next/no-img-element */
import { notFound } from "next/navigation";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { getViewerContext, canViewPost } from "@/lib/creator";
import { isSandbox } from "@/lib/env";
import { accentHex } from "@/lib/accent";
import { formatUsd } from "@/lib/fees";
import SupportWidget from "@/components/creator/SupportWidget";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
import BrandIcon from "@/components/BrandIcon";
import { Pin } from "@/components/Icons";
function timeAgo(date: Date): string {
const s = Math.floor((Date.now() - date.getTime()) / 1000);
if (s < 60) return "just now";
const m = Math.floor(s / 60);
if (m < 60) return `${m}m`;
const h = Math.floor(m / 60);
if (h < 24) return `${h}h`;
return `${Math.floor(h / 24)}d`;
}
export default async function CreatorPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
include: {
tiers: { where: { isActive: true }, orderBy: { priceCents: "asc" } },
products: { where: { isActive: true }, orderBy: { createdAt: "desc" }, take: 3 },
goals: { where: { isActive: true }, orderBy: { createdAt: "desc" }, take: 1 },
},
});
if (!creator || !creator.isActive) notFound();
const [supports, posts, sumAgg, viewer] = await Promise.all([
prisma.support.findMany({
where: { creatorId: creator.id, status: "COMPLETED", isPublic: true },
orderBy: { createdAt: "desc" },
take: 20,
include: { supporter: { select: { username: true, avatarUrl: true } } },
}),
prisma.post.findMany({
where: { creatorId: creator.id, published: true },
orderBy: [{ pinned: "desc" }, { createdAt: "desc" }],
take: 10,
include: { minimumTier: { select: { id: true, name: true } } },
}),
prisma.support.aggregate({ where: { creatorId: creator.id, status: "COMPLETED" }, _sum: { amountCents: true } }),
getViewerContext(creator.id, creator.userId),
]);
const accent = accentHex(creator.accentColor);
const goal = creator.goals[0];
const raised = sumAgg._sum.amountCents ?? 0;
const goalPct = goal ? Math.min(100, Math.round((raised / goal.targetCents) * 100)) : null;
const pinned = posts.filter((p) => p.pinned);
const feed = [
...posts.filter((p) => !p.pinned).map((p) => ({ kind: "post" as const, date: p.createdAt, post: p })),
...supports.map((s) => ({ kind: "support" as const, date: s.createdAt, support: s })),
].sort((a, b) => b.date.getTime() - a.date.getTime());
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<div className="grid gap-6 lg:grid-cols-[1fr_360px]">
<div className="order-2 space-y-6 lg:order-1">
{goal ? (
<div className="kofi-card p-5">
<div className="flex items-center justify-between">
<h2 className="font-bold">{goal.title}</h2>
<span className="text-sm font-semibold text-muted">{goalPct}%</span>
</div>
<div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-surface-2">
<div className="h-full rounded-full bg-positive" style={{ width: `${goalPct}%` }} />
</div>
<p className="mt-2 text-sm text-muted">
{formatUsd(raised)} of {formatUsd(goal.targetCents)}
</p>
{goal.description ? <p className="mt-3 text-sm">{goal.description}</p> : null}
</div>
) : null}
{creator.bio ? (
<div className="kofi-card p-5">
<h2 className="mb-2 font-bold">About {creator.displayName}</h2>
<p className="whitespace-pre-wrap text-sm leading-relaxed">{creator.bio}</p>
{creator.tags.length ? (
<div className="mt-4 flex flex-wrap gap-2">
{creator.tags.map((t) => (
<span key={t} className="rounded-full bg-surface-2 px-3 py-1 text-xs font-medium text-muted">
{t}
</span>
))}
</div>
) : null}
</div>
) : null}
<div className="kofi-card p-5">
<h2 className="mb-4 font-bold">Recent activity</h2>
{pinned.length === 0 && feed.length === 0 ? (
<p className="text-sm text-muted">No activity yet. Be the first to show support!</p>
) : (
<div className="space-y-4">
{pinned.map((post) => (
<PostItem key={post.id} post={post} canView={canViewPost(post, viewer)} username={username} pinned />
))}
{feed.map((item) =>
item.kind === "post" ? (
<PostItem key={`p-${item.post.id}`} post={item.post} canView={canViewPost(item.post, viewer)} username={username} />
) : (
<SupportItem key={`s-${item.support.id}`} support={item.support} />
),
)}
</div>
)}
</div>
</div>
<aside className="order-1 space-y-6 lg:order-2">
<div id="support">
<SupportWidget
creatorUsername={username}
creatorDisplayName={creator.displayName}
accentColor={creator.accentColor}
sandbox={isSandbox()}
hasMemberships={creator.tiers.length > 0}
/>
</div>
{creator.tiers.length > 0 ? (
<div className="kofi-card p-5">
<h3 className="font-bold">Become a regular</h3>
<p className="mt-1 text-sm text-muted">Monthly support from {formatUsd(creator.tiers[0].priceCents)}/mo</p>
<Link href={`/${username}/membership`} className="btn-pill btn-outline mt-3 w-full text-sm">
See membership options
</Link>
</div>
) : null}
{creator.products.length > 0 ? (
<div className="kofi-card p-5">
<div className="mb-3 flex items-center justify-between">
<h3 className="font-bold">Shop</h3>
<Link href={`/${username}/shop`} className="text-sm font-semibold" style={{ color: accent }}>
Go to shop
</Link>
</div>
<div className="space-y-3">
{creator.products.map((p) => (
<Link key={p.id} href={`/${username}/shop`} className="flex items-center gap-3">
<div className="h-12 w-12 overflow-hidden rounded-lg bg-surface-2">
{p.imageUrl ? <img src={p.imageUrl} alt="" className="h-full w-full object-cover" /> : null}
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold">{p.title}</p>
<p className="text-xs text-muted">{p.priceCents === 0 ? "Free" : formatUsd(p.priceCents)}</p>
</div>
</Link>
))}
</div>
</div>
) : null}
</aside>
</div>
</div>
</>
);
}
type PostWithTier = {
id: string;
title: string;
content: string;
visibility: "PUBLIC" | "SUPPORTERS" | "TIER";
minimumTierId: string | null;
createdAt: Date;
minimumTier: { id: string; name: string } | null;
};
function PostItem({ post, canView, username, pinned }: { post: PostWithTier; canView: boolean; username: string; pinned?: boolean }) {
return (
<div className="rounded-xl border border-line p-4">
<div className="mb-1 flex items-center gap-2 text-xs text-muted">
{pinned ? (
<span className="inline-flex items-center gap-1 font-semibold" style={{ color: "var(--accent)" }}>
<Pin className="h-3.5 w-3.5" /> Pinned
</span>
) : null}
<span>{timeAgo(post.createdAt)}</span>
{post.visibility !== "PUBLIC" ? (
<span className="inline-flex items-center gap-1">
· <BrandIcon name="lock" className="h-3.5 w-3.5" />
{post.minimumTier?.name ?? "Supporters"}
</span>
) : null}
</div>
<Link href={`/${username}/post/${post.id}`} className="font-semibold hover:underline">
{post.title}
</Link>
{canView ? (
<p className="mt-1 line-clamp-3 text-sm text-muted">{post.content}</p>
) : (
<p className="mt-2 rounded-lg bg-surface-2 px-3 py-2 text-sm text-muted">
<BrandIcon name="lock" className="mr-1 h-4 w-4 align-text-bottom" />This post is for supporters.{" "}
<a href="#support" className="font-semibold" style={{ color: "var(--accent)" }}>
Unlock it
</a>
</p>
)}
</div>
);
}
function SupportItem({
support,
}: {
support: { id: string; supporterName: string; message: string | null; coffees: number; createdAt: Date; supporter: { username: string; avatarUrl: string | null } | null };
}) {
return (
<div className="flex gap-3">
<div className="grid h-9 w-9 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-2 text-sm">
{support.supporter?.avatarUrl ? (
<img src={support.supporter.avatarUrl} alt="" className="h-full w-full rounded-full object-cover" />
) : (
<BrandIcon name="coffee" className="h-7 w-7" />
)}
</div>
<div className="min-w-0 flex-1">
<p className="text-sm">
<span className="font-semibold">{support.supporterName}</span>{" "}
<span className="text-muted">
bought {support.coffees} {support.coffees === 1 ? "coffee" : "coffees"} · {timeAgo(support.createdAt)}
</span>
</p>
{support.message ? <p className="mt-0.5 text-sm">{support.message}</p> : null}
</div>
</div>
);
}export interface CheckoutResult {
sessionId: string;
planId: string;
purchaseUrl: string;
}
export async function createCheckoutConfiguration(params: {
connectedCompanyId: string;
amountCents: number;
applicationFeeCents: number;
planType: "one_time" | "renewal";
title: string;
redirectUrl: string;
metadata: { kind: CheckoutKind } & Record<string, string>;
}): Promise<CheckoutResult> {
const amount = centsToDollars(params.amountCents);
const fee = centsToDollars(params.applicationFeeCents);
const cfg = await whopsdk.checkoutConfigurations.create({
plan: {
company_id: params.connectedCompanyId,
currency: "usd",
plan_type: params.planType,
application_fee_amount: fee,
title: params.title,
...(params.planType === "renewal"
? { renewal_price: amount, billing_period: 30, initial_price: 0 }
: { initial_price: amount }),
},
metadata: params.metadata,
...(params.redirectUrl.startsWith("https://") ? { redirect_url: params.redirectUrl } : {}),
});
const planId = cfg.plan?.id;
if (!planId) throw new Error("Checkout configuration did not return a plan id");
return { sessionId: cfg.id, planId, purchaseUrl: cfg.purchase_url };
}import { NextRequest, NextResponse } from "next/server";
import crypto from "crypto";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getCurrentUser } from "@/lib/auth";
import { env } from "@/lib/env";
import { applicationFeeCents } from "@/lib/fees";
import { createCheckoutConfiguration } from "@/services/whop";
import { rateLimit, clientIp } from "@/lib/rate-limit";
import { COFFEE_UNIT_CENTS, MIN_TIP_CENTS, MAX_TIP_CENTS } from "@/constants";
const schema = z.discriminatedUnion("kind", [
z.object({
kind: z.literal("tip"),
creatorUsername: z.string().min(1),
amountCents: z.number().int().min(MIN_TIP_CENTS).max(MAX_TIP_CENTS),
supporterName: z.string().max(60).optional(),
message: z.string().max(500).optional(),
isPublic: z.boolean().optional().default(true),
}),
z.object({
kind: z.literal("membership"),
creatorUsername: z.string().min(1),
tierId: z.string().min(1),
}),
z.object({
kind: z.literal("shop"),
creatorUsername: z.string().min(1),
productId: z.string().min(1),
}),
]);
export async function POST(req: NextRequest) {
if (!rateLimit(`checkout:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: parsed.error.issues[0]?.message ?? "Invalid input" }, { status: 400 });
}
const input = parsed.data;
const creator = await prisma.creator.findUnique({
where: { username: input.creatorUsername },
select: {
id: true,
displayName: true,
whopCompanyId: true,
goals: { where: { isActive: true }, take: 1, select: { id: true } },
},
});
if (!creator || !creator.whopCompanyId) {
return NextResponse.json({ error: "Creator not found or not ready for payments" }, { status: 404 });
}
const user = await getCurrentUser();
const appUrl = env.NEXT_PUBLIC_APP_URL;
const returnUrl = `${appUrl}/${input.creatorUsername}?status=success`;
let amountCents: number;
let planType: "one_time" | "renewal";
let title: string;
let metadata: Record<string, string>;
if (input.kind === "tip") {
amountCents = input.amountCents;
planType = "one_time";
title = `Tip for ${creator.displayName}`;
const displayName = (input.supporterName?.trim() || user?.name || user?.username || "Someone").slice(0, 60);
const coffees = Math.max(1, Math.round(amountCents / COFFEE_UNIT_CENTS));
const support = await prisma.support.create({
data: {
creatorId: creator.id,
supporterUserId: user?.id ?? null,
supporterName: displayName,
message: input.message?.trim() || null,
amountCents,
coffees,
isPublic: input.isPublic,
status: "PENDING",
goalId: creator.goals[0]?.id ?? null,
},
});
metadata = { kind: "tip", ref: support.id, supportId: support.id, creatorId: creator.id };
} else if (input.kind === "shop") {
const product = await prisma.product.findFirst({
where: { id: input.productId, creatorId: creator.id, isActive: true },
});
if (!product) return NextResponse.json({ error: "Product not found" }, { status: 404 });
amountCents = product.priceCents;
planType = "one_time";
title = product.title;
const buyerName = (user?.name || user?.username || "Someone").slice(0, 60);
const order = await prisma.order.create({
data: {
creatorId: creator.id,
productId: product.id,
buyerUserId: user?.id ?? null,
buyerName,
amountCents,
status: "PENDING",
},
});
if (amountCents <= 0) {
await prisma.order.update({ where: { id: order.id }, data: { status: "COMPLETED" } });
await prisma.product.update({ where: { id: product.id }, data: { salesCount: { increment: 1 } } });
return NextResponse.json({ free: true, downloadUrl: product.downloadUrl ?? null });
}
metadata = { kind: "shop", ref: order.id, orderId: order.id, creatorId: creator.id };
} else {
if (!user) return NextResponse.json({ error: "login_required" }, { status: 401 });
const tier = await prisma.tier.findFirst({
where: { id: input.tierId, creatorId: creator.id, isActive: true },
});
if (!tier) return NextResponse.json({ error: "Tier not found" }, { status: 404 });
amountCents = tier.priceCents;
planType = "renewal";
title = `${tier.name} — ${creator.displayName}`;
metadata = {
kind: "membership",
ref: crypto.randomUUID(),
creatorId: creator.id,
tierId: tier.id,
userId: user.id,
};
}
try {
const checkout = await createCheckoutConfiguration({
connectedCompanyId: creator.whopCompanyId,
amountCents,
applicationFeeCents: applicationFeeCents(amountCents),
planType,
title,
redirectUrl: returnUrl,
metadata: metadata as { kind: "tip" | "membership" | "shop" } & Record<string, string>,
});
return NextResponse.json({ ...checkout, ref: metadata.ref });
} catch (err: unknown) {
console.error("Checkout creation failed:", err);
return NextResponse.json({ error: "Could not start checkout" }, { status: 502 });
}
}"use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
import type { AccentColor } from "@whop/checkout/react";
import { Button, TextField, TextArea } from "@whop/react/components";
import BrandIcon from "@/components/BrandIcon";
import { ChevronLeft } from "@/components/Icons";
const COFFEE_UNIT_CENTS = 500;
const PRESETS = [1, 3, 5];
type Step = "form" | "checkout" | "done";
export default function SupportWidget({
creatorUsername,
creatorDisplayName,
accentColor,
sandbox,
hasMemberships,
}: {
creatorUsername: string;
creatorDisplayName: string;
accentColor: string;
sandbox: boolean;
hasMemberships: boolean;
}) {
const router = useRouter();
const [mode, setMode] = useState<"once" | "membership">("once");
const [coffees, setCoffees] = useState(1);
const [custom, setCustom] = useState("");
const [name, setName] = useState("");
const [message, setMessage] = useState("");
const [step, setStep] = useState<Step>("form");
const [checkout, setCheckout] = useState<{ sessionId: string; planId: string; ref: string } | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [theme, setTheme] = useState<"light" | "dark">("light");
const confirmTriedRef = useRef(false);
useEffect(() => {
setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
}, []);
const customCents = custom ? Math.round(parseFloat(custom) * 100) : 0;
const amountCents = customCents > 0 ? customCents : coffees * COFFEE_UNIT_CENTS;
const amountLabel = `$${(amountCents / 100).toFixed(amountCents % 100 === 0 ? 0 : 2)}`;
async function startCheckout() {
setError(null);
if (amountCents < 100) {
setError("Please choose an amount of at least $1.");
return;
}
setLoading(true);
try {
const res = await fetch("/api/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
creatorUsername,
kind: "tip",
amountCents,
supporterName: name || undefined,
message: message || undefined,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not start checkout");
setLoading(false);
return;
}
setCheckout({ sessionId: data.sessionId, planId: data.planId, ref: data.ref });
setStep("checkout");
} catch {
setError("Network error. Please try again.");
} finally {
setLoading(false);
}
}
async function onComplete() {
if (!checkout || confirmTriedRef.current) return;
confirmTriedRef.current = true;
setStep("done");
for (let i = 0; i < 5; i++) {
try {
const res = await fetch("/api/checkout/confirm", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ref: checkout.ref, creatorUsername }),
});
const data = await res.json();
if (data.ok) break;
} catch {
}
await new Promise((r) => setTimeout(r, 1500));
}
router.refresh();
}
if (step === "done") {
return (
<div className="kofi-card p-6 text-center">
<div className="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-positive/15">
<BrandIcon name="confetti" className="h-8 w-8" />
</div>
<h3 className="text-lg font-bold">Thank you!</h3>
<p className="mt-1 text-sm text-muted">
Your support means a lot to {creatorDisplayName}.
</p>
<Button
size="2"
variant="soft"
color="gray"
className="mt-4"
onClick={() => {
setStep("form");
setCheckout(null);
confirmTriedRef.current = false;
setCustom("");
setMessage("");
}}
>
Send another
</Button>
</div>
);
}
if (step === "checkout" && checkout) {
return (
<div className="kofi-card overflow-hidden p-4">
<button className="mb-2 inline-flex items-center gap-1 text-sm font-semibold text-muted" onClick={() => setStep("form")}>
<ChevronLeft className="h-4 w-4" /> Back
</button>
<WhopCheckoutEmbed
sessionId={checkout.sessionId}
planId={checkout.planId}
theme={theme}
themeOptions={{ accentColor: accentColor as AccentColor }}
environment={sandbox ? "sandbox" : "production"}
returnUrl={`${typeof window !== "undefined" ? window.location.origin : ""}/${creatorUsername}?status=success`}
onComplete={onComplete}
fallback={<div className="py-10 text-center text-sm text-muted">Loading secure checkout…</div>}
/>
</div>
);
}
return (
<div className="kofi-card p-5">
<h2 className="text-lg font-bold">Show {creatorDisplayName} some love</h2>
<div className="mt-3 grid grid-cols-2 gap-1 rounded-full bg-surface-2 p-1 text-sm font-semibold">
<button
onClick={() => setMode("once")}
className={`rounded-full py-2 transition ${mode === "once" ? "bg-surface shadow-sm" : "text-muted"}`}
>
One time
</button>
<button
onClick={() => setMode("membership")}
className={`rounded-full py-2 transition ${mode === "membership" ? "bg-surface shadow-sm" : "text-muted"}`}
>
Membership
</button>
</div>
{mode === "membership" ? (
<div className="mt-5 text-center">
<p className="text-sm text-muted">
{hasMemberships
? "Join a monthly membership for exclusive perks."
: `${creatorDisplayName} hasn't set up memberships yet.`}
</p>
{hasMemberships ? (
<Link href={`/${creatorUsername}/membership`} className="btn-pill btn-accent mt-4 w-full">
See membership options
</Link>
) : null}
</div>
) : (
<>
<p className="mt-4 text-sm font-semibold">Choose amount</p>
<div className="mt-2 grid grid-cols-3 gap-2">
{PRESETS.map((n) => {
const active = customCents === 0 && coffees === n;
return (
<button
key={n}
onClick={() => {
setCoffees(n);
setCustom("");
}}
className="btn-pill inline-flex items-center justify-center gap-1.5 border text-sm"
style={
active
? { background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" }
: { borderColor: "var(--line)" }
}
>
<BrandIcon name="coffee" className="h-5 w-5" />
<span>${(n * COFFEE_UNIT_CENTS) / 100}</span>
</button>
);
})}
</div>
<div className="mt-3 flex items-center gap-2">
<span className="text-sm text-muted">or enter an amount</span>
<div className="flex flex-1 items-center rounded-full border border-line px-3 py-1.5">
<span className="text-muted">$</span>
<input
type="number"
min={1}
value={custom}
onChange={(e) => setCustom(e.target.value)}
placeholder="10"
className="w-full bg-transparent pl-1 outline-none"
/>
</div>
</div>
<TextField.Root size="3" className="mt-3">
<TextField.Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your name (optional)"
/>
</TextField.Root>
<TextArea
className="mt-2"
size="3"
value={message}
onChange={(e) => setMessage(e.target.value)}
rows={2}
placeholder="Say something nice (optional)"
/>
{error ? <p className="mt-2 text-sm text-red-600">{error}</p> : null}
<Button onClick={startCheckout} disabled={loading} size="3" variant="solid" className="mt-3 w-full">
{loading ? "Starting…" : `Support ${amountLabel}`}
</Button>
<p className="mt-2 text-center text-xs text-muted">
Every payment goes straight to {creatorDisplayName}.
</p>
</>
)}
</div>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { whopsdk } from "@/lib/whop";
import { fulfillFromMetadata } from "@/lib/fulfillment";
const schema = z.object({ ref: z.string().min(1), creatorUsername: z.string().min(1) });
export async function POST(req: NextRequest) {
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: "Invalid input" }, { status: 400 });
const creator = await prisma.creator.findUnique({
where: { username: parsed.data.creatorUsername },
select: { whopCompanyId: true },
});
if (!creator?.whopCompanyId) return NextResponse.json({ ok: false }, { status: 400 });
let matched: { id: string; metadata?: Record<string, unknown> | null } | null = null;
try {
let scanned = 0;
for await (const payment of whopsdk.payments.list({ company_id: creator.whopCompanyId, direction: "desc" })) {
const p = payment as unknown as {
id: string;
status?: string;
substatus?: string;
metadata?: Record<string, unknown> | null;
};
const settled = p.status === "paid" || p.substatus === "succeeded";
if (p.metadata?.ref === parsed.data.ref && settled) {
matched = { id: p.id, metadata: p.metadata };
break;
}
if (++scanned >= 40) break;
}
} catch (err: unknown) {
console.error("payments.list failed during confirm:", err);
}
if (!matched) return NextResponse.json({ ok: false, pending: true });
await fulfillFromMetadata(matched.metadata, matched.id);
return NextResponse.json({ ok: true });
}import { prisma } from "./prisma";
import { formatUsd } from "./fees";
import { notifyCreator } from "@/services/whop";
type CreatorLike = { whopCompanyId: string | null };
async function notify(creator: CreatorLike, n: { title: string; subtitle?: string; content: string; iconUserId?: string }) {
if (!creator.whopCompanyId) return;
await notifyCreator({ companyId: creator.whopCompanyId, restPath: "/dashboard", ...n });
}
export async function markSupportCompleted(supportId: string, whopPaymentId: string) {
const support = await prisma.support.findUnique({ where: { id: supportId }, include: { creator: true } });
if (!support || support.status === "COMPLETED") return support;
const updated = await prisma.support.update({
where: { id: supportId },
data: { status: "COMPLETED", whopPaymentId },
});
const word = support.coffees === 1 ? "coffee" : "coffees";
await notify(support.creator, {
title: "New supporter",
subtitle: `${support.supporterName} bought you ${support.coffees} ${word}`,
content: support.message?.trim()
? `"${support.message.trim()}" — ${formatUsd(support.amountCents)}`
: `You received ${formatUsd(support.amountCents)}!`,
});
return updated;
}
export async function markSupportRefunded(whopPaymentId: string) {
const support = await prisma.support.findUnique({ where: { whopPaymentId } });
if (support && support.status !== "REFUNDED") {
await prisma.support.update({ where: { id: support.id }, data: { status: "REFUNDED" } });
}
}
export async function completeOrder(orderId: string, whopPaymentId: string) {
const order = await prisma.order.findUnique({ where: { id: orderId }, include: { creator: true, product: true } });
if (!order || order.status === "COMPLETED") return;
await prisma.$transaction([
prisma.order.update({ where: { id: orderId }, data: { status: "COMPLETED", whopPaymentId } }),
prisma.product.update({ where: { id: order.productId }, data: { salesCount: { increment: 1 } } }),
]);
await notify(order.creator, {
title: "New sale",
subtitle: order.product.title,
content: `${order.buyerName} bought ${order.product.title} for ${formatUsd(order.amountCents)}`,
});
}
export async function activateMembership(params: {
creatorId: string;
userId: string;
tierId: string;
whopMembershipId?: string;
}) {
const tier = await prisma.tier.findUnique({ where: { id: params.tierId }, include: { creator: true } });
if (!tier) return;
const existing = await prisma.membership.findUnique({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
});
await prisma.membership.upsert({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
update: { status: "ACTIVE", whopMembershipId: params.whopMembershipId ?? undefined },
create: {
creatorId: params.creatorId,
userId: params.userId,
tierId: params.tierId,
status: "ACTIVE",
whopMembershipId: params.whopMembershipId ?? null,
},
});
if (!existing) {
await notify(tier.creator, {
title: "New member",
subtitle: tier.name,
content: `Someone just joined your "${tier.name}" tier (${formatUsd(tier.priceCents)}/mo)`,
});
}
}
export async function deactivateMembership(whopMembershipId: string) {
const m = await prisma.membership.findUnique({ where: { whopMembershipId } });
if (m && m.status !== "CANCELED" && m.status !== "EXPIRED") {
await prisma.membership.update({ where: { id: m.id }, data: { status: "CANCELED" } });
}
}
export async function fulfillFromMetadata(
meta: Record<string, unknown> | null | undefined,
paymentId: string,
) {
if (!meta) return;
const kind = meta.kind;
if (kind === "tip" && typeof meta.supportId === "string") {
return markSupportCompleted(meta.supportId, paymentId);
}
if (kind === "shop" && typeof meta.orderId === "string") {
return completeOrder(meta.orderId, paymentId);
}
if (
kind === "membership" &&
typeof meta.creatorId === "string" &&
typeof meta.userId === "string" &&
typeof meta.tierId === "string"
) {
return activateMembership({ creatorId: meta.creatorId, userId: meta.userId, tierId: meta.tierId });
}
}"use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { WhopCheckoutEmbed } from "@whop/checkout/react";
import type { AccentColor } from "@whop/checkout/react";
import { Button } from "@whop/react/components";
import BrandIcon from "@/components/BrandIcon";
import { X, Check } from "@/components/Icons";
type Step = "loading" | "checkout" | "free" | "done" | "error";
export default function CheckoutModal({
open,
onClose,
body,
creatorUsername,
creatorDisplayName,
accentColor,
sandbox,
}: {
open: boolean;
onClose: () => void;
body: Record<string, unknown>;
creatorUsername: string;
creatorDisplayName: string;
accentColor: string;
sandbox: boolean;
}) {
const router = useRouter();
const [step, setStep] = useState<Step>("loading");
const [checkout, setCheckout] = useState<{ sessionId: string; planId: string; ref: string } | null>(null);
const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [theme, setTheme] = useState<"light" | "dark">("light");
const startedRef = useRef(false);
const confirmTriedRef = useRef(false);
useEffect(() => {
setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
}, []);
useEffect(() => {
if (!open) {
startedRef.current = false;
confirmTriedRef.current = false;
setStep("loading");
setCheckout(null);
setDownloadUrl(null);
setError(null);
return;
}
if (startedRef.current) return;
startedRef.current = true;
(async () => {
try {
const res = await fetch("/api/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not start checkout");
setStep("error");
return;
}
if (data.free) {
setDownloadUrl(data.downloadUrl ?? null);
setStep("free");
return;
}
setCheckout({ sessionId: data.sessionId, planId: data.planId, ref: data.ref });
setStep("checkout");
} catch {
setError("Network error. Please try again.");
setStep("error");
}
})();
}, [open, body]);
async function onComplete() {
if (!checkout || confirmTriedRef.current) return;
confirmTriedRef.current = true;
setStep("done");
for (let i = 0; i < 5; i++) {
try {
const res = await fetch("/api/checkout/confirm", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ref: checkout.ref, creatorUsername }),
});
const data = await res.json();
if (data.ok) break;
} catch {
}
await new Promise((r) => setTimeout(r, 1500));
}
router.refresh();
}
if (!open) return null;
return (
<div className="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4">
<div className="kofi-card w-full max-w-md p-4">
<div className="mb-2 flex items-center justify-between">
<h3 className="text-base font-bold">
{step === "done" ? "Thank you!" : step === "free" ? "You're all set" : `Support ${creatorDisplayName}`}
</h3>
<button
onClick={onClose}
aria-label="Close"
className="grid h-8 w-8 place-items-center rounded-full text-muted hover:bg-surface-2"
>
<X className="h-4 w-4" />
</button>
</div>
{step === "loading" ? (
<div className="py-10 text-center text-sm text-muted">Starting secure checkout…</div>
) : null}
{step === "error" ? (
<div className="py-8 text-center">
<p className="text-sm text-red-600">{error}</p>
<Button size="2" variant="soft" color="gray" className="mt-4" onClick={onClose}>
Close
</Button>
</div>
) : null}
{step === "free" ? (
<div className="py-6 text-center">
<div className="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-positive/15 text-positive">
<Check className="h-7 w-7" />
</div>
<p className="text-sm font-semibold">You're all set — download ready</p>
{downloadUrl ? (
<a
href={downloadUrl}
target="_blank"
rel="noopener noreferrer"
className="btn-pill btn-accent mt-4 w-full"
>
Download
</a>
) : (
<p className="mt-2 text-sm text-muted">Check your account for delivery details.</p>
)}
<Button size="3" variant="soft" color="gray" className="mt-3 w-full" onClick={onClose}>
Close
</Button>
</div>
) : null}
{step === "done" ? (
<div className="py-6 text-center">
<div className="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-positive/15">
<BrandIcon name="confetti" className="h-8 w-8" />
</div>
<p className="text-sm text-muted">Your support means a lot to {creatorDisplayName}.</p>
<Button size="3" variant="solid" className="mt-4 w-full" onClick={onClose}>
Done
</Button>
</div>
) : null}
{step === "checkout" && checkout ? (
<div className="overflow-hidden">
<WhopCheckoutEmbed
sessionId={checkout.sessionId}
planId={checkout.planId}
theme={theme === "dark" ? "dark" : "light"}
themeOptions={{ accentColor: accentColor as AccentColor }}
environment={sandbox ? "sandbox" : "production"}
onComplete={onComplete}
fallback={<div className="py-10 text-center text-sm text-muted">Loading secure checkout…</div>}
/>
</div>
) : null}
</div>
</div>
);
}"use client";
import { useMemo, useState } from "react";
import { formatUsd } from "@/lib/fees";
import CheckoutModal from "@/components/checkout/CheckoutModal";
import { Button } from "@whop/react/components";
import { Check } from "@/components/Icons";
type Tier = {
id: string;
name: string;
description: string | null;
priceCents: number;
benefits: string[];
memberCount?: number;
};
export default function MembershipTiers({
tiers,
creatorUsername,
creatorDisplayName,
accentColor,
sandbox,
isLoggedIn,
}: {
tiers: Tier[];
creatorUsername: string;
creatorDisplayName: string;
accentColor: string;
sandbox: boolean;
isLoggedIn: boolean;
}) {
const [activeTierId, setActiveTierId] = useState<string | null>(null);
const body = useMemo(
() => ({ kind: "membership", creatorUsername, tierId: activeTierId }),
[creatorUsername, activeTierId],
);
function join(tierId: string) {
if (!isLoggedIn) {
window.location.href = `/api/auth/login?returnTo=/${creatorUsername}/membership`;
return;
}
setActiveTierId(tierId);
}
return (
<>
<div className="space-y-4">
{tiers.map((tier) => (
<div key={tier.id} className="kofi-card p-5">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<h3 className="text-lg font-bold">{tier.name}</h3>
<p className="mt-0.5 text-sm font-semibold" style={{ color: "var(--accent)" }}>
{formatUsd(tier.priceCents)}/mo
</p>
{typeof tier.memberCount === "number" ? (
<p className="mt-0.5 text-xs text-muted">
{tier.memberCount} {tier.memberCount === 1 ? "member" : "members"}
</p>
) : null}
</div>
<Button onClick={() => join(tier.id)} size="2" variant="solid" className="shrink-0">
Join
</Button>
</div>
{tier.description ? (
<p className="mt-3 whitespace-pre-wrap text-sm text-muted">{tier.description}</p>
) : null}
{tier.benefits.length > 0 ? (
<ul className="mt-4 space-y-2">
{tier.benefits.map((benefit, i) => (
<li key={i} className="flex items-start gap-2 text-sm">
<span className="mt-0.5 shrink-0" style={{ color: "var(--accent)" }}>
<Check className="h-4 w-4" />
</span>
<span>{benefit}</span>
</li>
))}
</ul>
) : null}
</div>
))}
</div>
<CheckoutModal
open={activeTierId !== null}
onClose={() => setActiveTierId(null)}
body={body}
creatorUsername={creatorUsername}
creatorDisplayName={creatorDisplayName}
accentColor={accentColor}
sandbox={sandbox}
/>
</>
);
}import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { getCurrentUser } from "@/lib/auth";
import { isSandbox } from "@/lib/env";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
import MembershipTiers from "@/components/creator/MembershipTiers";
export default async function MembershipPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: {
id: true,
displayName: true,
accentColor: true,
isActive: true,
tiers: {
where: { isActive: true },
orderBy: { priceCents: "asc" },
select: { id: true, name: true, description: true, priceCents: true, benefits: true },
},
},
});
if (!creator || !creator.isActive) notFound();
const [user, memberCounts] = await Promise.all([
getCurrentUser(),
Promise.all(
creator.tiers.map((tier) =>
prisma.membership.count({
where: { tierId: tier.id, status: { in: ["ACTIVE", "CANCELING"] } },
}),
),
),
]);
const tiers = creator.tiers.map((tier, i) => ({ ...tier, memberCount: memberCounts[i] }));
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<h1 className="text-xl font-bold">Become a regular</h1>
<p className="mt-1 text-sm text-muted">
Pick a monthly membership to back {creator.displayName} and get member-only perks.
</p>
<div className="mt-5">
{tiers.length === 0 ? (
<div className="kofi-card p-8 text-center">
<p className="text-sm text-muted">{creator.displayName} hasn't set up any membership tiers yet.</p>
</div>
) : (
<MembershipTiers
tiers={tiers}
creatorUsername={username}
creatorDisplayName={creator.displayName}
accentColor={creator.accentColor}
sandbox={isSandbox()}
isLoggedIn={Boolean(user)}
/>
)}
</div>
</div>
</>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const schema = z.object({
name: z.string().min(1).max(60),
priceCents: z.number().int().min(1).max(1_000_000),
description: z.string().max(500).optional(),
benefits: z.array(z.string().min(1).max(120)).max(20).default([]),
});
export async function POST(req: NextRequest) {
if (!rateLimit(`tiers:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const { name, priceCents, description, benefits } = parsed.data;
const count = await prisma.tier.count({ where: { creatorId: creator.id } });
const tier = await prisma.tier.create({
data: {
creatorId: creator.id,
name,
priceCents,
description: description?.trim() || null,
benefits: benefits.map((b) => b.trim()).filter(Boolean),
order: count,
},
});
return NextResponse.json({ ok: true, id: tier.id });
}import { NextRequest, NextResponse } from "next/server";
import { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
export async function DELETE(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
if (!rateLimit(`tiers-del:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const { id } = await params;
const tier = await prisma.tier.findUnique({
where: { id },
select: { id: true, creatorId: true },
});
if (!tier || tier.creatorId !== creator.id) {
return NextResponse.json({ error: "Not found" }, { status: 404 });
}
try {
await prisma.tier.delete({ where: { id: tier.id } });
} catch (err: unknown) {
if (err instanceof Prisma.PrismaClientKnownRequestError && err.code === "P2003") {
return NextResponse.json(
{ error: "This tier has members or gated posts. Deactivate it instead of deleting." },
{ status: 409 },
);
}
throw err;
}
return NextResponse.json({ ok: true });
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, TextField, TextArea } from "@whop/react/components";
import { formatUsd } from "@/lib/fees";
import { Check } from "@/components/Icons";
export interface TierRow {
id: string;
name: string;
description: string | null;
priceCents: number;
benefits: string[];
memberCount?: number;
}
export default function TierManager({ tiers }: { tiers: TierRow[] }) {
const router = useRouter();
const [name, setName] = useState("");
const [price, setPrice] = useState("");
const [description, setDescription] = useState("");
const [benefitsText, setBenefitsText] = useState("");
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
async function onSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
const priceDollars = Number(price);
if (!Number.isFinite(priceDollars) || priceDollars <= 0) {
setError("Enter a monthly price greater than $0.");
return;
}
const benefits = benefitsText
.split("\n")
.map((line) => line.trim())
.filter(Boolean);
setSaving(true);
try {
const res = await fetch("/api/tiers", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name,
priceCents: Math.round(priceDollars * 100),
description: description || undefined,
benefits,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not create tier");
setSaving(false);
return;
}
setName("");
setPrice("");
setDescription("");
setBenefitsText("");
setSaving(false);
router.refresh();
} catch {
setError("Network error. Please try again.");
setSaving(false);
}
}
async function onDelete(id: string) {
setDeletingId(id);
try {
const res = await fetch(`/api/tiers/${id}`, { method: "DELETE" });
if (!res.ok) {
const data = await res.json().catch(() => ({}));
setError(data.error ?? "Could not delete tier");
setDeletingId(null);
return;
}
setDeletingId(null);
router.refresh();
} catch {
setError("Network error. Please try again.");
setDeletingId(null);
}
}
return (
<div className="space-y-6">
{tiers.length > 0 ? (
<div className="grid gap-4 sm:grid-cols-2">
{tiers.map((tier) => (
<div key={tier.id} className="kofi-card flex flex-col p-5">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<h3 className="font-semibold">{tier.name}</h3>
<p className="text-sm text-muted">{formatUsd(tier.priceCents)}/mo</p>
</div>
{typeof tier.memberCount === "number" ? (
<span className="shrink-0 rounded-full bg-surface-2 px-2.5 py-1 text-xs text-muted">
{tier.memberCount} {tier.memberCount === 1 ? "member" : "members"}
</span>
) : null}
</div>
{tier.description ? (
<p className="mt-2 text-sm text-muted">{tier.description}</p>
) : null}
{tier.benefits.length > 0 ? (
<ul className="mt-3 space-y-1 text-sm">
{tier.benefits.map((benefit, i) => (
<li key={i} className="flex gap-2">
<Check className="h-4 w-4 shrink-0 text-positive" />
<span>{benefit}</span>
</li>
))}
</ul>
) : null}
<div className="mt-4 self-start">
<Button
type="button"
size="2"
variant="surface"
color="gray"
onClick={() => onDelete(tier.id)}
disabled={deletingId === tier.id}
>
{deletingId === tier.id ? "Deleting…" : "Delete"}
</Button>
</div>
</div>
))}
</div>
) : (
<div className="kofi-card p-6 text-sm text-muted">
No tiers yet. Add your first membership tier below.
</div>
)}
<form onSubmit={onSubmit} className="kofi-card space-y-4 p-6">
<h2 className="text-lg font-semibold">Add a tier</h2>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="tier-name">
Tier name
</label>
<TextField.Root size="3">
<TextField.Input
id="tier-name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Coffee Club"
required
maxLength={60}
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="tier-price">
Monthly price (USD)
</label>
<TextField.Root size="3">
<TextField.Slot>$</TextField.Slot>
<TextField.Input
id="tier-price"
type="number"
min="1"
step="0.01"
value={price}
onChange={(e) => setPrice(e.target.value)}
placeholder="5"
required
/>
</TextField.Root>
</div>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="tier-description">
Description <span className="font-normal text-muted">(optional)</span>
</label>
<TextArea
id="tier-description"
size="3"
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={2}
maxLength={500}
placeholder="What this tier is about."
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="tier-benefits">
Benefits <span className="font-normal text-muted">(one per line)</span>
</label>
<TextArea
id="tier-benefits"
size="3"
value={benefitsText}
onChange={(e) => setBenefitsText(e.target.value)}
rows={4}
placeholder={"Supporter-only posts\nDiscord access\nMonthly wallpaper"}
/>
</div>
{error ? <p className="text-sm text-red-600">{error}</p> : null}
<Button type="submit" size="3" variant="solid" disabled={saving}>
{saving ? "Adding…" : "Add tier"}
</Button>
</form>
</div>
);
}import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import TierManager from "@/components/dashboard/TierManager";
export default async function DashboardTiersPage() {
const { creator } = await requireCreator();
const tiers = await prisma.tier.findMany({
where: { creatorId: creator.id },
orderBy: [{ order: "asc" }, { priceCents: "asc" }],
include: {
_count: { select: { memberships: { where: { status: "ACTIVE" } } } },
},
});
const initialTiers = tiers.map((tier) => ({
id: tier.id,
name: tier.name,
description: tier.description,
priceCents: tier.priceCents,
benefits: tier.benefits,
memberCount: tier._count.memberships,
}));
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold">Membership tiers</h1>
<p className="mt-1 text-sm text-muted">
Offer monthly memberships with their own benefits and supporter-only access.
</p>
</div>
<TierManager tiers={initialTiers} />
</div>
);
}export async function activateMembership(params: {
creatorId: string;
userId: string;
tierId: string;
whopMembershipId?: string;
}) {
const tier = await prisma.tier.findUnique({ where: { id: params.tierId }, include: { creator: true } });
if (!tier) return;
const existing = await prisma.membership.findUnique({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
});
await prisma.membership.upsert({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
update: { status: "ACTIVE", whopMembershipId: params.whopMembershipId ?? undefined },
create: {
creatorId: params.creatorId,
userId: params.userId,
tierId: params.tierId,
status: "ACTIVE",
whopMembershipId: params.whopMembershipId ?? null,
},
});
if (!existing) {
await notify(tier.creator, {
title: "New member",
subtitle: tier.name,
content: `Someone just joined your "${tier.name}" tier (${formatUsd(tier.priceCents)}/mo)`,
});
}
}} else if (input.kind === "shop") {
const product = await prisma.product.findFirst({
where: { id: input.productId, creatorId: creator.id, isActive: true },
});
if (!product) return NextResponse.json({ error: "Product not found" }, { status: 404 });
amountCents = product.priceCents;
planType = "one_time";
title = product.title;
const buyerName = (user?.name || user?.username || "Someone").slice(0, 60);
const order = await prisma.order.create({
data: {
creatorId: creator.id,
productId: product.id,
buyerUserId: user?.id ?? null,
buyerName,
amountCents,
status: "PENDING",
},
});
if (amountCents <= 0) {
await prisma.order.update({ where: { id: order.id }, data: { status: "COMPLETED" } });
await prisma.product.update({ where: { id: product.id }, data: { salesCount: { increment: 1 } } });
return NextResponse.json({ free: true, downloadUrl: product.downloadUrl ?? null });
}
metadata = { kind: "shop", ref: order.id, orderId: order.id, creatorId: creator.id };
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const schema = z.object({
title: z.string().min(1).max(120),
description: z.string().max(1000).optional(),
priceCents: z.number().int().min(0).max(10_000_000),
imageUrl: z.string().url().max(2000).optional(),
type: z.enum(["DIGITAL", "PHYSICAL"]),
downloadUrl: z.string().url().max(2000).optional(),
});
export async function POST(req: NextRequest) {
if (!rateLimit(`products:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const { title, description, priceCents, imageUrl, type, downloadUrl } = parsed.data;
const product = await prisma.product.create({
data: {
creatorId: creator.id,
title,
description: description?.trim() || null,
priceCents,
imageUrl: imageUrl || null,
type,
downloadUrl: downloadUrl || null,
},
});
return NextResponse.json({ ok: true, id: product.id });
}import { NextRequest, NextResponse } from "next/server";
import { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
export async function DELETE(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
if (!rateLimit(`products-del:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const { id } = await params;
const product = await prisma.product.findUnique({
where: { id },
select: { id: true, creatorId: true },
});
if (!product || product.creatorId !== creator.id) {
return NextResponse.json({ error: "Not found" }, { status: 404 });
}
try {
await prisma.product.delete({ where: { id: product.id } });
} catch (err: unknown) {
if (err instanceof Prisma.PrismaClientKnownRequestError && err.code === "P2003") {
return NextResponse.json(
{ error: "This product has orders and can't be deleted. Deactivate it instead." },
{ status: 409 },
);
}
throw err;
}
return NextResponse.json({ ok: true });
}"use client";
/* eslint-disable @next/next/no-img-element */
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, TextField, TextArea, Select } from "@whop/react/components";
import { formatUsd } from "@/lib/fees";
import BrandIcon from "@/components/BrandIcon";
type ProductType = "DIGITAL" | "PHYSICAL";
export interface ProductRow {
id: string;
title: string;
description: string | null;
priceCents: number;
imageUrl: string | null;
type: ProductType;
salesCount: number;
}
export default function ProductManager({ products }: { products: ProductRow[] }) {
const router = useRouter();
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [price, setPrice] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [type, setType] = useState<ProductType>("DIGITAL");
const [downloadUrl, setDownloadUrl] = useState("");
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
async function onSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
const priceDollars = price.trim() === "" ? 0 : Number(price);
if (!Number.isFinite(priceDollars) || priceDollars < 0) {
setError("Enter a valid price ($0 or more).");
return;
}
setSaving(true);
try {
const res = await fetch("/api/products", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title,
description: description || undefined,
priceCents: Math.round(priceDollars * 100),
imageUrl: imageUrl || undefined,
type,
downloadUrl: downloadUrl || undefined,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not create product");
setSaving(false);
return;
}
setTitle("");
setDescription("");
setPrice("");
setImageUrl("");
setType("DIGITAL");
setDownloadUrl("");
setSaving(false);
router.refresh();
} catch {
setError("Network error. Please try again.");
setSaving(false);
}
}
async function onDelete(id: string) {
setDeletingId(id);
try {
const res = await fetch(`/api/products/${id}`, { method: "DELETE" });
if (!res.ok) {
const data = await res.json().catch(() => ({}));
setError(data.error ?? "Could not delete product");
setDeletingId(null);
return;
}
setDeletingId(null);
router.refresh();
} catch {
setError("Network error. Please try again.");
setDeletingId(null);
}
}
return (
<div className="space-y-6">
{products.length > 0 ? (
<div className="grid gap-4 sm:grid-cols-2">
{products.map((product) => (
<div key={product.id} className="kofi-card flex gap-4 p-4">
{product.imageUrl ? (
<img
src={product.imageUrl}
alt=""
className="h-20 w-20 shrink-0 rounded-xl border border-line object-cover"
/>
) : (
<div className="grid h-20 w-20 shrink-0 place-items-center rounded-xl border border-line bg-surface-2">
<BrandIcon name="shop" className="h-12 w-12" />
</div>
)}
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-start justify-between gap-2">
<h3 className="truncate font-semibold">{product.title}</h3>
<span className="shrink-0 font-semibold">
{product.priceCents === 0 ? "Free" : formatUsd(product.priceCents)}
</span>
</div>
<p className="mt-0.5 text-xs text-muted">
{product.type === "DIGITAL" ? "Digital" : "Physical"} · {product.salesCount} sold
</p>
{product.description ? (
<p className="mt-1 line-clamp-2 text-sm text-muted">{product.description}</p>
) : null}
<div className="mt-auto self-start pt-2">
<Button
type="button"
size="2"
variant="surface"
color="gray"
onClick={() => onDelete(product.id)}
disabled={deletingId === product.id}
>
{deletingId === product.id ? "Deleting…" : "Delete"}
</Button>
</div>
</div>
</div>
))}
</div>
) : (
<div className="kofi-card p-6 text-sm text-muted">
No products yet. Add your first item below.
</div>
)}
<form onSubmit={onSubmit} className="kofi-card space-y-4 p-6">
<h2 className="text-lg font-semibold">Add a product</h2>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-title">
Title
</label>
<TextField.Root size="3">
<TextField.Input
id="product-title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="High-res wallpaper pack"
required
maxLength={120}
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-description">
Description <span className="font-normal text-muted">(optional)</span>
</label>
<TextArea
id="product-description"
size="3"
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={2}
maxLength={1000}
placeholder="What's included."
/>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-price">
Price (USD) <span className="font-normal text-muted">— 0 for free</span>
</label>
<TextField.Root size="3">
<TextField.Slot>$</TextField.Slot>
<TextField.Input
id="product-price"
type="number"
min="0"
step="0.01"
value={price}
onChange={(e) => setPrice(e.target.value)}
placeholder="0"
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-type">
Type
</label>
<Select.Root value={type} onValueChange={(v) => setType(v as ProductType)}>
<Select.Trigger id="product-type" className="w-full" />
<Select.Content>
<Select.Item value="DIGITAL">Digital</Select.Item>
<Select.Item value="PHYSICAL">Physical</Select.Item>
</Select.Content>
</Select.Root>
</div>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-image">
Image URL <span className="font-normal text-muted">(optional)</span>
</label>
<TextField.Root size="3">
<TextField.Input
id="product-image"
type="url"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
placeholder="https://…"
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="product-download">
Download URL <span className="font-normal text-muted">(optional, for digital)</span>
</label>
<TextField.Root size="3">
<TextField.Input
id="product-download"
type="url"
value={downloadUrl}
onChange={(e) => setDownloadUrl(e.target.value)}
placeholder="https://…"
/>
</TextField.Root>
</div>
{error ? <p className="text-sm text-red-600">{error}</p> : null}
<Button type="submit" size="3" variant="solid" disabled={saving}>
{saving ? "Adding…" : "Add product"}
</Button>
</form>
</div>
);
}import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import ProductManager from "@/components/dashboard/ProductManager";
export default async function DashboardShopPage() {
const { creator } = await requireCreator();
const products = await prisma.product.findMany({
where: { creatorId: creator.id },
orderBy: { createdAt: "desc" },
});
const initialProducts = products.map((product) => ({
id: product.id,
title: product.title,
description: product.description,
priceCents: product.priceCents,
imageUrl: product.imageUrl,
type: product.type,
salesCount: product.salesCount,
}));
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold">Shop</h1>
<p className="mt-1 text-sm text-muted">
Sell digital downloads or physical goods. Set a price of $0 to offer something for free.
</p>
</div>
<ProductManager products={initialProducts} />
</div>
);
}/* eslint-disable @next/next/no-img-element */
"use client";
import { useMemo, useState } from "react";
import { formatUsd } from "@/lib/fees";
import CheckoutModal from "@/components/checkout/CheckoutModal";
import { Button } from "@whop/react/components";
import BrandIcon from "@/components/BrandIcon";
type Product = {
id: string;
title: string;
description: string | null;
priceCents: number;
imageUrl: string | null;
salesCount: number;
};
export default function ShopGrid({
products,
creatorUsername,
creatorDisplayName,
accentColor,
sandbox,
}: {
products: Product[];
creatorUsername: string;
creatorDisplayName: string;
accentColor: string;
sandbox: boolean;
}) {
const [activeProductId, setActiveProductId] = useState<string | null>(null);
const body = useMemo(
() => ({ kind: "shop", creatorUsername, productId: activeProductId }),
[creatorUsername, activeProductId],
);
return (
<>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{products.map((product) => {
const isFree = product.priceCents === 0;
return (
<div key={product.id} className="kofi-card flex flex-col overflow-hidden">
<div className="aspect-square w-full bg-surface-2">
{product.imageUrl ? (
<img src={product.imageUrl} alt={product.title} className="h-full w-full object-cover" />
) : (
<div className="grid h-full w-full place-items-center"><BrandIcon name="shop" className="h-20 w-20" /></div>
)}
</div>
<div className="flex flex-1 flex-col p-4">
<h3 className="font-semibold">{product.title}</h3>
{product.description ? (
<p className="mt-1 line-clamp-2 text-sm text-muted">{product.description}</p>
) : null}
<div className="mt-3 flex items-center justify-between gap-2">
<div>
<p className="text-sm font-bold">{isFree ? "Free" : formatUsd(product.priceCents)}</p>
<p className="text-xs text-muted">
{product.salesCount} {product.salesCount === 1 ? "sold" : "sold"}
</p>
</div>
<Button
onClick={() => setActiveProductId(product.id)}
size="2"
variant="solid"
className="shrink-0"
>
{isFree ? "Get" : "Buy"}
</Button>
</div>
</div>
</div>
);
})}
</div>
<CheckoutModal
open={activeProductId !== null}
onClose={() => setActiveProductId(null)}
body={body}
creatorUsername={creatorUsername}
creatorDisplayName={creatorDisplayName}
accentColor={accentColor}
sandbox={sandbox}
/>
</>
);
}import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { isSandbox } from "@/lib/env";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
import ShopGrid from "@/components/creator/ShopGrid";
export default async function ShopPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: {
id: true,
displayName: true,
accentColor: true,
isActive: true,
products: {
where: { isActive: true },
orderBy: { createdAt: "desc" },
select: { id: true, title: true, description: true, priceCents: true, imageUrl: true, salesCount: true },
},
},
});
if (!creator || !creator.isActive) notFound();
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<h1 className="text-xl font-bold">Shop</h1>
<p className="mt-1 text-sm text-muted">Grab something from {creator.displayName}’s shop and back their work.</p>
<div className="mt-5">
{creator.products.length === 0 ? (
<div className="kofi-card p-8 text-center">
<p className="text-sm text-muted">{creator.displayName} hasn't added any products yet.</p>
</div>
) : (
<ShopGrid
products={creator.products}
creatorUsername={username}
creatorDisplayName={creator.displayName}
accentColor={creator.accentColor}
sandbox={isSandbox()}
/>
)}
</div>
</div>
</>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const schema = z
.object({
title: z.string().min(1).max(140),
content: z.string().min(1).max(10000),
imageUrl: z.string().url().max(2000).optional(),
visibility: z.enum(["PUBLIC", "SUPPORTERS", "TIER"]),
minimumTierId: z.string().min(1).optional(),
pinned: z.boolean().optional().default(false),
})
.refine((data) => data.visibility !== "TIER" || Boolean(data.minimumTierId), {
message: "Pick a tier for tier-gated posts",
path: ["minimumTierId"],
});
export async function POST(req: NextRequest) {
if (!rateLimit(`posts:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const { title, content, imageUrl, visibility, minimumTierId, pinned } = parsed.data;
let resolvedTierId: string | null = null;
if (visibility === "TIER") {
const tier = await prisma.tier.findFirst({
where: { id: minimumTierId, creatorId: creator.id },
select: { id: true },
});
if (!tier) {
return NextResponse.json({ error: "Tier not found" }, { status: 404 });
}
resolvedTierId = tier.id;
}
const post = await prisma.post.create({
data: {
creatorId: creator.id,
title,
content,
imageUrl: imageUrl || null,
visibility,
minimumTierId: resolvedTierId,
pinned,
},
});
return NextResponse.json({ ok: true, id: post.id });
}import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
export async function DELETE(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
if (!rateLimit(`posts-del:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const { id } = await params;
const post = await prisma.post.findUnique({
where: { id },
select: { id: true, creatorId: true },
});
if (!post || post.creatorId !== creator.id) {
return NextResponse.json({ error: "Not found" }, { status: 404 });
}
await prisma.post.delete({ where: { id: post.id } });
return NextResponse.json({ ok: true });
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, TextField, TextArea, Select, Switch } from "@whop/react/components";
import { Pin } from "@/components/Icons";
type Visibility = "PUBLIC" | "SUPPORTERS" | "TIER";
interface TierOption {
id: string;
name: string;
}
export interface PostRow {
id: string;
title: string;
visibility: Visibility;
minimumTierName: string | null;
pinned: boolean;
createdAt: string;
}
const VISIBILITY_LABEL: Record<Visibility, string> = {
PUBLIC: "Public",
SUPPORTERS: "Supporters",
TIER: "Tier",
};
export default function PostManager({
posts,
tiers,
}: {
posts: PostRow[];
tiers: TierOption[];
}) {
const router = useRouter();
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [visibility, setVisibility] = useState<Visibility>("PUBLIC");
const [minimumTierId, setMinimumTierId] = useState("");
const [pinned, setPinned] = useState(false);
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
async function onSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
if (visibility === "TIER" && !minimumTierId) {
setError("Pick a tier for tier-gated posts.");
return;
}
setSaving(true);
try {
const res = await fetch("/api/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title,
content,
imageUrl: imageUrl || undefined,
visibility,
minimumTierId: visibility === "TIER" ? minimumTierId : undefined,
pinned,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not create post");
setSaving(false);
return;
}
setTitle("");
setContent("");
setImageUrl("");
setVisibility("PUBLIC");
setMinimumTierId("");
setPinned(false);
setSaving(false);
router.refresh();
} catch {
setError("Network error. Please try again.");
setSaving(false);
}
}
async function onDelete(id: string) {
setDeletingId(id);
try {
const res = await fetch(`/api/posts/${id}`, { method: "DELETE" });
if (!res.ok) {
const data = await res.json().catch(() => ({}));
setError(data.error ?? "Could not delete post");
setDeletingId(null);
return;
}
setDeletingId(null);
router.refresh();
} catch {
setError("Network error. Please try again.");
setDeletingId(null);
}
}
return (
<div className="space-y-6">
{posts.length > 0 ? (
<ul className="space-y-3">
{posts.map((post) => (
<li key={post.id} className="kofi-card flex items-center justify-between gap-4 p-4">
<div className="min-w-0">
<div className="flex items-center gap-2">
{post.pinned ? <span title="Pinned" className="text-muted"><Pin className="h-4 w-4" /></span> : null}
<h3 className="truncate font-semibold">{post.title}</h3>
</div>
<p className="mt-0.5 text-xs text-muted">
<span className="rounded-full bg-surface-2 px-2 py-0.5">
{post.visibility === "TIER" && post.minimumTierName
? post.minimumTierName
: VISIBILITY_LABEL[post.visibility]}
</span>{" "}
· {new Date(post.createdAt).toLocaleDateString()}
</p>
</div>
<Button
type="button"
size="2"
variant="surface"
color="gray"
className="shrink-0"
onClick={() => onDelete(post.id)}
disabled={deletingId === post.id}
>
{deletingId === post.id ? "Deleting…" : "Delete"}
</Button>
</li>
))}
</ul>
) : (
<div className="kofi-card p-6 text-sm text-muted">
No posts yet. Write your first update below.
</div>
)}
<form onSubmit={onSubmit} className="kofi-card space-y-4 p-6">
<h2 className="text-lg font-semibold">Write a post</h2>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="post-title">
Title
</label>
<TextField.Root size="3">
<TextField.Input
id="post-title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="A new piece is up!"
required
maxLength={140}
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="post-content">
Content
</label>
<TextArea
id="post-content"
size="3"
value={content}
onChange={(e) => setContent(e.target.value)}
rows={5}
required
maxLength={10000}
placeholder="Share what you've been working on…"
/>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="post-image">
Image URL <span className="font-normal text-muted">(optional)</span>
</label>
<TextField.Root size="3">
<TextField.Input
id="post-image"
type="url"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
placeholder="https://…"
/>
</TextField.Root>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="post-visibility">
Who can see it
</label>
<Select.Root value={visibility} onValueChange={(v) => setVisibility(v as Visibility)}>
<Select.Trigger id="post-visibility" className="w-full" />
<Select.Content>
<Select.Item value="PUBLIC">Public — everyone</Select.Item>
<Select.Item value="SUPPORTERS">Supporters only</Select.Item>
<Select.Item value="TIER">Specific tier</Select.Item>
</Select.Content>
</Select.Root>
</div>
{visibility === "TIER" ? (
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="post-tier">
Minimum tier
</label>
<Select.Root
value={minimumTierId || undefined}
onValueChange={(v) => setMinimumTierId(v)}
>
<Select.Trigger id="post-tier" className="w-full" placeholder="Select a tier…" />
<Select.Content>
{tiers.map((tier) => (
<Select.Item key={tier.id} value={tier.id}>
{tier.name}
</Select.Item>
))}
</Select.Content>
</Select.Root>
{tiers.length === 0 ? (
<p className="mt-1 text-xs text-muted">Create a tier first to gate by tier.</p>
) : null}
</div>
) : null}
</div>
<label className="flex items-center gap-2 text-sm">
<Switch checked={pinned} onCheckedChange={setPinned} />
Pin this post to the top of my page
</label>
{error ? <p className="text-sm text-red-600">{error}</p> : null}
<Button type="submit" size="3" variant="solid" disabled={saving}>
{saving ? "Publishing…" : "Publish post"}
</Button>
</form>
</div>
);
}import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import PostManager from "@/components/dashboard/PostManager";
export default async function DashboardPostsPage() {
const { creator } = await requireCreator();
const [posts, tiers] = await Promise.all([
prisma.post.findMany({
where: { creatorId: creator.id },
orderBy: [{ pinned: "desc" }, { createdAt: "desc" }],
include: { minimumTier: { select: { name: true } } },
}),
prisma.tier.findMany({
where: { creatorId: creator.id, isActive: true },
orderBy: [{ order: "asc" }, { priceCents: "asc" }],
select: { id: true, name: true },
}),
]);
const initialPosts = posts.map((post) => ({
id: post.id,
title: post.title,
visibility: post.visibility,
minimumTierName: post.minimumTier?.name ?? null,
pinned: post.pinned,
createdAt: post.createdAt.toISOString(),
}));
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold">Posts</h1>
<p className="mt-1 text-sm text-muted">
Share updates with everyone, your supporters, or a specific tier.
</p>
</div>
<PostManager posts={initialPosts} tiers={tiers} />
</div>
);
}import { notFound } from "next/navigation";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { getViewerContext, canViewPost } from "@/lib/creator";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
import BrandIcon from "@/components/BrandIcon";
import { Pin } from "@/components/Icons";
function formatDate(date: Date): string {
return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(date);
}
function visibilityLabel(visibility: "PUBLIC" | "SUPPORTERS" | "TIER", tierName: string | null): string {
if (visibility === "PUBLIC") return "Public";
if (visibility === "TIER") return tierName ?? "Members";
return "Supporters";
}
export default async function PostsPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: { id: true, userId: true, isActive: true },
});
if (!creator || !creator.isActive) notFound();
const [posts, viewer] = await Promise.all([
prisma.post.findMany({
where: { creatorId: creator.id, published: true },
orderBy: [{ pinned: "desc" }, { createdAt: "desc" }],
include: { minimumTier: { select: { id: true, name: true } } },
}),
getViewerContext(creator.id, creator.userId),
]);
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<h1 className="text-xl font-bold">Posts</h1>
<div className="mt-5 space-y-4">
{posts.length === 0 ? (
<div className="kofi-card p-8 text-center">
<p className="text-sm text-muted">No posts yet.</p>
</div>
) : (
posts.map((post) => {
const canView = canViewPost(post, viewer);
return (
<div key={post.id} className="kofi-card p-5">
<div className="mb-1 flex flex-wrap items-center gap-2 text-xs text-muted">
{post.pinned ? (
<span className="inline-flex items-center gap-1 font-semibold" style={{ color: "var(--accent)" }}>
<Pin className="h-3.5 w-3.5" /> Pinned
</span>
) : null}
<span>{formatDate(post.createdAt)}</span>
<span className="rounded-full bg-surface-2 px-2 py-0.5 font-medium">
{visibilityLabel(post.visibility, post.minimumTier?.name ?? null)}
</span>
</div>
{canView ? (
<>
<Link
href={`/${username}/post/${post.id}`}
className="text-lg font-bold hover:underline"
>
{post.title}
</Link>
<p className="mt-1 line-clamp-3 text-sm text-muted">{post.content}</p>
<Link
href={`/${username}/post/${post.id}`}
className="mt-2 inline-block text-sm font-semibold"
style={{ color: "var(--accent)" }}
>
Read more
</Link>
</>
) : (
<>
<h2 className="text-lg font-bold">{post.title}</h2>
<p className="mt-2 rounded-lg bg-surface-2 px-3 py-2 text-sm text-muted">
<BrandIcon name="lock" className="mr-1 h-4 w-4 align-text-bottom" />This post is for supporters.{" "}
<Link href={`/${username}#support`} className="font-semibold" style={{ color: "var(--accent)" }}>
Unlock it
</Link>
</p>
</>
)}
</div>
);
})
)}
</div>
</div>
</>
);
}/* eslint-disable @next/next/no-img-element */
import { notFound } from "next/navigation";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { getViewerContext, canViewPost } from "@/lib/creator";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
import BrandIcon from "@/components/BrandIcon";
import { ChevronLeft } from "@/components/Icons";
function formatDate(date: Date): string {
return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(date);
}
export default async function PostPage({ params }: { params: Promise<{ username: string; id: string }> }) {
const { username, id } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: { id: true, userId: true, displayName: true, isActive: true },
});
if (!creator || !creator.isActive) notFound();
const post = await prisma.post.findUnique({
where: { id },
include: { minimumTier: { select: { id: true, name: true } } },
});
if (!post || post.creatorId !== creator.id || !post.published) notFound();
const viewer = await getViewerContext(creator.id, creator.userId);
const canView = canViewPost(post, viewer);
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<article className="kofi-card mx-auto max-w-2xl p-6">
<Link href={`/${username}/posts`} className="inline-flex items-center gap-1 text-sm font-semibold text-muted hover:text-ink">
<ChevronLeft className="h-4 w-4" /> All posts
</Link>
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted">
<span>{formatDate(post.createdAt)}</span>
{post.visibility !== "PUBLIC" ? (
<span className="inline-flex items-center gap-1 rounded-full bg-surface-2 px-2 py-0.5 font-medium">
<BrandIcon name="lock" className="h-3.5 w-3.5" />
{post.minimumTier?.name ?? "Supporters"}
</span>
) : null}
</div>
<h1 className="mt-2 text-2xl font-bold">{post.title}</h1>
{canView ? (
<>
{post.imageUrl ? (
<img src={post.imageUrl} alt="" className="mt-4 w-full rounded-xl object-cover" />
) : null}
<div className="mt-4 whitespace-pre-wrap text-[15px] leading-relaxed">{post.content}</div>
</>
) : (
<div className="mt-6 rounded-xl border border-line bg-surface-2 p-6 text-center">
<div className="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-surface">
<BrandIcon name="lock" className="h-8 w-8" />
</div>
<p className="text-sm font-semibold">This post is for supporters</p>
<p className="mt-1 text-sm text-muted">
Back {creator.displayName} to unlock this post and more.
</p>
<Link href={`/${username}#support`} className="btn-pill btn-accent mt-4">
Unlock
</Link>
</div>
)}
</article>
</div>
</>
);
}/* eslint-disable @next/next/no-img-element */
import { notFound } from "next/navigation";
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
export default async function GalleryPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: { id: true, isActive: true },
});
if (!creator || !creator.isActive) notFound();
const posts = await prisma.post.findMany({
where: { creatorId: creator.id, published: true, imageUrl: { not: null } },
orderBy: [{ pinned: "desc" }, { createdAt: "desc" }],
select: { id: true, title: true, imageUrl: true },
});
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<h1 className="text-xl font-bold">Gallery</h1>
<div className="mt-5">
{posts.length === 0 ? (
<div className="kofi-card p-8 text-center">
<p className="text-sm text-muted">No images yet.</p>
</div>
) : (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
{posts.map((post) => (
<Link
key={post.id}
href={`/${username}/post/${post.id}`}
className="kofi-card group block aspect-square overflow-hidden"
>
<img
src={post.imageUrl as string}
alt={post.title}
className="h-full w-full object-cover transition group-hover:scale-105"
/>
</Link>
))}
</div>
)}
</div>
</div>
</>
);
}import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { formatUsd } from "@/lib/fees";
import CreatorProfileHeader from "@/components/creator/CreatorProfileHeader";
export default async function LeaderboardPage({ params }: { params: Promise<{ username: string }> }) {
const { username } = await params;
const creator = await prisma.creator.findUnique({
where: { username },
select: { id: true, displayName: true, isActive: true },
});
if (!creator || !creator.isActive) notFound();
const grouped = await prisma.support.groupBy({
by: ["supporterName"],
where: { creatorId: creator.id, status: "COMPLETED", isPublic: true },
_sum: { amountCents: true, coffees: true },
orderBy: { _sum: { amountCents: "desc" } },
take: 25,
});
const rows = grouped.map((row) => ({
name: row.supporterName,
totalCents: row._sum.amountCents ?? 0,
coffees: row._sum.coffees ?? 0,
}));
return (
<>
<CreatorProfileHeader username={username} />
<div className="mx-auto max-w-5xl px-5 py-6">
<h1 className="text-xl font-bold">Top supporters</h1>
<p className="mt-1 text-sm text-muted">The biggest supporters of {creator.displayName}.</p>
<div className="mt-5">
{rows.length === 0 ? (
<div className="kofi-card p-8 text-center">
<p className="text-sm text-muted">No supporters yet. Be the first!</p>
</div>
) : (
<div className="kofi-card divide-y divide-line overflow-hidden">
{rows.map((row, i) => (
<div key={`${row.name}-${i}`} className="flex items-center gap-4 px-5 py-3">
<span
className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-surface-2 text-sm font-bold"
style={i < 3 ? { background: "var(--accent)", color: "#fff" } : undefined}
>
{i + 1}
</span>
<div className="min-w-0 flex-1">
<p className="truncate font-semibold">{row.name}</p>
<p className="text-xs text-muted">
{row.coffees} {row.coffees === 1 ? "coffee" : "coffees"}
</p>
</div>
<span className="shrink-0 font-bold">{formatUsd(row.totalCents)}</span>
</div>
))}
</div>
)}
</div>
</div>
</>
);
}import { NextRequest, NextResponse } from "next/server";
import { whopsdk } from "@/lib/whop";
import { prisma } from "@/lib/prisma";
import {
fulfillFromMetadata,
activateMembership,
deactivateMembership,
markSupportRefunded,
} from "@/lib/fulfillment";
type WebhookEvent = { id?: string; type: string; data: Record<string, unknown> };
export async function POST(req: NextRequest) {
const bodyText = await req.text();
const headers = Object.fromEntries(req.headers);
let event: WebhookEvent;
try {
event = whopsdk.webhooks.unwrap(bodyText, { headers }) as unknown as WebhookEvent;
} catch (err: unknown) {
console.error("Webhook signature verification failed:", err);
return new NextResponse("invalid signature", { status: 401 });
}
const eventId = event.id ?? headers["webhook-id"];
if (eventId) {
const seen = await prisma.processedWebhook.findUnique({ where: { id: eventId } }).catch(() => null);
if (seen) return new NextResponse("ok", { status: 200 });
await prisma.processedWebhook.create({ data: { id: eventId, type: event.type } }).catch(() => {});
}
try {
const data = event.data;
switch (event.type) {
case "payment.succeeded": {
const id = String(data.id ?? "");
const metadata = (data.metadata ?? null) as Record<string, unknown> | null;
if (id) await fulfillFromMetadata(metadata, id);
break;
}
case "membership.activated": {
const meta = (data.metadata ?? {}) as Record<string, unknown>;
if (
typeof meta.creatorId === "string" &&
typeof meta.userId === "string" &&
typeof meta.tierId === "string"
) {
await activateMembership({
creatorId: meta.creatorId,
userId: meta.userId,
tierId: meta.tierId,
whopMembershipId: String(data.id ?? ""),
});
}
break;
}
case "membership.deactivated": {
const id = String(data.id ?? "");
if (id) await deactivateMembership(id);
break;
}
case "refund.created": {
const paymentId = String(data.payment_id ?? (data.payment as { id?: string } | undefined)?.id ?? "");
if (paymentId) await markSupportRefunded(paymentId);
break;
}
default:
break;
}
} catch (err: unknown) {
console.error(`Webhook handler error for ${event.type}:`, err);
}
return new NextResponse("ok", { status: 200 });
}export async function deactivateMembership(whopMembershipId: string) {
const m = await prisma.membership.findUnique({ where: { whopMembershipId } });
if (m && m.status !== "CANCELED" && m.status !== "EXPIRED") {
await prisma.membership.update({ where: { id: m.id }, data: { status: "CANCELED" } });
}
}export async function markSupportRefunded(whopPaymentId: string) {
const support = await prisma.support.findUnique({ where: { whopPaymentId } });
if (support && support.status !== "REFUNDED") {
await prisma.support.update({ where: { id: support.id }, data: { status: "REFUNDED" } });
}
}import { NextRequest, NextResponse } from "next/server";
import { requireCreator } from "@/lib/auth";
import { createCompanyAccessToken } from "@/services/whop";
import { rateLimit, clientIp } from "@/lib/rate-limit";
export async function GET(req: NextRequest) {
if (!rateLimit(`payouts-token:${clientIp(req)}`, 30, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const companyId = req.nextUrl.searchParams.get("companyId");
if (!companyId) {
return NextResponse.json({ error: "Missing companyId" }, { status: 400 });
}
if (!creator.whopCompanyId || companyId !== creator.whopCompanyId) {
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
}
try {
const token = await createCompanyAccessToken(companyId);
return NextResponse.json({ token });
} catch (err: unknown) {
console.error("Payout token creation failed:", err);
return NextResponse.json({ error: "Could not create payout token" }, { status: 502 });
}
}"use client";
import { useEffect, useRef, useState } from "react";
import {
Elements,
PayoutsSession,
usePayoutsSession,
StatusBannerElement,
BalanceElement,
WithdrawalsElement,
} from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";
import { Button } from "@whop/react/components";
import { formatUsd } from "@/lib/fees";
import BrandIcon from "@/components/BrandIcon";
const elementsByEnv: Partial<Record<"production" | "sandbox", ReturnType<typeof loadWhopElements>>> = {};
function getElements(environment: "production" | "sandbox") {
return (elementsByEnv[environment] ??= loadWhopElements({ environment }));
}
type ThemeAccent = NonNullable<
NonNullable<Parameters<typeof Elements>[0]["appearance"]>["theme"]
>["accentColor"];
type PortalProps = {
companyId: string;
accentColor: string;
sandbox: boolean;
earnedCents: number;
activated: boolean;
availableCents: number;
pendingCents: number;
};
function Loading({ height }: { height: number }) {
return (
<div className="grid place-items-center text-sm text-muted" style={{ height }}>
Loading…
</div>
);
}
function Card({ title, children }: { title?: string; children: React.ReactNode }) {
return (
<section className="kofi-card p-5">
{title ? (
<h2 className="mb-3 text-sm font-bold uppercase tracking-wide text-muted">{title}</h2>
) : null}
{children}
</section>
);
}
function BalanceSummary({
earnedCents,
activated,
availableCents,
pendingCents,
sandbox,
}: {
earnedCents: number;
activated: boolean;
availableCents: number;
pendingCents: number;
sandbox: boolean;
}) {
return (
<Card title="Balance">
<div className="flex items-end justify-between gap-4">
<div>
<p className="text-3xl font-bold">{formatUsd(earnedCents)}</p>
<p className="text-sm text-muted">Total earned from supporters</p>
</div>
{activated ? (
<div className="text-right">
<p className="text-lg font-semibold">{formatUsd(availableCents)}</p>
<p className="text-xs text-muted">
Available to withdraw{pendingCents > 0 ? ` · ${formatUsd(pendingCents)} pending` : ""}
</p>
</div>
) : null}
</div>
{sandbox ? (
<p className="mt-3 border-t border-line pt-3 text-xs text-muted">
You’re in sandbox mode, so your withdrawable Whop balance stays $0 even after a
test payment. On production, settled payments appear here once your payout account is
verified.
</p>
) : null}
</Card>
);
}
function ActivatePayouts() {
const session = usePayoutsSession();
return (
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-4">
<span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-surface-2">
<BrandIcon name="money" className="h-7 w-7" />
</span>
<div>
<h3 className="font-bold">Activate payouts to withdraw</h3>
<p className="mt-1 text-sm text-muted">
Verify your identity and add a bank account or PayPal. It takes a few minutes, and you
only do it once.
</p>
</div>
</div>
<Button
onClick={() => session?.showVerifyModal({})}
size="3"
variant="solid"
className="w-full shrink-0 sm:w-auto"
>
Activate payouts
</Button>
</div>
);
}
function EmbeddedPortal({ companyId, accentColor, sandbox, activated }: {
companyId: string;
accentColor: string;
sandbox: boolean;
activated: boolean;
}) {
const [dark, setDark] = useState(false);
const [failed, setFailed] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = document.documentElement;
const sync = () => setDark(el.classList.contains("dark"));
sync();
const observer = new MutationObserver(sync);
observer.observe(el, { attributes: true, attributeFilter: ["class"] });
return () => observer.disconnect();
}, []);
useEffect(() => {
const t = setTimeout(() => {
if (!containerRef.current?.querySelector("iframe")) setFailed(true);
}, 8000);
return () => clearTimeout(t);
}, []);
const origin = typeof window !== "undefined" ? window.location.origin : "";
const elements = getElements(sandbox ? "sandbox" : "production");
return (
<Card title={activated ? "Withdraw" : "Payouts"}>
{failed ? (
<p className="rounded-xl border border-line bg-surface-2 px-4 py-3 text-sm text-muted">
We couldn't load the live payout portal. Refresh the page to try again.
</p>
) : null}
<div ref={containerRef} className={failed ? "hidden" : undefined}>
<Elements
elements={elements}
appearance={{ theme: { appearance: dark ? "dark" : "light", accentColor: accentColor as ThemeAccent } }}
>
<PayoutsSession
token={() =>
fetch(`/api/payouts/token?companyId=${companyId}`)
.then((r) => r.json())
.then((d) => d.token as string)
}
companyId={companyId}
currency="usd"
redirectUrl={`${origin}/dashboard/payouts`}
>
<div className="grid gap-4">
<StatusBannerElement fallback={<Loading height={0} />} style={{ width: "100%" }} />
{activated ? (
<>
<div style={{ position: "relative", width: "100%", height: "95.5px" }}>
<BalanceElement fallback={<Loading height={96} />} />
</div>
<WithdrawalsElement fallback={<Loading height={120} />} />
</>
) : (
<ActivatePayouts />
)}
</div>
</PayoutsSession>
</Elements>
</div>
</Card>
);
}
export default function PayoutsPortal({
companyId,
accentColor,
sandbox,
earnedCents,
activated,
availableCents,
pendingCents,
}: PortalProps) {
return (
<div className="grid gap-5">
<BalanceSummary
earnedCents={earnedCents}
activated={activated}
availableCents={availableCents}
pendingCents={pendingCents}
sandbox={sandbox}
/>
<EmbeddedPortal companyId={companyId} accentColor={accentColor} sandbox={sandbox} activated={activated} />
</div>
);
}<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">fulfillment.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { prisma } from "./prisma";
import { whopsdk } from "./whop";
import { formatUsd } from "./fees";
import { notifyCreator } from "@/services/whop";
type CreatorLike = { whopCompanyId: string | null };
async function notify(creator: CreatorLike, n: { title: string; subtitle?: string; content: string; iconUserId?: string }) {
if (!creator.whopCompanyId) return;
await notifyCreator({ companyId: creator.whopCompanyId, restPath: "/dashboard", ...n });
}
export async function markSupportCompleted(supportId: string, whopPaymentId: string) {
const support = await prisma.support.findUnique({ where: { id: supportId }, include: { creator: true } });
if (!support || support.status === "COMPLETED") return support;
const updated = await prisma.support.update({
where: { id: supportId },
data: { status: "COMPLETED", whopPaymentId },
});
const word = support.coffees === 1 ? "coffee" : "coffees";
await notify(support.creator, {
title: "New supporter",
subtitle: `${support.supporterName} bought you ${support.coffees} ${word}`,
content: support.message?.trim()
? `"${support.message.trim()}" — ${formatUsd(support.amountCents)}`
: `You received ${formatUsd(support.amountCents)}!`,
});
return updated;
}
export async function reconcilePendingSupports(creatorId: string, whopCompanyId: string) {
const pending = await prisma.support.findMany({
where: { creatorId, status: "PENDING" },
select: { id: true },
});
if (pending.length === 0) return;
const pendingIds = new Set(pending.map((s) => s.id));
try {
let scanned = 0;
for await (const payment of whopsdk.payments.list({ company_id: whopCompanyId, direction: "desc" })) {
const p = payment as unknown as {
id: string;
status?: string;
substatus?: string;
metadata?: Record<string, unknown> | null;
};
const ref = typeof p.metadata?.ref === "string" ? p.metadata.ref : null;
const settled = p.status === "paid" || p.substatus === "succeeded";
if (ref && settled && pendingIds.has(ref)) {
await markSupportCompleted(ref, p.id);
pendingIds.delete(ref);
if (pendingIds.size === 0) break;
}
if (++scanned >= 60) break;
}
} catch (err: unknown) {
console.error("reconcilePendingSupports failed:", err);
}
}
export async function markSupportRefunded(whopPaymentId: string) {
const support = await prisma.support.findUnique({ where: { whopPaymentId } });
if (support && support.status !== "REFUNDED") {
await prisma.support.update({ where: { id: support.id }, data: { status: "REFUNDED" } });
}
}
export async function completeOrder(orderId: string, whopPaymentId: string) {
const order = await prisma.order.findUnique({ where: { id: orderId }, include: { creator: true, product: true } });
if (!order || order.status === "COMPLETED") return;
await prisma.$transaction([
prisma.order.update({ where: { id: orderId }, data: { status: "COMPLETED", whopPaymentId } }),
prisma.product.update({ where: { id: order.productId }, data: { salesCount: { increment: 1 } } }),
]);
await notify(order.creator, {
title: "New sale",
subtitle: order.product.title,
content: `${order.buyerName} bought ${order.product.title} for ${formatUsd(order.amountCents)}`,
});
}
export async function activateMembership(params: {
creatorId: string;
userId: string;
tierId: string;
whopMembershipId?: string;
}) {
const tier = await prisma.tier.findUnique({ where: { id: params.tierId }, include: { creator: true } });
if (!tier) return;
const existing = await prisma.membership.findUnique({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
});
await prisma.membership.upsert({
where: { userId_tierId: { userId: params.userId, tierId: params.tierId } },
update: { status: "ACTIVE", whopMembershipId: params.whopMembershipId ?? undefined },
create: {
creatorId: params.creatorId,
userId: params.userId,
tierId: params.tierId,
status: "ACTIVE",
whopMembershipId: params.whopMembershipId ?? null,
},
});
if (!existing) {
await notify(tier.creator, {
title: "New member",
subtitle: tier.name,
content: `Someone just joined your "${tier.name}" tier (${formatUsd(tier.priceCents)}/mo)`,
});
}
}
export async function deactivateMembership(whopMembershipId: string) {
const m = await prisma.membership.findUnique({ where: { whopMembershipId } });
if (m && m.status !== "CANCELED" && m.status !== "EXPIRED") {
await prisma.membership.update({ where: { id: m.id }, data: { status: "CANCELED" } });
}
}
export async function fulfillFromMetadata(
meta: Record<string, unknown> | null | undefined,
paymentId: string,
) {
if (!meta) return;
const kind = meta.kind;
if (kind === "tip" && typeof meta.supportId === "string") {
return markSupportCompleted(meta.supportId, paymentId);
}
if (kind === "shop" && typeof meta.orderId === "string") {
return completeOrder(meta.orderId, paymentId);
}
if (
kind === "membership" &&
typeof meta.creatorId === "string" &&
typeof meta.userId === "string" &&
typeof meta.tierId === "string"
) {
return activateMembership({ creatorId: meta.creatorId, userId: meta.userId, tierId: meta.tierId });
}
}</code></pre>
</div>
</div>import Link from "next/link";
import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { isSandbox } from "@/lib/env";
import { reconcilePendingSupports } from "@/lib/fulfillment";
import { getPayoutSnapshot, type PayoutSnapshot } from "@/services/whop";
import PayoutsPortal from "@/components/payouts/PayoutsPortal";
export default async function PayoutsPage() {
const { creator } = await requireCreator();
if (creator.whopCompanyId) {
await reconcilePendingSupports(creator.id, creator.whopCompanyId);
}
const earned = await prisma.support.aggregate({
where: { creatorId: creator.id, status: "COMPLETED" },
_sum: { amountCents: true },
});
const earnedCents = earned._sum.amountCents ?? 0;
let snapshot: PayoutSnapshot = { activated: false, status: null, availableCents: 0, pendingCents: 0 };
if (creator.whopCompanyId) {
try {
snapshot = await getPayoutSnapshot(creator.whopCompanyId);
} catch (err: unknown) {
console.error("getPayoutSnapshot failed:", err);
}
}
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold">Payouts</h1>
<p className="mt-1 max-w-2xl text-sm text-muted">
Your earnings come straight from the supporters who tip you, join your
memberships, and buy from your shop. Withdraw your available balance to
your bank account or PayPal whenever you like.
</p>
</div>
{!creator.whopCompanyId ? (
<div className="kofi-card p-6">
<h2 className="text-lg font-bold">Finish setting up payments</h2>
<p className="mt-1 text-sm text-muted">
We need to connect your payout account before you can withdraw. Complete
your creator setup to start receiving and withdrawing support.
</p>
<Link href="/dashboard/start" className="btn-pill btn-accent mt-4">
Finish setup
</Link>
</div>
) : (
<>
<PayoutsPortal
companyId={creator.whopCompanyId}
accentColor={creator.accentColor}
sandbox={isSandbox()}
earnedCents={earnedCents}
activated={snapshot.activated}
availableCents={snapshot.availableCents}
pendingCents={snapshot.pendingCents}
/>
<p className="text-xs text-muted">
Identity verification (KYC) is handled securely inside the portal the first
time you withdraw. You only need to do it once.
</p>
</>
)}
</div>
);
}import Link from "next/link";
import { requireAuth } from "@/lib/auth";
import ThemeToggle from "@/components/ThemeToggle";
import DashboardNav from "@/components/dashboard/DashboardNav";
import BrandIcon from "@/components/BrandIcon";
import ShareButton from "@/components/dashboard/ShareButton";
export default async function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
const user = await requireAuth();
if (!user.creator) {
return <>{children}</>;
}
const creator = user.creator;
return (
<div className="min-h-dvh bg-page md:flex">
<aside className="border-line bg-surface md:sticky md:top-0 md:flex md:h-dvh md:w-64 md:flex-col md:border-r">
<div className="flex items-center justify-between gap-2 border-b border-line px-5 py-4">
<Link href="/dashboard" className="flex items-center gap-2 text-lg font-bold">
<BrandIcon name="coffee" className="h-9 w-9" />
Cuppa
</Link>
<div className="md:hidden">
<ThemeToggle />
</div>
</div>
<DashboardNav username={creator.username} />
<div className="hidden px-4 pb-2 md:block">
<ShareButton username={creator.username} />
</div>
<div className="hidden border-t border-line px-3 py-4 md:block">
<div className="flex items-center justify-between px-2">
<span className="truncate text-sm text-muted">{creator.displayName}</span>
<ThemeToggle />
</div>
<a
href="/api/auth/logout"
className="mt-3 block rounded-xl px-3 py-2 text-sm text-muted transition hover:bg-surface-2 hover:text-ink"
>
Log out
</a>
</div>
</aside>
<main className="flex-1">
<div className="mx-auto max-w-5xl px-5 py-8 md:py-10">{children}</div>
</main>
</div>
);
}"use client";
import { useEffect, useState } from "react";
import { Share, Link as LinkIcon, Check, X } from "@/components/Icons";
export default function ShareButton({ username }: { username: string }) {
const [open, setOpen] = useState(false);
return (
<>
<button
type="button"
onClick={() => setOpen(true)}
className="btn-pill btn-accent flex w-full items-center justify-center gap-2"
>
<Share className="h-4 w-4" /> Share
</button>
{open ? <ShareDialog username={username} onClose={() => setOpen(false)} /> : null}
</>
);
}
function ShareDialog({ username, onClose }: { username: string; onClose: () => void }) {
const [origin, setOrigin] = useState("");
const [copied, setCopied] = useState(false);
const [canShare, setCanShare] = useState(false);
useEffect(() => {
setOrigin(window.location.origin);
setCanShare(typeof navigator !== "undefined" && typeof navigator.share === "function");
}, []);
const url = origin ? `${origin}/${username}` : "";
async function copyLink() {
if (!url) return;
try {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch {
}
}
async function nativeShare() {
if (!url) return;
try {
await navigator.share({ title: "Cuppa", text: "Support me on Cuppa", url });
} catch {
}
}
const enc = encodeURIComponent(url);
const text = encodeURIComponent("Support me on Cuppa");
const socials = [
{ label: "X", href: `https://twitter.com/intent/tweet?text=${text}&url=${enc}` },
{ label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${enc}` },
{ label: "WhatsApp", href: `https://wa.me/?text=${text}%20${enc}` },
{ label: "Email", href: `mailto:?subject=${text}&body=${enc}` },
];
return (
<div
className="fixed inset-0 z-[60] grid place-items-center bg-black/60 p-4"
role="dialog"
aria-modal="true"
onClick={onClose}
>
<div className="kofi-card w-full max-w-md p-6" onClick={(e) => e.stopPropagation()}>
<div className="flex items-start justify-between gap-4">
<h3 className="text-lg font-bold">Share your page</h3>
<button type="button" onClick={onClose} aria-label="Close" className="text-muted hover:text-ink">
<X className="h-5 w-5" />
</button>
</div>
<p className="mt-1 text-sm text-muted">Share this link anywhere to bring in supporters.</p>
<div className="mt-4 flex items-center gap-2 rounded-xl border border-line bg-surface px-3 py-2">
<span className="min-w-0 flex-1 truncate text-sm text-muted">kofi-clone-whop-tutorial.vercel.app/{username}</span>
<button
type="button"
onClick={copyLink}
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line px-3 py-1.5 text-sm font-semibold transition hover:bg-surface-2"
>
{copied ? <Check className="h-4 w-4 text-positive" /> : <LinkIcon className="h-4 w-4" />}
{copied ? "Copied" : "Copy"}
</button>
</div>
<div className="mt-4 grid grid-cols-2 gap-2">
{socials.map((s) => (
<a
key={s.label}
href={url ? s.href : undefined}
target="_blank"
rel="noopener noreferrer"
className="rounded-full border border-line px-3 py-2 text-center text-sm font-semibold transition hover:bg-surface-2"
>
{s.label}
</a>
))}
</div>
{canShare ? (
<button type="button" onClick={nativeShare} className="btn-pill btn-secondary mt-3 w-full">
More sharing options
</button>
) : null}
</div>
</div>
);
}"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, User, Gear, Users, Wallet, FileText, Crown, Bag } from "@/components/Icons";
type IconType = React.ComponentType<{ className?: string }>;
type NavItem = { label: string; href: string; icon: IconType };
type NavGroup = { label?: string; items: NavItem[] };
export default function DashboardNav({ username }: { username: string }) {
const pathname = usePathname();
const groups: NavGroup[] = [
{
items: [
{ label: "Home", href: "/dashboard", icon: Home },
{ label: "Your page", href: `/${username}`, icon: User },
{ label: "Settings", href: "/dashboard/settings", icon: Gear },
],
},
{
label: "Earnings",
items: [
{ label: "Supporters", href: "/dashboard/supporters", icon: Users },
{ label: "Payouts", href: "/dashboard/payouts", icon: Wallet },
],
},
{
label: "Grow your page",
items: [
{ label: "Posts", href: "/dashboard/posts", icon: FileText },
{ label: "Memberships", href: "/dashboard/tiers", icon: Crown },
{ label: "Shop", href: "/dashboard/shop", icon: Bag },
],
},
];
function isActive(href: string) {
if (href === "/dashboard") return pathname === "/dashboard";
if (href === `/${username}`) return false;
return pathname === href || pathname.startsWith(`${href}/`);
}
return (
<nav className="no-scrollbar flex gap-1 overflow-x-auto px-3 py-3 md:flex-1 md:flex-col md:gap-0.5 md:overflow-visible md:py-4">
{groups.map((group, gi) => (
<div key={gi} className="contents md:block">
{group.label ? (
<p className="hidden px-3 pb-1 pt-4 text-xs font-bold uppercase tracking-wide text-muted md:block">
{group.label}
</p>
) : null}
{group.items.map((item) => {
const Icon = item.icon;
const active = isActive(item.href);
return (
<Link
key={item.href}
href={item.href}
className={`flex items-center gap-2.5 whitespace-nowrap rounded-xl px-3 py-2 text-sm font-semibold transition ${
active ? "bg-surface-2 text-ink" : "text-muted hover:bg-surface-2 hover:text-ink"
}`}
>
<Icon className="h-[18px] w-[18px]" />
{item.label}
</Link>
);
})}
</div>
))}
<a
href="/api/auth/logout"
className="flex items-center gap-2.5 whitespace-nowrap rounded-xl px-3 py-2 text-sm font-semibold text-muted transition hover:bg-surface-2 hover:text-ink md:hidden"
>
Log out
</a>
</nav>
);
}"use client";
import { useEffect, useState } from "react";
import { Link as LinkIcon, Check } from "@/components/Icons";
export default function ShareCard({ username }: { username: string }) {
const [origin, setOrigin] = useState("");
const [copied, setCopied] = useState(false);
useEffect(() => setOrigin(window.location.origin), []);
const url = origin ? `${origin}/${username}` : "";
async function copyLink() {
if (!url) return;
try {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
} catch {
}
}
const enc = encodeURIComponent(url);
const xShare = `https://twitter.com/intent/tweet?text=${encodeURIComponent("Support me on Cuppa")}&url=${enc}`;
const fbShare = `https://www.facebook.com/sharer/sharer.php?u=${enc}`;
return (
<section className="kofi-card flex flex-col p-5">
<h2 className="text-sm font-bold uppercase tracking-wide text-muted">Share your link</h2>
<p className="mt-2 text-sm text-muted">
Add this link to your social bios and share it with followers. Creators who share regularly
earn more.
</p>
<div className="mt-3 flex items-center rounded-xl border border-line bg-surface px-3 py-2 text-sm">
<span className="truncate text-muted">kofi-clone-whop-tutorial.vercel.app/{username}</span>
</div>
<div className="mt-3 flex items-center gap-2">
<button
type="button"
onClick={copyLink}
className="inline-flex items-center gap-2 rounded-full border border-line px-3 py-1.5 text-sm font-semibold transition hover:bg-surface-2"
>
{copied ? <Check className="h-4 w-4 text-positive" /> : <LinkIcon className="h-4 w-4" />}
{copied ? "Copied!" : "Copy link"}
</button>
<a
href={url ? xShare : undefined}
target="_blank"
rel="noopener noreferrer"
aria-label="Share on X"
className="grid h-9 w-9 place-items-center rounded-full border border-line text-sm font-bold transition hover:bg-surface-2"
>
X
</a>
<a
href={url ? fbShare : undefined}
target="_blank"
rel="noopener noreferrer"
aria-label="Share on Facebook"
className="grid h-9 w-9 place-items-center rounded-full border border-line text-sm font-bold transition hover:bg-surface-2"
>
f
</a>
</div>
</section>
);
}import Link from "next/link";
import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatUsd } from "@/lib/fees";
import BrandIcon from "@/components/BrandIcon";
import ShareCard from "@/components/dashboard/ShareCard";
import { Check, Gear, ArrowUpRight } from "@/components/Icons";
function timeAgo(date: Date): string {
const s = Math.floor((Date.now() - date.getTime()) / 1000);
if (s < 60) return "just now";
const m = Math.floor(s / 60);
if (m < 60) return `${m}m ago`;
const h = Math.floor(m / 60);
if (h < 24) return `${h}h ago`;
return `${Math.floor(h / 24)}d ago`;
}
export default async function DashboardHomePage() {
const user = await requireCreator();
const creator = user.creator;
const [totals, followingCount, followerCount, tierCount, productCount, goalCount, recentSupports, recentOrders] =
await Promise.all([
prisma.support.aggregate({
where: { creatorId: creator.id, status: "COMPLETED" },
_sum: { coffees: true, amountCents: true },
_count: true,
}),
prisma.follow.count({ where: { userId: creator.userId } }),
prisma.follow.count({ where: { creatorId: creator.id } }),
prisma.tier.count({ where: { creatorId: creator.id, isActive: true } }),
prisma.product.count({ where: { creatorId: creator.id, isActive: true } }),
prisma.goal.count({ where: { creatorId: creator.id, isActive: true } }),
prisma.support.findMany({
where: { creatorId: creator.id, status: "COMPLETED" },
orderBy: { createdAt: "desc" },
take: 6,
}),
prisma.order.findMany({
where: { creatorId: creator.id, status: "COMPLETED" },
orderBy: { createdAt: "desc" },
take: 6,
include: { product: true },
}),
]);
const coffees = totals._sum.coffees ?? 0;
const raised = totals._sum.amountCents ?? 0;
const supporterCount = totals._count;
const activity = [
...recentSupports.map((s) => ({
id: s.id,
name: s.supporterName,
label: `${s.coffees} ${s.coffees === 1 ? "coffee" : "coffees"}`,
amountCents: s.amountCents,
at: s.createdAt,
})),
...recentOrders.map((o) => ({
id: o.id,
name: o.buyerName,
label: o.product.title,
amountCents: o.amountCents,
at: o.createdAt,
})),
]
.sort((a, b) => b.at.getTime() - a.at.getTime())
.slice(0, 6);
const steps = [
{
key: "connect",
title: "Set up payouts",
desc: "Link an account so your earnings have somewhere to land.",
done: !!creator.whopCompanyId,
href: "/dashboard/payouts",
action: "Set up",
},
{
key: "profile",
title: "Make the page yours",
desc: "Add a photo and a line about what you do.",
done: !!creator.bio && !!(creator.avatarUrl || creator.coverImageUrl),
href: "/dashboard/settings",
action: "Edit",
},
{
key: "earn",
title: "Give people a way to chip in",
desc: "Add a membership, list something in your shop, or set a goal.",
done: tierCount + productCount + goalCount > 0,
href: "/dashboard/tiers",
action: "Add",
},
{
key: "share",
title: "Put it out there",
desc: "Share your link and land your first cup.",
done: supporterCount > 0,
href: `/${creator.username}`,
action: "Share",
},
];
const progress = Math.round((steps.filter((s) => s.done).length / steps.length) * 100);
const avatarUrl = creator.avatarUrl ?? user.avatarUrl;
const suggestions = [
{
icon: "palette" as const,
title: "Add a cover image",
desc: "A banner up top makes the page feel like yours.",
href: "/dashboard/settings",
action: "Add a cover",
},
{
icon: "money" as const,
title: "Set a goal",
desc: "Show people what their support is building toward.",
href: "/dashboard/settings",
action: "Set a goal",
},
{
icon: "megaphone" as const,
title: "Post an update",
desc: "Share what you're working on so people have a reason to come back.",
href: "/dashboard/posts",
action: "Write a post",
},
{
icon: "heart" as const,
title: "Add a membership",
desc: "Let your regulars back you every month for perks.",
href: "/dashboard/tiers",
action: "Add a membership",
},
{
icon: "shop" as const,
title: "Stock your shop",
desc: "Sell downloads or physical goods, no listing fees.",
href: "/dashboard/shop",
action: "Add a product",
},
{
icon: "confetti" as const,
title: "Spread the word",
desc: "Send your page to a few people and see who chips in.",
href: `/${creator.username}`,
action: "Share your page",
},
];
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Home</h1>
<section className="kofi-card p-6">
<h2 className="text-lg font-bold">Get your page ready</h2>
<p className="text-sm text-muted">A few quick things before you share it.</p>
<div className="mt-3 h-2 overflow-hidden rounded-full bg-surface-2">
<div className="h-full rounded-full bg-positive transition-all" style={{ width: `${progress}%` }} />
</div>
<div className="mt-5 space-y-3">
{steps.map((step) => (
<div key={step.key} className="flex items-center gap-3 rounded-2xl border border-line p-4">
<span
className={
step.done
? "grid h-6 w-6 shrink-0 place-items-center rounded-full bg-positive text-white"
: "h-6 w-6 shrink-0 rounded-full border-2 border-muted/40"
}
>
{step.done ? <Check className="h-4 w-4" /> : null}
</span>
<div className="min-w-0 flex-1">
<p className="font-semibold">{step.title}</p>
<p className="text-sm text-muted">{step.desc}</p>
</div>
{step.done ? (
<span className="shrink-0 text-sm font-semibold text-muted">Done</span>
) : (
<Link href={step.href} className="btn-pill btn-secondary shrink-0 text-sm">
{step.action}
</Link>
)}
</div>
))}
</div>
</section>
<section className="kofi-card p-6">
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-4">
{avatarUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={avatarUrl} alt="" className="h-14 w-14 rounded-full object-cover" />
) : (
<span className="grid h-14 w-14 place-items-center rounded-full bg-surface-2 text-lg font-bold">
{creator.displayName.charAt(0).toUpperCase()}
</span>
)}
<div>
<p className="text-lg font-bold">{creator.displayName}</p>
<p className="text-sm text-muted">kofi-clone-whop-tutorial.vercel.app/{creator.username}</p>
</div>
</div>
<div className="flex items-center gap-2">
<Link href="/dashboard/settings" className="btn-pill btn-secondary text-sm">
Edit profile
</Link>
<Link
href="/dashboard/settings"
aria-label="Settings"
className="grid h-9 w-9 place-items-center rounded-full border border-line text-muted transition hover:bg-surface-2 hover:text-ink"
>
<Gear className="h-4 w-4" />
</Link>
</div>
</div>
<div className="mt-5 grid grid-cols-3 gap-4 border-t border-line pt-4">
<div>
<p className="text-lg font-bold">{coffees.toLocaleString()}</p>
<p className="text-xs text-muted">Coffees</p>
</div>
<div>
<p className="text-lg font-bold">{followingCount.toLocaleString()}</p>
<p className="text-xs text-muted">Following</p>
</div>
<div>
<p className="text-lg font-bold">{followerCount.toLocaleString()}</p>
<p className="text-xs text-muted">Followers</p>
</div>
</div>
</section>
<section className="kofi-card p-6">
<div className="flex items-center justify-between gap-3">
<h2 className="text-lg font-semibold">Latest support</h2>
<Link href="/dashboard/supporters" className="text-sm font-semibold text-muted hover:text-ink">
View all <ArrowUpRight className="inline h-4 w-4 align-text-bottom" />
</Link>
</div>
{activity.length === 0 ? (
<p className="mt-3 text-sm text-muted">Nothing’s come in yet. Share your link and that’ll change.</p>
) : (
<ul className="mt-4 divide-y divide-line">
{activity.map((a) => (
<li key={a.id} className="flex items-center justify-between gap-4 py-3">
<div className="min-w-0">
<p className="truncate font-semibold">{a.name}</p>
<p className="text-xs text-muted">
{a.label} · {timeAgo(a.at)}
</p>
</div>
<span className="shrink-0 font-semibold text-positive">{formatUsd(a.amountCents)}</span>
</li>
))}
</ul>
)}
</section>
<div className="grid gap-6 md:grid-cols-2">
<ShareCard username={creator.username} />
<section className="kofi-card p-5">
<h2 className="text-sm font-bold uppercase tracking-wide text-muted">At a glance</h2>
<div className="mt-3 grid grid-cols-2 gap-4">
<div>
<p className="text-2xl font-bold">{formatUsd(raised)}</p>
<p className="text-xs text-muted">Raised</p>
</div>
<div>
<p className="text-2xl font-bold">{supporterCount.toLocaleString()}</p>
<p className="text-xs text-muted">Supporters</p>
</div>
<div>
<p className="text-2xl font-bold">{coffees.toLocaleString()}</p>
<p className="text-xs text-muted">Coffees</p>
</div>
<div>
<p className="text-2xl font-bold">{followerCount.toLocaleString()}</p>
<p className="text-xs text-muted">Followers</p>
</div>
</div>
</section>
</div>
<section>
<h2 className="mb-4 text-lg font-semibold">Things to try</h2>
<div className="grid gap-4 sm:grid-cols-2">
{suggestions.map((s) => (
<div key={s.title} className="kofi-card flex flex-col p-5">
<div className="flex items-center gap-2">
<BrandIcon name={s.icon} className="h-7 w-7" />
<h3 className="font-bold">{s.title}</h3>
</div>
<p className="mt-2 flex-1 text-sm text-muted">{s.desc}</p>
<Link href={s.href} className="btn-pill btn-outline mt-4 self-start text-sm">
{s.action}
</Link>
</div>
))}
</div>
</section>
</div>
);
}import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatUsd } from "@/lib/fees";
import BrandIcon from "@/components/BrandIcon";
function formatDate(date: Date): string {
return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}
export default async function DashboardSupportersPage() {
const { creator } = await requireCreator();
const [supports, members] = await Promise.all([
prisma.support.findMany({
where: { creatorId: creator.id, status: "COMPLETED" },
orderBy: { createdAt: "desc" },
take: 100,
}),
prisma.membership.findMany({
where: { creatorId: creator.id, status: "ACTIVE" },
orderBy: { createdAt: "desc" },
include: {
tier: { select: { name: true } },
user: { select: { name: true, username: true } },
},
}),
]);
return (
<div className="space-y-10">
<div>
<h1 className="text-2xl font-bold">Supporters</h1>
<p className="mt-1 text-sm text-muted">Everyone who has tipped or joined a membership.</p>
</div>
<section className="space-y-3">
<h2 className="text-lg font-semibold">One-time support</h2>
<div className="kofi-card overflow-hidden">
{supports.length === 0 ? (
<p className="p-6 text-sm text-muted">No one-time support yet.</p>
) : (
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-line text-left text-muted">
<th className="px-4 py-3 font-semibold">Name</th>
<th className="px-4 py-3 font-semibold">Coffees</th>
<th className="px-4 py-3 font-semibold">Amount</th>
<th className="px-4 py-3 font-semibold">Message</th>
<th className="px-4 py-3 font-semibold">Date</th>
</tr>
</thead>
<tbody>
{supports.map((support) => (
<tr key={support.id} className="border-b border-line last:border-0">
<td className="px-4 py-3 font-medium">{support.supporterName}</td>
<td className="px-4 py-3 text-muted">
<span className="inline-flex items-center gap-1.5">
<BrandIcon name="coffee" className="h-4 w-4" />
{support.coffees}
</span>
</td>
<td className="px-4 py-3 font-semibold text-positive">
{formatUsd(support.amountCents)}
</td>
<td className="max-w-xs px-4 py-3 text-muted">
{support.message ? support.message : <span className="opacity-50">—</span>}
</td>
<td className="whitespace-nowrap px-4 py-3 text-muted">
{formatDate(support.createdAt)}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</section>
<section className="space-y-3">
<h2 className="text-lg font-semibold">Active members</h2>
<div className="kofi-card overflow-hidden">
{members.length === 0 ? (
<p className="p-6 text-sm text-muted">No active members yet.</p>
) : (
<ul className="divide-y divide-line">
{members.map((member) => (
<li key={member.id} className="flex items-center justify-between gap-4 px-4 py-3">
<div className="min-w-0">
<p className="font-medium">
{member.user.name ?? member.user.username}
</p>
<p className="text-xs text-muted">{member.tier.name}</p>
</div>
<span className="shrink-0 text-xs text-muted">
since {formatDate(member.createdAt)}
</span>
</li>
))}
</ul>
)}
</div>
</section>
</div>
);
}import Link from "next/link";
import BrandIcon from "@/components/BrandIcon";
export default function SiteFooter() {
return (
<footer className="bg-page">
<div className="mx-auto max-w-6xl px-5 py-12">
<div className="kofi-card grid grid-cols-2 gap-8 p-8 sm:grid-cols-4">
<div>
<p className="font-bold">Features</p>
<ul className="mt-3 space-y-2 text-sm text-muted">
<li><Link href="/features" className="hover:text-ink">Tips</Link></li>
<li><Link href="/features" className="hover:text-ink">Memberships</Link></li>
<li><Link href="/features" className="hover:text-ink">Shop</Link></li>
<li><Link href="/features" className="hover:text-ink">Posts</Link></li>
<li><Link href="/features" className="hover:text-ink">Goals</Link></li>
</ul>
</div>
<div>
<p className="font-bold">Discover</p>
<ul className="mt-3 space-y-2 text-sm text-muted">
<li><Link href="/explore" className="hover:text-ink">Explore creators</Link></li>
<li><Link href="/features" className="hover:text-ink">How it works</Link></li>
<li><Link href="/#faq" className="hover:text-ink">FAQ</Link></li>
</ul>
</div>
<div>
<p className="font-bold">Account</p>
<ul className="mt-3 space-y-2 text-sm text-muted">
<li><a href="/api/auth/login" className="hover:text-ink">Log in</a></li>
<li><a href="/api/auth/login?returnTo=/dashboard/start" className="hover:text-ink">Get started</a></li>
<li><Link href="/dashboard" className="hover:text-ink">Dashboard</Link></li>
</ul>
</div>
<div>
<p className="font-bold">About Cuppa</p>
<ul className="mt-3 space-y-2 text-sm text-muted">
<li><a href="https://whop.com" target="_blank" rel="noreferrer" className="hover:text-ink">Powered by Whop</a></li>
<li><a href="https://nextjs.org" target="_blank" rel="noreferrer" className="hover:text-ink">Built with Next.js</a></li>
<li>Made for creators</li>
</ul>
</div>
</div>
<div className="mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row">
<Link href="/" className="flex items-center gap-2">
<BrandIcon name="coffee" className="h-8 w-8" />
<span className="font-display text-lg font-extrabold">Cuppa</span>
</Link>
<p className="text-sm text-muted">© 2026 Cuppa. Built with Next.js and Whop.</p>
</div>
</div>
</footer>
);
}"use client";
/* eslint-disable @next/next/no-img-element */
import { useState } from "react";
import Link from "next/link";
import BrandIcon from "@/components/BrandIcon";
export type FeaturedCreator = {
username: string;
displayName: string;
avatarUrl: string | null;
accent: string;
supporters: number;
tags: string[];
};
const ALL = "All";
export default function CreatorCategories({ creators }: { creators: FeaturedCreator[] }) {
const categories = Array.from(new Set(creators.flatMap((c) => c.tags))).slice(0, 9);
const [active, setActive] = useState(ALL);
const shown = active === ALL ? creators : creators.filter((c) => c.tags.includes(active));
const tabs = [ALL, ...categories];
return (
<>
{categories.length > 0 ? (
<div className="mb-8 flex flex-wrap justify-center gap-2.5">
{tabs.map((tab) => {
const isActive = tab === active;
return (
<button
key={tab}
type="button"
onClick={() => setActive(tab)}
aria-pressed={isActive}
className={[
"rounded-full border-2 px-5 py-2.5 text-sm font-semibold transition",
isActive
? "border-ink bg-surface text-ink"
: "border-transparent bg-surface-2 text-ink hover:brightness-95",
].join(" ")}
>
{tab}
</button>
);
})}
</div>
) : null}
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
{shown.map((c) => (
<Link
key={c.username}
href={`/${c.username}`}
className="kofi-card flex flex-col items-center p-5 text-center transition-[filter] hover:brightness-[0.98]"
>
<div
className={`grid h-16 w-16 place-items-center overflow-hidden rounded-full ${c.avatarUrl ? "" : "bg-surface-2"}`}
style={c.avatarUrl ? { background: c.accent } : undefined}
>
{c.avatarUrl ? (
<img src={c.avatarUrl} alt="" className="h-full w-full object-cover" />
) : (
<BrandIcon name="coffee" className="h-10 w-10" />
)}
</div>
<p className="mt-3 w-full truncate font-semibold">{c.displayName}</p>
<p className="mt-0.5 text-xs text-muted">
{c.supporters} {c.supporters === 1 ? "supporter" : "supporters"}
</p>
</Link>
))}
</div>
</>
);
}import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { accentHex } from "@/lib/accent";
import ThemeToggle from "@/components/ThemeToggle";
import BrandIcon, { type BrandIconName } from "@/components/BrandIcon";
import CreatorCategories, { type FeaturedCreator } from "@/components/CreatorCategories";
import SiteFooter from "@/components/SiteFooter";
import { Button } from "@whop/react/components";
const AUTH_ERRORS: Record<string, string> = {
token_exchange_failed: "We couldn't complete sign in with Whop. Please try again.",
state_mismatch: "Your sign in session expired. Please try again.",
missing_pkce: "Your sign in session expired. Please try again.",
bad_pkce: "Your sign in session expired. Please try again.",
missing_code: "Sign in was canceled.",
access_denied: "Sign in was canceled.",
};
async function getFeaturedCreators(): Promise<FeaturedCreator[]> {
const creators = await prisma.creator.findMany({
where: { isActive: true, whopOnboarded: true },
orderBy: { createdAt: "desc" },
take: 12,
select: {
id: true,
username: true,
displayName: true,
avatarUrl: true,
accentColor: true,
tags: true,
},
});
if (creators.length === 0) return [];
const counts = await prisma.support.groupBy({
by: ["creatorId"],
where: { creatorId: { in: creators.map((c) => c.id) }, status: "COMPLETED" },
_count: { _all: true },
});
const countByCreator = new Map(counts.map((c) => [c.creatorId, c._count._all]));
return creators.map((c) => ({
username: c.username,
displayName: c.displayName,
avatarUrl: c.avatarUrl,
accent: accentHex(c.accentColor),
supporters: countByCreator.get(c.id) ?? 0,
tags: c.tags,
}));
}
const STEPS: { icon: BrandIconName; title: string; body: string }[] = [
{ icon: "palette", title: "Create your page", body: "Sign up in seconds and set up a page that looks just how you want." },
{ icon: "megaphone", title: "Share it with fans", body: "Drop your link anywhere — your bio, your stream, your newsletter." },
{ icon: "money", title: "Get paid directly & instantly", body: "Tips, memberships, and sales land in your account right away." },
];
const FAQS = [
{
q: "What is Cuppa?",
a: "Cuppa is the easiest way to support creators. Fans send one-time tips, join monthly memberships, and buy from your shop, all from one simple page.",
},
{
q: "How does Cuppa work?",
a: "Create your page, share your link, and start earning. You decide what to offer: accept tips, set up membership tiers, sell digital or physical products, and publish posts for your supporters.",
},
{
q: "Does Cuppa take a fee?",
a: "No monthly fees. We take a small platform fee of up to 5% on what you earn, and nothing when you are not earning.",
},
{
q: "Can I use Cuppa if I'm just starting out?",
a: "Absolutely. Cuppa is free to set up and works whether you have five fans or fifty thousand. There is nothing to lose by starting today.",
},
{
q: "How do I get paid on Cuppa?",
a: "You get paid directly. Payments land in your own connected account powered by Whop, and you withdraw your earnings right here on Cuppa whenever you like.",
},
{
q: "How is Cuppa different from other services?",
a: "Cuppa is built for simplicity: one page for tips, memberships, and a shop, with payments going directly to you. No complicated setup, no waiting to get paid.",
},
];
export default async function HomePage({
searchParams,
}: {
searchParams: Promise<{ authError?: string }>;
}) {
const sp = await searchParams;
const authError = sp.authError
? AUTH_ERRORS[sp.authError] ?? "Sign in didn't complete. Please try again."
: null;
const creators = await getFeaturedCreators();
return (
<main className="min-h-screen">
<header className="sticky top-0 z-50 backdrop-blur-lg">
<nav className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
<Link href="/" className="flex items-center gap-2">
<BrandIcon name="coffee" className="h-9 w-9" />
<span className="font-display text-2xl font-extrabold">Cuppa</span>
</Link>
<div className="flex items-center gap-3">
<a href="#how-it-works" className="hidden text-sm font-semibold sm:block">
How it works
</a>
<ThemeToggle />
<a href="/api/auth/login" className="text-sm font-semibold">
Log in
</a>
<a href="/api/auth/login?returnTo=/dashboard/start" className="btn-pill btn-primary text-sm">
Sign up free
</a>
</div>
</nav>
</header>
{authError ? (
<div className="mx-auto max-w-6xl px-5">
<p className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-600 dark:bg-red-950/40">
{authError}
</p>
</div>
) : null}
<section className="mx-auto max-w-3xl px-5 pb-10 pt-16 text-center sm:pt-24">
<h1 className="text-balance text-5xl leading-[1.05] sm:text-6xl">
Let the people who love your work chip in
</h1>
<p className="mx-auto mt-6 max-w-md text-lg text-muted">
Set up a page in minutes and start taking tips, memberships, and shop orders from the people who follow you.
</p>
<div className="mt-8 flex justify-center">
<a
href="/api/auth/login?returnTo=/dashboard/start"
className="btn-pill btn-soft px-7 py-3 text-base"
>
Get started
</a>
</div>
<div className="mt-12 flex justify-center gap-4" aria-hidden="true">
<BrandIcon name="coffee" className="h-14 w-14" />
<BrandIcon name="palette" className="h-14 w-14" />
<BrandIcon name="money" className="h-14 w-14" />
</div>
</section>
<section className="mx-auto max-w-2xl px-5 py-10">
<div className="kofi-card p-8 text-center sm:p-10">
<h2 className="text-3xl sm:text-4xl">Payday your way</h2>
<p className="mx-auto mt-3 max-w-md text-muted">
Decide how you want to earn, set your own terms, and get paid directly. All
from one place, at your own pace.
</p>
<div className="mt-6 flex justify-center">
<Link href="/features" className="btn-pill btn-primary text-sm">
Learn how Cuppa works
</Link>
</div>
</div>
</section>
{creators.length > 0 ? (
<section className="mx-auto max-w-6xl px-5 py-12">
<div className="mb-8 text-center">
<h2 className="text-3xl sm:text-4xl">Creators of all kinds</h2>
<p className="mt-2 text-muted">
Artists, writers, musicians, streamers, and podcasters. If people love what you make, Cuppa gives them an easy way to support it.
</p>
</div>
<CreatorCategories creators={creators} />
</section>
) : null}
<section id="how-it-works" className="mx-auto max-w-5xl scroll-mt-8 px-5 py-16">
<h2 className="mb-10 text-center text-3xl sm:text-4xl">How it works</h2>
<div className="grid gap-8 md:grid-cols-3">
{STEPS.map((step, i) => (
<div key={step.title} className="text-center">
<div className="mx-auto grid h-20 w-20 place-items-center rounded-2xl bg-surface-2">
<BrandIcon name={step.icon} className="h-12 w-12" />
</div>
<h3 className="mt-4 text-lg font-bold">
{i + 1}. {step.title}
</h3>
<p className="mx-auto mt-2 max-w-xs text-sm text-muted">{step.body}</p>
</div>
))}
</div>
</section>
<section id="faq" className="scroll-mt-8 bg-soft-blue">
<div className="relative mx-auto max-w-5xl px-5 py-16">
<BrandIcon name="coffee" className="absolute left-2 top-24 hidden h-20 w-20 -rotate-12 lg:block" />
<BrandIcon name="money" className="absolute right-2 top-16 hidden h-20 w-20 rotate-12 lg:block" />
<div className="relative z-10 mx-auto max-w-2xl rounded-[28px] border border-line bg-surface p-6 shadow-sm sm:p-10">
<h2 className="mb-8 text-3xl sm:text-4xl">Frequently asked questions</h2>
<div className="space-y-4">
{FAQS.map((faq) => (
<details
key={faq.q}
className="group rounded-2xl border-2 border-ink bg-soft-blue px-5 py-4 dark:border-white/25"
>
<summary className="flex items-center justify-between gap-4 font-bold text-ink marker:content-[''] [&::-webkit-details-marker]:hidden">
{faq.q}
<span className="text-2xl leading-none transition-transform group-open:rotate-45">+</span>
</summary>
<p className="mt-3 text-sm leading-relaxed text-ink/80">{faq.a}</p>
</details>
))}
</div>
</div>
</div>
</section>
<section className="relative overflow-hidden bg-soft-blue">
<div className="mx-auto max-w-3xl px-5 py-16 text-center sm:py-20">
<h2 className="text-3xl text-ink sm:text-5xl">Grab your Cuppa page</h2>
<div className="relative mx-auto mt-8 max-w-xl">
<BrandIcon name="palette" className="absolute -left-24 -top-7 hidden h-24 w-24 -rotate-12 lg:block" />
<BrandIcon name="money" className="absolute -right-24 -top-3 hidden h-24 w-24 rotate-12 lg:block" />
<form
action="/api/auth/login"
method="get"
className="flex items-center gap-2 rounded-full bg-surface p-2 pl-5 shadow-sm"
>
<span className="shrink-0 font-semibold text-ink">kofi-clone-whop-tutorial.vercel.app/</span>
<input
name="handle"
placeholder="yourname"
autoComplete="off"
aria-label="Choose your Cuppa page URL"
className="min-w-0 flex-1 bg-transparent py-2 text-ink outline-none placeholder:text-muted"
/>
<input type="hidden" name="returnTo" value="/dashboard/start" />
<Button type="submit" size="3" variant="solid" color="gray" highContrast className="shrink-0">
Claim
</Button>
</form>
</div>
</div>
</section>
<SiteFooter />
</main>
);
}import type { Metadata } from "next";
import Link from "next/link";
import ThemeToggle from "@/components/ThemeToggle";
import BrandIcon from "@/components/BrandIcon";
import SiteFooter from "@/components/SiteFooter";
export const metadata: Metadata = {
title: "Features",
description: "Everything you need to earn and grow on Cuppa.",
};
function Check({ children }: { children: React.ReactNode }) {
return (
<li className="flex items-center gap-2 text-ink">
<svg
viewBox="0 0 20 20"
className="h-5 w-5 shrink-0 text-positive"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M4 10.5l4 4 8-9" />
</svg>
<span>{children}</span>
</li>
);
}
function PageMock() {
return (
<div className="w-full max-w-[260px] overflow-hidden rounded-2xl border border-line bg-surface shadow-sm">
<div className="h-16 bg-brand" />
<div className="px-4 pb-4">
<div className="-mt-6 flex items-end gap-2">
<div className="grid h-12 w-12 place-items-center overflow-hidden rounded-full border-4 border-surface bg-surface-2">
<BrandIcon name="coffee" className="h-7 w-7" />
</div>
<span className="btn-pill btn-accent ml-auto px-4 py-1.5 text-xs">Tip</span>
</div>
<div className="mt-2 h-3 w-24 rounded bg-surface-2" />
<div className="mt-1.5 h-2 w-32 rounded bg-surface-2" />
</div>
</div>
);
}
function CustomizeMock() {
const colors = ["#467ceb", "#e8634f", "#07b25d", "#9b6cf0", "#202020"];
return (
<div className="flex flex-col items-center gap-4">
<BrandIcon name="palette" className="h-24 w-24" />
<div className="flex items-center gap-2 rounded-full border border-line bg-surface px-3 py-2 shadow-sm">
{colors.map((c) => (
<span key={c} className="h-6 w-6 rounded-full ring-2 ring-surface" style={{ background: c }} />
))}
</div>
</div>
);
}
function ControlMock() {
return (
<div className="flex w-full max-w-[240px] flex-col gap-3">
<span className="self-start rounded-full bg-ink px-4 py-2 text-sm font-semibold text-surface">Direct messages</span>
<span className="self-center rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white">Manage delivery</span>
<span className="self-end rounded-full bg-[#9b6cf0] px-4 py-2 text-sm font-semibold text-white">Withdraw earnings</span>
</div>
);
}
function FeatureBlock({
heading,
reverse,
tint,
graphic,
children,
}: {
heading: string;
reverse?: boolean;
tint: string;
graphic: React.ReactNode;
children: React.ReactNode;
}) {
return (
<div className="grid items-stretch gap-4 md:grid-cols-2">
<div
className={`flex flex-col justify-center rounded-3xl border border-line bg-surface p-8 sm:p-10 ${
reverse ? "md:order-2" : ""
}`}
>
<h2 className="text-3xl sm:text-4xl">{heading}</h2>
<div className="mt-4 space-y-3 text-muted">{children}</div>
</div>
<div className={`grid min-h-[260px] place-items-center rounded-3xl p-8 ${tint} ${reverse ? "md:order-1" : ""}`}>
{graphic}
</div>
</div>
);
}
export default function FeaturesPage() {
return (
<main className="min-h-screen">
<header className="sticky top-0 z-50 backdrop-blur-lg">
<nav className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
<Link href="/" className="flex items-center gap-2">
<BrandIcon name="coffee" className="h-9 w-9" />
<span className="font-display text-2xl font-extrabold">Cuppa</span>
</Link>
<div className="flex items-center gap-3">
<Link href="/explore" className="hidden text-sm font-semibold sm:block">
Explore
</Link>
<ThemeToggle />
<a href="/api/auth/login" className="text-sm font-semibold">
Log in
</a>
<a href="/api/auth/login?returnTo=/dashboard/start" className="btn-pill btn-primary text-sm">
Sign up free
</a>
</div>
</nav>
</header>
<section className="mx-auto max-w-5xl px-5 pb-8 pt-14 text-center sm:pt-20">
<h1 className="text-balance text-5xl sm:text-6xl">Payday your way</h1>
<p className="mx-auto mt-5 max-w-xl text-lg text-muted">
Cuppa gives you the tools to earn money directly from the people who love your work. Here is
everything you get.
</p>
<div className="mt-7 flex justify-center">
<a href="/api/auth/login?returnTo=/dashboard/start" className="btn-pill btn-soft px-7 py-3 text-base">
Get started
</a>
</div>
</section>
<div className="mx-auto max-w-5xl space-y-4 px-5 py-8">
<FeatureBlock heading="Create your free page" tint="bg-soft-blue" graphic={<PageMock />}>
<p>
Take the first step to give your fans a way to support your creative work. Setting up your
Cuppa page takes a couple of minutes.
</p>
</FeatureBlock>
<FeatureBlock
heading="Get paid directly"
reverse
tint="bg-[#d6f0dd] dark:bg-[#26352b]"
graphic={<BrandIcon name="money" className="h-32 w-32" />}
>
<p>
Payments land in <strong className="text-ink">your own connected account</strong>, powered by
Whop. Cuppa never holds your money or pays you out on a schedule.
</p>
<p>Withdraw your balance right here on Cuppa whenever you like.</p>
</FeatureBlock>
<FeatureBlock heading="Make it your own" tint="bg-[#e7defb] dark:bg-[#2f2a3e]" graphic={<CustomizeMock />}>
<p>
Choose your own cover image, avatar, and accent color. Switch between light and dark. Your
page, your vibe.
</p>
</FeatureBlock>
<FeatureBlock
heading="Share with your audience"
reverse
tint="bg-[#f8dbd5] dark:bg-[#3a2a2e]"
graphic={<BrandIcon name="megaphone" className="h-32 w-32" />}
>
<p>
Cuppa gives you the tools, but you bring the supporters. There is no algorithm deciding who
sees your page. You control how and where you promote it.
</p>
</FeatureBlock>
<FeatureBlock heading="Everything you need" tint="bg-[#fbecb0] dark:bg-[#3a3526]" graphic={<ControlMock />}>
<p>Cuppa gives you full control:</p>
<ul className="space-y-2">
<Check>Set your own pricing and terms</Check>
<Check>Tips, memberships, a shop, and posts</Check>
<Check>Message supporters and manage delivery</Check>
<Check>Withdraw your earnings on-site</Check>
</ul>
</FeatureBlock>
</div>
<section className="mx-auto max-w-5xl px-5 py-12">
<div className="relative overflow-hidden rounded-[32px] bg-soft-blue px-6 py-16 text-center">
<h2 className="text-4xl sm:text-5xl">Get started</h2>
<p className="mx-auto mt-3 max-w-md text-ink/80">
Set up your page in minutes. It is free, and you only pay a small fee when you earn.
</p>
<div className="mt-7 flex justify-center">
<a
href="/api/auth/login?returnTo=/dashboard/start"
className="btn-pill btn-primary px-8 py-3.5 text-base"
>
Sign up free
</a>
</div>
<BrandIcon name="coffee" className="absolute -left-3 bottom-1 hidden h-24 w-24 -rotate-12 sm:block" />
<BrandIcon name="palette" className="absolute -right-3 top-3 hidden h-24 w-24 rotate-12 sm:block" />
</div>
</section>
<SiteFooter />
</main>
);
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@whop/react/components";
export default function CreatorSearch({ placeholder = "creator-handle" }: { placeholder?: string }) {
const router = useRouter();
const [handle, setHandle] = useState("");
function onSubmit(e: React.FormEvent) {
e.preventDefault();
const clean = handle.trim().toLowerCase().replace(/[^a-z0-9_]/g, "");
if (clean) router.push(`/${clean}`);
}
return (
<form
onSubmit={onSubmit}
className="flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 focus-within:border-brand"
>
<span className="shrink-0 text-sm text-muted">kofi-clone-whop-tutorial.vercel.app/</span>
<input
value={handle}
onChange={(e) => setHandle(e.target.value)}
placeholder={placeholder}
autoComplete="off"
aria-label="Find a creator by their handle"
className="min-w-0 flex-1 bg-transparent text-sm outline-none"
/>
<Button type="submit" size="2" variant="solid" color="gray" highContrast className="shrink-0">
Go
</Button>
</form>
);
}/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { accentHex } from "@/lib/accent";
import ThemeToggle from "@/components/ThemeToggle";
import CreatorSearch from "@/components/CreatorSearch";
import BrandIcon from "@/components/BrandIcon";
import { ChevronLeft, ChevronRight } from "@/components/Icons";
const PAGE_SIZE = 12;
type ExploreCreator = {
username: string;
displayName: string;
bio: string | null;
avatarUrl: string | null;
accentColor: string;
supporters: number;
};
function parsePage(raw: string | undefined): number {
const n = Number.parseInt(raw ?? "1", 10);
if (!Number.isFinite(n) || n < 1) return 1;
return n;
}
export default async function ExplorePage({
searchParams,
}: {
searchParams: Promise<{ page?: string }>;
}) {
const sp = await searchParams;
const page = parsePage(sp.page);
const skip = (page - 1) * PAGE_SIZE;
const where = { isActive: true, whopOnboarded: true } as const;
const [total, creators] = await Promise.all([
prisma.creator.count({ where }),
prisma.creator.findMany({
where,
orderBy: { createdAt: "desc" },
skip,
take: PAGE_SIZE,
select: { id: true, username: true, displayName: true, bio: true, avatarUrl: true, accentColor: true },
}),
]);
const counts =
creators.length > 0
? await prisma.support.groupBy({
by: ["creatorId"],
where: { creatorId: { in: creators.map((c) => c.id) }, status: "COMPLETED" },
_count: { _all: true },
})
: [];
const countByCreator = new Map(counts.map((c) => [c.creatorId, c._count._all]));
const rows: ExploreCreator[] = creators.map((c) => ({
username: c.username,
displayName: c.displayName,
bio: c.bio,
avatarUrl: c.avatarUrl,
accentColor: c.accentColor,
supporters: countByCreator.get(c.id) ?? 0,
}));
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
const hasPrev = page > 1;
const hasNext = page < totalPages;
return (
<main className="min-h-screen">
<nav className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
<Link href="/" className="flex items-center gap-2 text-xl font-bold">
<BrandIcon name="coffee" className="h-9 w-9" />
Cuppa
</Link>
<div className="flex items-center gap-3">
<ThemeToggle />
<a href="/api/auth/login" className="text-sm font-semibold">
Log in
</a>
</div>
</nav>
<section className="mx-auto max-w-6xl px-5 py-10">
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<h1 className="text-4xl font-bold tracking-tight">Explore creators</h1>
<p className="mt-2 text-muted">
Discover creators to support, or jump straight to a handle you know.
</p>
</div>
<div className="w-full sm:w-80">
<CreatorSearch />
</div>
</div>
{rows.length === 0 ? (
<div className="kofi-card p-12 text-center">
<div className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-surface-2">
<BrandIcon name="coffee" className="h-10 w-10" />
</div>
<h2 className="mt-4 font-bold">No creators yet</h2>
<p className="mx-auto mt-1 max-w-sm text-sm text-muted">
Be the first to set up a page and start earning from your fans.
</p>
<a href="/api/auth/login?returnTo=/dashboard/start" className="btn-pill btn-accent mt-5 text-sm">
Get started
</a>
</div>
) : (
<>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{rows.map((c) => {
const accent = accentHex(c.accentColor);
return (
<Link
key={c.username}
href={`/${c.username}`}
className="kofi-card overflow-hidden transition-[filter] hover:brightness-[0.98]"
>
<div className="h-20" style={{ background: accent }} />
<div className="px-5 pb-5">
<div className="-mt-8 grid h-16 w-16 place-items-center overflow-hidden rounded-full border-4 border-surface bg-surface-2">
{c.avatarUrl ? (
<img src={c.avatarUrl} alt="" className="h-full w-full object-cover" />
) : (
<BrandIcon name="coffee" className="h-10 w-10" />
)}
</div>
<p className="mt-3 truncate text-lg font-bold">{c.displayName}</p>
<p className="text-sm text-muted">
{c.supporters} {c.supporters === 1 ? "supporter" : "supporters"}
</p>
{c.bio ? <p className="mt-2 line-clamp-2 text-sm text-muted">{c.bio}</p> : null}
</div>
</Link>
);
})}
</div>
{totalPages > 1 ? (
<div className="mt-10 flex items-center justify-center gap-3">
{hasPrev ? (
<Link href={`/explore?page=${page - 1}`} className="btn-pill btn-outline text-sm">
<ChevronLeft className="h-4 w-4" /> Previous
</Link>
) : (
<span className="btn-pill btn-outline cursor-not-allowed text-sm opacity-50"><ChevronLeft className="h-4 w-4" /> Previous</span>
)}
<span className="text-sm text-muted">
Page {page} of {totalPages}
</span>
{hasNext ? (
<Link href={`/explore?page=${page + 1}`} className="btn-pill btn-outline text-sm">
Next <ChevronRight className="h-4 w-4" />
</Link>
) : (
<span className="btn-pill btn-outline cursor-not-allowed text-sm opacity-50">Next <ChevronRight className="h-4 w-4" /></span>
)}
</div>
) : null}
</>
)}
</section>
</main>
);
}/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { accentHex } from "@/lib/accent";
import ThemeToggle from "@/components/ThemeToggle";
import CreatorSearch from "@/components/CreatorSearch";
import BrandIcon from "@/components/BrandIcon";
type CreatorRow = {
id: string;
username: string;
displayName: string;
bio: string | null;
avatarUrl: string | null;
accentColor: string;
};
type FeedCreator = CreatorRow & {
supporters: number;
latestPost: { id: string; title: string } | null;
};
const CREATOR_SELECT = {
id: true,
username: true,
displayName: true,
bio: true,
avatarUrl: true,
accentColor: true,
} as const;
async function decorate(rows: CreatorRow[]): Promise<FeedCreator[]> {
if (rows.length === 0) return [];
const ids = rows.map((c) => c.id);
const [counts, posts] = await Promise.all([
prisma.support.groupBy({
by: ["creatorId"],
where: { creatorId: { in: ids }, status: "COMPLETED" },
_count: { _all: true },
}),
prisma.post.findMany({
where: { creatorId: { in: ids }, published: true, visibility: "PUBLIC" },
orderBy: { createdAt: "desc" },
select: { id: true, title: true, creatorId: true },
}),
]);
const countByCreator = new Map(counts.map((c) => [c.creatorId, c._count._all]));
const latestByCreator = new Map<string, { id: string; title: string }>();
for (const p of posts) {
if (!latestByCreator.has(p.creatorId)) latestByCreator.set(p.creatorId, { id: p.id, title: p.title });
}
return rows.map((c) => ({
...c,
supporters: countByCreator.get(c.id) ?? 0,
latestPost: latestByCreator.get(c.id) ?? null,
}));
}
export default async function FeedPage() {
const user = await requireAuth();
const [memberships, supports, follows] = await Promise.all([
prisma.membership.findMany({
where: { userId: user.id, status: "ACTIVE" },
select: { creatorId: true },
}),
prisma.support.findMany({
where: { supporterUserId: user.id, status: "COMPLETED" },
select: { creatorId: true },
}),
prisma.follow.findMany({
where: { userId: user.id },
select: { creatorId: true },
}),
]);
const supportedIds = Array.from(
new Set([...memberships, ...supports, ...follows].map((r) => r.creatorId)),
);
let supported: FeedCreator[] = [];
if (supportedIds.length > 0) {
const rows = await prisma.creator.findMany({
where: { id: { in: supportedIds } },
orderBy: { createdAt: "desc" },
select: CREATOR_SELECT,
});
supported = await decorate(rows);
}
let suggestions: FeedCreator[] = [];
if (supported.length === 0) {
const rows = await prisma.creator.findMany({
where: {
isActive: true,
whopOnboarded: true,
...(user.creator ? { id: { not: user.creator.id } } : {}),
},
select: CREATOR_SELECT,
});
const decorated = await decorate(rows);
suggestions = decorated.sort((a, b) => b.supporters - a.supporters).slice(0, 3);
}
return (
<main className="min-h-screen">
<nav className="mx-auto flex max-w-4xl items-center justify-between px-5 py-4">
<Link href="/" className="flex items-center gap-2 text-xl font-bold">
<BrandIcon name="coffee" className="h-9 w-9" />
Cuppa
</Link>
<div className="flex items-center gap-3 text-sm font-semibold">
<Link href="/explore" className="hidden sm:block hover:text-muted">
Explore
</Link>
{user.creator ? (
<Link href="/dashboard" className="hover:text-muted">
Dashboard
</Link>
) : (
<Link href="/dashboard/start" className="hover:text-muted">
Become a creator
</Link>
)}
<ThemeToggle />
<a href="/api/auth/logout" className="text-muted hover:text-ink">
Log out
</a>
</div>
</nav>
<section className="mx-auto max-w-4xl px-5 py-10">
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<h1 className="text-4xl font-bold tracking-tight">Your feed</h1>
<p className="mt-2 text-muted">The creators you support, all in one place.</p>
</div>
<div className="w-full sm:w-80">
<CreatorSearch />
</div>
</div>
{supported.length > 0 ? (
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
{supported.map((c) => {
const accent = accentHex(c.accentColor);
return (
<div key={c.username} className="kofi-card overflow-hidden">
<Link href={`/${c.username}`} className="block transition-[filter] hover:brightness-[0.98]">
<div className="h-16" style={{ background: accent }} />
<div className="px-5">
<div className="-mt-8 grid h-16 w-16 place-items-center overflow-hidden rounded-full border-4 border-surface bg-surface-2">
{c.avatarUrl ? (
<img src={c.avatarUrl} alt="" className="h-full w-full object-cover" />
) : (
<BrandIcon name="coffee" className="h-10 w-10" />
)}
</div>
<p className="mt-3 truncate text-lg font-bold">{c.displayName}</p>
<p className="text-sm text-muted">
{c.supporters} {c.supporters === 1 ? "supporter" : "supporters"}
</p>
</div>
</Link>
<div className="px-5 pb-5 pt-3">
{c.latestPost ? (
<Link
href={`/${c.username}/post/${c.latestPost.id}`}
className="block rounded-xl bg-surface-2 px-4 py-3 text-sm transition hover:brightness-[0.98]"
>
<span className="text-muted">Latest post</span>
<span className="mt-0.5 block truncate font-semibold">{c.latestPost.title}</span>
</Link>
) : c.bio ? (
<p className="line-clamp-2 text-sm text-muted">{c.bio}</p>
) : null}
</div>
</div>
);
})}
</div>
) : (
<div>
<div className="kofi-card p-8 text-center">
<div className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-surface-2">
<BrandIcon name="coffee" className="h-10 w-10" />
</div>
<h2 className="mt-4 text-xl font-bold">You’re not supporting anyone yet</h2>
<p className="mx-auto mt-1 max-w-sm text-sm text-muted">
Follow or tip a creator and they’ll show up here. Here are a few to get you started.
</p>
</div>
{suggestions.length > 0 ? (
<div className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-3">
{suggestions.map((c) => {
const accent = accentHex(c.accentColor);
return (
<Link
key={c.username}
href={`/${c.username}`}
className="kofi-card overflow-hidden transition-[filter] hover:brightness-[0.98]"
>
<div className="h-16" style={{ background: accent }} />
<div className="px-5 pb-5">
<div className="-mt-8 grid h-14 w-14 place-items-center overflow-hidden rounded-full border-4 border-surface bg-surface-2">
{c.avatarUrl ? (
<img src={c.avatarUrl} alt="" className="h-full w-full object-cover" />
) : (
<BrandIcon name="coffee" className="h-9 w-9" />
)}
</div>
<p className="mt-3 truncate font-bold">{c.displayName}</p>
<p className="text-sm text-muted">
{c.supporters} {c.supporters === 1 ? "supporter" : "supporters"}
</p>
</div>
</Link>
);
})}
</div>
) : null}
<div className="mt-6 text-center">
<Link href="/explore" className="btn-pill btn-outline text-sm">
Browse all creators
</Link>
</div>
</div>
)}
</section>
</main>
);
}import { requireCreator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import SettingsForm from "@/components/dashboard/SettingsForm";
import GoalForm from "@/components/dashboard/GoalForm";
export default async function DashboardSettingsPage() {
const { creator } = await requireCreator();
const goal = await prisma.goal.findFirst({
where: { creatorId: creator.id, isActive: true },
});
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold">Settings</h1>
<p className="mt-1 text-sm text-muted">
Your page is live at{" "}
<a
href={`/${creator.username}`}
className="font-semibold text-brand"
target="_blank"
rel="noreferrer"
>
http://kofi-clone-whop-tutorial.vercel.app/{creator.username}
</a>
</p>
</div>
<SettingsForm
creator={{
displayName: creator.displayName,
bio: creator.bio ?? "",
coverImageUrl: creator.coverImageUrl ?? "",
avatarUrl: creator.avatarUrl ?? "",
tags: creator.tags,
accentColor: creator.accentColor,
}}
/>
<GoalForm
goal={
goal
? { title: goal.title, description: goal.description ?? "", targetCents: goal.targetCents }
: null
}
/>
</div>
);
}import { NextRequest, NextResponse } from "next/server";
import sharp from "sharp";
import { whopsdk } from "@/lib/whop";
import { isSandbox } from "@/lib/env";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const MAX_BYTES = 5 * 1024 * 1024;
const ALLOWED = ["image/jpeg", "image/png", "image/webp", "image/gif"];
export async function POST(req: NextRequest) {
if (!rateLimit(`creator-upload:${clientIp(req)}`, 10, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
await requireCreator();
let file: File | null = null;
try {
const form = await req.formData();
const value = form.get("file");
if (value instanceof File) file = value;
} catch {
return NextResponse.json({ error: "Invalid upload" }, { status: 400 });
}
if (!file) {
return NextResponse.json({ error: "No file provided" }, { status: 400 });
}
if (!ALLOWED.includes(file.type)) {
return NextResponse.json({ error: "Only JPG, PNG, WEBP or GIF images are allowed" }, { status: 400 });
}
if (file.size > MAX_BYTES) {
return NextResponse.json({ error: "Image must be under 5 MB" }, { status: 400 });
}
try {
if (isSandbox()) {
const input = Buffer.from(await file.arrayBuffer());
const out = await sharp(input)
.rotate()
.resize(800, 800, { fit: "inside", withoutEnlargement: true })
.webp({ quality: 78 })
.toBuffer();
return NextResponse.json({ url: `data:image/webp;base64,${out.toString("base64")}` });
}
const uploaded = await whopsdk.files.upload(file, { filename: file.name || "upload" });
if (!uploaded.url) {
return NextResponse.json({ error: "Upload did not finish" }, { status: 502 });
}
return NextResponse.json({ url: uploaded.url });
} catch (err: unknown) {
console.error("File upload failed:", err);
return NextResponse.json({ error: "Could not upload the image" }, { status: 502 });
}
}"use client";
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@whop/react/components";
import { Check } from "@/components/Icons";
const MAX_BYTES = 5 * 1024 * 1024;
export default function ImageUploadField({
label,
field,
value,
onChange,
round,
}: {
label: string;
field: "coverImageUrl" | "avatarUrl";
value: string;
onChange: (url: string) => void;
round?: boolean;
}) {
const router = useRouter();
const inputRef = useRef<HTMLInputElement>(null);
const [busy, setBusy] = useState(false);
const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
async function persist(url: string) {
await fetch("/api/creator/settings", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ [field]: url }),
});
onChange(url);
setSaved(true);
setTimeout(() => setSaved(false), 2000);
router.refresh();
}
async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
e.target.value = "";
if (!file) return;
if (!file.type.startsWith("image/")) {
setError("Please choose an image file.");
return;
}
if (file.size > MAX_BYTES) {
setError("Image must be under 5 MB.");
return;
}
setError(null);
setBusy(true);
try {
const body = new FormData();
body.append("file", file);
const res = await fetch("/api/creator/upload", { method: "POST", body });
const data = await res.json();
if (!res.ok || !data.url) {
setError(data.error ?? "Upload failed");
setBusy(false);
return;
}
await persist(data.url);
} catch {
setError("Upload failed. Please try again.");
}
setBusy(false);
}
async function onRemove() {
setBusy(true);
setError(null);
try {
await persist("");
} catch {
setError("Could not remove the image");
}
setBusy(false);
}
return (
<div>
<span className="mb-1 block text-sm font-semibold">{label}</span>
<div className="flex items-center gap-4">
<div
className={`grid shrink-0 place-items-center overflow-hidden border border-line bg-surface-2 ${
round ? "h-16 w-16 rounded-full" : "h-16 w-28 rounded-xl"
}`}
>
{value ? (
// eslint-disable-next-line @next/next/no-img-element
<img src={value} alt="" className="h-full w-full object-cover" />
) : (
<span className="px-2 text-center text-xs text-muted">No image</span>
)}
</div>
<div className="flex flex-col items-start gap-1.5">
<Button
type="button"
size="2"
variant="surface"
color="gray"
disabled={busy}
onClick={() => inputRef.current?.click()}
>
{busy ? "Uploading…" : value ? "Replace" : "Upload"}
</Button>
{value ? (
<button
type="button"
onClick={onRemove}
disabled={busy}
className="text-xs text-muted hover:text-ink"
>
Remove
</button>
) : null}
</div>
<input ref={inputRef} type="file" accept="image/*" onChange={onPick} className="hidden" />
{saved ? (
<span className="inline-flex items-center gap-1 text-sm text-positive">
<Check className="h-4 w-4" /> Saved
</span>
) : null}
</div>
{error ? <p className="mt-1 text-sm text-red-600">{error}</p> : null}
</div>
);
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, TextField, TextArea } from "@whop/react/components";
import ImageUploadField from "@/components/dashboard/ImageUploadField";
import { ACCENT_OPTIONS } from "@/lib/accent";
interface CreatorSettings {
displayName: string;
bio: string;
coverImageUrl: string;
avatarUrl: string;
tags: string[];
accentColor: string;
}
export default function SettingsForm({ creator }: { creator: CreatorSettings }) {
const router = useRouter();
const [displayName, setDisplayName] = useState(creator.displayName);
const [bio, setBio] = useState(creator.bio);
const [coverImageUrl, setCoverImageUrl] = useState(creator.coverImageUrl);
const [avatarUrl, setAvatarUrl] = useState(creator.avatarUrl);
const [tagsText, setTagsText] = useState(creator.tags.join(", "));
const [accentColor, setAccentColor] = useState(creator.accentColor);
const [error, setError] = useState<string | null>(null);
const [saved, setSaved] = useState(false);
const [saving, setSaving] = useState(false);
async function onSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSaved(false);
const tags = tagsText
.split(",")
.map((tag) => tag.trim())
.filter(Boolean);
setSaving(true);
try {
const res = await fetch("/api/creator/settings", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
displayName,
bio,
coverImageUrl,
avatarUrl,
tags,
accentColor,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not save settings");
setSaving(false);
return;
}
setSaved(true);
setSaving(false);
router.refresh();
} catch {
setError("Network error. Please try again.");
setSaving(false);
}
}
return (
<form onSubmit={onSubmit} className="kofi-card space-y-5 p-6">
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="settings-name">
Display name
</label>
<TextField.Root size="3">
<TextField.Input
id="settings-name"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
required
maxLength={60}
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="settings-bio">
Bio
</label>
<TextArea
id="settings-bio"
size="3"
value={bio}
onChange={(e) => setBio(e.target.value)}
rows={4}
maxLength={1000}
placeholder="Tell supporters what you create."
/>
</div>
<div className="grid gap-5 sm:grid-cols-2">
<ImageUploadField label="Cover image" field="coverImageUrl" value={coverImageUrl} onChange={setCoverImageUrl} />
<ImageUploadField label="Avatar" field="avatarUrl" value={avatarUrl} onChange={setAvatarUrl} round />
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="settings-tags">
Tags <span className="font-normal text-muted">(comma-separated)</span>
</label>
<TextField.Root size="3">
<TextField.Input
id="settings-tags"
value={tagsText}
onChange={(e) => setTagsText(e.target.value)}
placeholder="illustration, comics, tutorials"
/>
</TextField.Root>
</div>
<div>
<span className="mb-2 block text-sm font-semibold">Accent color</span>
<div className="flex flex-wrap gap-2">
{ACCENT_OPTIONS.map((option) => {
const selected = accentColor === option.name;
return (
<button
key={option.name}
type="button"
onClick={() => setAccentColor(option.name)}
title={option.name}
aria-label={option.name}
aria-pressed={selected}
className={`h-9 w-9 rounded-full border-2 transition ${
selected ? "border-ink scale-110" : "border-transparent hover:scale-105"
}`}
style={{ backgroundColor: option.hex }}
/>
);
})}
</div>
<p className="mt-2 text-xs text-muted capitalize">Selected: {accentColor}</p>
</div>
{error ? <p className="text-sm text-red-600">{error}</p> : null}
{saved ? <p className="text-sm text-positive">Saved.</p> : null}
<Button type="submit" size="3" variant="solid" disabled={saving}>
{saving ? "Saving…" : "Save changes"}
</Button>
</form>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
import { isAccentName } from "@/lib/accent";
const imageValue = z.union([
z.string().url().max(2000),
z.string().regex(/^data:image\/(png|jpeg|webp|gif);base64,/).max(3_000_000),
z.literal(""),
]);
const schema = z.object({
displayName: z.string().min(1).max(60).optional(),
bio: z.string().max(1000).optional(),
coverImageUrl: imageValue.optional(),
avatarUrl: imageValue.optional(),
tags: z.array(z.string().min(1).max(40)).max(20).optional(),
accentColor: z.string().refine(isAccentName, "Invalid accent color").optional(),
});
export async function PATCH(req: NextRequest) {
if (!rateLimit(`creator-settings:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const input = parsed.data;
const data: Prisma.CreatorUpdateInput = {};
if (input.displayName !== undefined) data.displayName = input.displayName;
if (input.bio !== undefined) data.bio = input.bio.trim() || null;
if (input.coverImageUrl !== undefined) data.coverImageUrl = input.coverImageUrl || null;
if (input.avatarUrl !== undefined) data.avatarUrl = input.avatarUrl || null;
if (input.tags !== undefined) data.tags = input.tags.map((t) => t.trim()).filter(Boolean);
if (input.accentColor !== undefined) data.accentColor = input.accentColor;
await prisma.creator.update({ where: { id: creator.id }, data });
return NextResponse.json({ ok: true });
}"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, TextField, TextArea } from "@whop/react/components";
interface CreatorGoal {
title: string;
description: string;
targetCents: number;
}
export default function GoalForm({ goal }: { goal: CreatorGoal | null }) {
const router = useRouter();
const [title, setTitle] = useState(goal?.title ?? "");
const [description, setDescription] = useState(goal?.description ?? "");
const [target, setTarget] = useState(goal ? String(goal.targetCents / 100) : "");
const [error, setError] = useState<string | null>(null);
const [saved, setSaved] = useState(false);
const [saving, setSaving] = useState(false);
const [removing, setRemoving] = useState(false);
async function onSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSaved(false);
const targetCents = Math.round(Number(target) * 100);
if (!title.trim()) {
setError("Give your goal a title.");
return;
}
if (!Number.isFinite(targetCents) || targetCents < 100) {
setError("Set a target of at least $1.");
return;
}
setSaving(true);
try {
const res = await fetch("/api/creator/goal", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: title.trim(),
description: description.trim() || undefined,
targetCents,
}),
});
const data = await res.json();
if (!res.ok) {
setError(data.error ?? "Could not save goal");
setSaving(false);
return;
}
setSaved(true);
setSaving(false);
router.refresh();
} catch {
setError("Network error. Please try again.");
setSaving(false);
}
}
async function onRemove() {
setRemoving(true);
setError(null);
try {
await fetch("/api/creator/goal", { method: "DELETE" });
setTitle("");
setDescription("");
setTarget("");
setSaved(false);
router.refresh();
} catch {
setError("Could not remove goal");
}
setRemoving(false);
}
return (
<form onSubmit={onSubmit} className="kofi-card space-y-5 p-6">
<div>
<h2 className="text-lg font-bold">Donation goal</h2>
<p className="mt-1 text-sm text-muted">
Show supporters what you’re raising money for. Your progress is your total raised
against the target, and a progress bar appears on your page.
</p>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="goal-title">
Title
</label>
<TextField.Root size="3">
<TextField.Input
id="goal-title"
value={title}
onChange={(e) => setTitle(e.target.value)}
maxLength={80}
placeholder="A new drawing tablet"
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="goal-target">
Target amount <span className="font-normal text-muted">(USD)</span>
</label>
<TextField.Root size="3">
<TextField.Input
id="goal-target"
type="number"
min="1"
step="1"
inputMode="decimal"
value={target}
onChange={(e) => setTarget(e.target.value)}
placeholder="500"
/>
</TextField.Root>
</div>
<div>
<label className="mb-1 block text-sm font-semibold" htmlFor="goal-desc">
Description <span className="font-normal text-muted">(optional)</span>
</label>
<TextArea
id="goal-desc"
size="3"
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={3}
maxLength={500}
placeholder="Tell supporters why it matters."
/>
</div>
{error ? <p className="text-sm text-red-600">{error}</p> : null}
{saved ? <p className="text-sm text-positive">Saved.</p> : null}
<div className="flex items-center gap-3">
<Button type="submit" size="3" variant="solid" disabled={saving}>
{saving ? "Saving…" : goal ? "Update goal" : "Set goal"}
</Button>
{goal ? (
<Button type="button" size="3" variant="soft" color="gray" disabled={removing} onClick={onRemove}>
{removing ? "Removing…" : "Remove"}
</Button>
) : null}
</div>
</form>
);
}import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireCreator } from "@/lib/auth";
import { rateLimit, clientIp } from "@/lib/rate-limit";
const schema = z.object({
title: z.string().min(1).max(80),
description: z.string().max(500).optional(),
targetCents: z.number().int().min(100).max(10_000_000),
});
export async function PATCH(req: NextRequest) {
if (!rateLimit(`creator-goal:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
const body: unknown = await req.json().catch(() => null);
const parsed = schema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: parsed.error.issues[0]?.message ?? "Invalid input" },
{ status: 400 },
);
}
const input = parsed.data;
const data = {
title: input.title.trim(),
description: input.description?.trim() || null,
targetCents: input.targetCents,
isActive: true,
};
const existing = await prisma.goal.findFirst({
where: { creatorId: creator.id, isActive: true },
});
if (existing) {
await prisma.goal.update({ where: { id: existing.id }, data });
} else {
await prisma.goal.create({ data: { creatorId: creator.id, ...data } });
}
return NextResponse.json({ ok: true });
}
export async function DELETE(req: NextRequest) {
if (!rateLimit(`creator-goal:${clientIp(req)}`, 20, 60_000)) {
return NextResponse.json({ error: "Too many requests" }, { status: 429 });
}
const { creator } = await requireCreator();
await prisma.goal.updateMany({
where: { creatorId: creator.id, isActive: true },
data: { isActive: false },
});
return NextResponse.json({ ok: true });
}vercel env add WHOP_SANDBOX production
vercel env add WHOP_PLATFORM_COMPANY_ID production
vercel env add NEXT_PUBLIC_WHOP_COMPANY_ID production
vercel env add WHOP_CLIENT_ID production
vercel env add NEXT_PUBLIC_WHOP_APP_ID production
vercel env add WHOP_COMPANY_API_KEY production
vercel env add WHOP_CLIENT_SECRET production| Variable | Production | Preview | Notes |
|---|---|---|---|
DATABASE_URL |
Production Neon (pooled) URL | Sandbox/dev DB or a preview Neon branch | Provisioned via the Vercel Neon integration (Part 2); apply migrations with prisma migrate deploy. |
SESSION_SECRET |
32+ char random string | 32+ char random string | iron-session cookie key; can differ per environment. |
NEXT_PUBLIC_APP_URL |
https://your-domain.com |
The preview deployment origin | Must be the real origin so OAuth builds the correct redirect. |
WHOP_SANDBOX |
"false" |
"true" |
The master switch; "false" only in Production. |
WHOP_PLATFORM_COMPANY_ID |
Production biz_... |
Sandbox biz_... |
Parent company for connected accounts. |
NEXT_PUBLIC_WHOP_COMPANY_ID |
Production biz_... |
Sandbox biz_... |
Public mirror of the platform company id. |
WHOP_CLIENT_ID |
Production app_... |
Sandbox app_... |
OAuth client id. |
NEXT_PUBLIC_WHOP_APP_ID |
Production app_... |
Sandbox app_... |
Public mirror of the app id. |
WHOP_CLIENT_SECRET |
Production OAuth client secret | Sandbox OAuth client secret | Required even with PKCE; server-only. |
WHOP_COMPANY_API_KEY |
Production Company API key | Sandbox Company API key | Server-only; powers all SDK calls. |
WHOP_WEBHOOK_SECRET |
Production webhook secret | Sandbox webhook secret | The production webhook's own secret, no trailing newline. |
NEXT_PUBLIC_PLATFORM_FEE_PERCENT |
Your fee, e.g. "5" |
Same | Application fee percent (0–100). |