From f3ddf263341cf1a37a70c457fe1107a730cfad47 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sun, 17 Aug 2025 18:50:13 +0200 Subject: feat: export waitlist --- apps/web/src/app/api/waitlist/export/route.ts | 83 +++++++++ apps/web/src/app/layout.tsx | 4 + apps/web/src/components/export-button.tsx | 243 ++++++++++++++++++++------ apps/web/src/lib/schemas/waitlist.ts | 15 ++ 4 files changed, 287 insertions(+), 58 deletions(-) create mode 100644 apps/web/src/app/api/waitlist/export/route.ts create mode 100644 apps/web/src/lib/schemas/waitlist.ts (limited to 'apps/web/src') diff --git a/apps/web/src/app/api/waitlist/export/route.ts b/apps/web/src/app/api/waitlist/export/route.ts new file mode 100644 index 00000000..0200e255 --- /dev/null +++ b/apps/web/src/app/api/waitlist/export/route.ts @@ -0,0 +1,83 @@ +import { NextRequest, NextResponse } from "next/server"; +import { baseRateLimit } from "@/lib/rate-limit"; +import { db, exportWaitlist, eq } from "@opencut/db"; +import { randomUUID } from "crypto"; +import { + exportWaitlistSchema, + exportWaitlistResponseSchema, +} from "@/lib/schemas/waitlist"; + +const requestSchema = exportWaitlistSchema; +const responseSchema = exportWaitlistResponseSchema; + +export async function POST(request: NextRequest) { + try { + const ip = request.headers.get("x-forwarded-for") ?? "anonymous"; + const { success } = await baseRateLimit.limit(ip); + if (!success) { + return NextResponse.json({ error: "Too many requests" }, { status: 429 }); + } + + const body = await request.json().catch(() => null); + if (!body) { + return NextResponse.json( + { error: "Invalid JSON in request body" }, + { status: 400 } + ); + } + + const parsed = requestSchema.safeParse(body); + if (!parsed.success) { + return NextResponse.json( + { + error: "Invalid request parameters", + details: parsed.error.flatten().fieldErrors, + }, + { status: 400 } + ); + } + + const { email } = parsed.data; + + const existing = await db + .select({ id: exportWaitlist.id }) + .from(exportWaitlist) + .where(eq(exportWaitlist.email, email)) + .limit(1); + + if (existing.length > 0) { + const responseData = { success: true, alreadySubscribed: true } as const; + const validated = responseSchema.safeParse(responseData); + if (!validated.success) { + return NextResponse.json( + { error: "Internal response formatting error" }, + { status: 500 } + ); + } + return NextResponse.json(validated.data); + } + + await db.insert(exportWaitlist).values({ + id: randomUUID(), + email, + createdAt: new Date(), + updatedAt: new Date(), + }); + + const responseData = { success: true } as const; + const validated = responseSchema.safeParse(responseData); + if (!validated.success) { + return NextResponse.json( + { error: "Internal response formatting error" }, + { status: 500 } + ); + } + return NextResponse.json(validated.data); + } catch (error) { + console.error("Waitlist API error:", error); + return NextResponse.json( + { error: "Internal server error" }, + { status: 500 } + ); + } +} diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index c5a9bf45..ee0bdbd2 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -17,6 +17,10 @@ const protectedRoutes = [ path: "/none", method: "GET", }, + { + path: "/api/waitlist/export", + method: "POST", + }, ]; export default function RootLayout({ diff --git a/apps/web/src/components/export-button.tsx b/apps/web/src/components/export-button.tsx index 0e1c8774..c325db5c 100644 --- a/apps/web/src/components/export-button.tsx +++ b/apps/web/src/components/export-button.tsx @@ -1,58 +1,185 @@ -"use client"; - -import { useState } from "react"; -import { TransitionUpIcon } from "./icons"; -import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"; - -export function ExportButton() { - const [isExportDialogOpen, setIsExportDialogOpen] = useState(false); - - const handleExport = () => { - setIsExportDialogOpen(true); - }; - - return ( - <> - - - - ); -} - -function ExportDialog({ - isOpen, - onOpenChange, -}: { - isOpen: boolean; - onOpenChange: (open: boolean) => void; -}) { - return ( - - - - Export Project - -
-

- Export functionality is not ready yet. We're currently working on a - custom pipeline to make this possible. -

-
- - - ); -} +"use client"; + +import { useState } from "react"; +import { TransitionUpIcon } from "./icons"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "./ui/dialog"; +import { Button } from "./ui/button"; +import { Input } from "./ui/input"; +import { useForm } from "react-hook-form"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "./ui/form"; +import { + exportWaitlistSchema, + type ExportWaitlistInput, + type ExportWaitlistResponse, +} from "@/lib/schemas/waitlist"; +import { cn } from "@/lib/utils"; + +export function ExportButton() { + const [isExportDialogOpen, setIsExportDialogOpen] = useState(false); + + const handleExport = () => { + setIsExportDialogOpen(true); + }; + + return ( + <> + + + + ); +} + +function ExportDialog({ + isOpen, + onOpenChange, +}: { + isOpen: boolean; + onOpenChange: (open: boolean) => void; +}) { + const form = useForm({ defaultValues: { email: "" } }); + const { isSubmitting } = form.formState; + const [serverMessage, setServerMessage] = useState<{ + text: string; + type: "success" | "error"; + } | null>(null); + + const onSubmit = form.handleSubmit(async (values) => { + const parsed = exportWaitlistSchema.safeParse(values); + if (!parsed.success) { + for (const issue of parsed.error.issues) { + const fieldName = + (issue.path[0] as keyof ExportWaitlistInput) || "email"; + form.setError(fieldName, { type: "zod", message: issue.message }); + } + return; + } + setServerMessage(null); + const { email } = parsed.data; + const response = await fetch("/api/waitlist/export", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ email }), + }); + if (!response.ok) { + setServerMessage({ + text: "Something went wrong. Please try again.", + type: "error", + }); + return; + } + const data: ExportWaitlistResponse = await response.json(); + if (data.success && data.alreadySubscribed) { + setServerMessage({ + text: "You're already on the list.", + type: "success", + }); + return; + } + if (data.success) { + setServerMessage({ + text: "You're on the list. We'll email you when it's ready.", + type: "success", + }); + form.reset(); + return; + } + setServerMessage({ + text: "Couldn't add your email. Please try again.", + type: "error", + }); + }); + return ( + + + + Export Project + +
+ + Export isn't ready yet. we're building a custom pipeline to make it + great. + +
+ +
+ ( + + Email + + + + + We'll let you know once export is ready. + + + + )} + /> + +
+ {serverMessage ? ( +

+ {serverMessage.text} +

+ ) : null} +
+ +
+ + + ); +} diff --git a/apps/web/src/lib/schemas/waitlist.ts b/apps/web/src/lib/schemas/waitlist.ts new file mode 100644 index 00000000..c45540d5 --- /dev/null +++ b/apps/web/src/lib/schemas/waitlist.ts @@ -0,0 +1,15 @@ +import { z } from "zod"; + +export const exportWaitlistSchema = z.object({ + email: z.string().email().max(320), +}); + +export const exportWaitlistResponseSchema = z.object({ + success: z.boolean(), + alreadySubscribed: z.boolean().optional(), +}); + +export type ExportWaitlistInput = z.infer; +export type ExportWaitlistResponse = z.infer< + typeof exportWaitlistResponseSchema +>; -- cgit v1.3.1