feat: implement waitlist submission functionality in ChatIntroduction component with validation and user feedback

Author: maksym-work

src/lib/components/chat/ChatIntroduction.svelte

@@ -22,7 +22,54 @@
 	let email = $state(user?.email || "");
 	let phone = $state("");
 	let kordamine = $state("");
+	let isSubmitting = $state(false);
+	let submitMessage = $state("");
+	let submitError = $state("");
 	const options = ["1 kord", "2 korda", "3 korda", "4 korda", "5 korda"];
+
+	async function handleSubmit() {
+		// Reset messages
+		submitMessage = "";
+		submitError = "";
+
+		// Validate form
+		if (!email || !phone || !kordamine) {
+			submitError = "Palun täida kõik väljad";
+			return;
+		}
+
+		isSubmitting = true;
+
+		try {
+			const response = await fetch("/api/waitlist", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					email,
+					phone,
+					repetition: kordamine,
+				}),
+			});
+
+			const data = await response.json();
+
+			if (response.ok) {
+				submitMessage = "Täname! Oled edukalt ootejärjekorda lisatud.";
+				// Reset form
+				email = "";
+				phone = "";
+				kordamine = "";
+			} else {
+				submitError = data.error || "Viga andmete salvestamisel";
+			}
+		} catch (error) {
+			submitError = "Viga andmete saatmisel. Palun proovi uuesti.";
+		} finally {
+			isSubmitting = false;
+		}
+	}
 </script>
 
 <div class="my-auto flex flex-col">
@@ -229,9 +276,12 @@
 
 				<!-- Submit Button -->
 				<button
-					class="flex w-full items-center justify-center gap-2 rounded-md bg-[#306FC7] py-3 font-semibold text-white hover:bg-blue-700"
+					type="button"
+					onclick={handleSubmit}
+					disabled={isSubmitting}
+					class="flex w-full items-center justify-center gap-2 rounded-md bg-[#306FC7] py-3 font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
 				>
-					Esita
+					{isSubmitting ? "Saadan..." : "Esita"}
 					<svg
 						class="h-5 w-5"
 						fill="none"
@@ -242,6 +292,19 @@
 						<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
 					</svg>
 				</button>
+
+				<!-- Success/Error Messages -->
+				{#if submitMessage}
+					<div class="mt-3 rounded-md border border-green-400 bg-green-100 p-3 text-green-700">
+						{submitMessage}
+					</div>
+				{/if}
+
+				{#if submitError}
+					<div class="mt-3 rounded-md border border-red-400 bg-red-100 p-3 text-red-700">
+						{submitError}
+					</div>
+				{/if}
 			</div>
 		</div>
 	</div>

src/lib/server/database.ts

@@ -13,6 +13,7 @@ import type { MigrationResult } from "$lib/types/MigrationResult";
 import type { Semaphore } from "$lib/types/Semaphore";
 import type { AssistantStats } from "$lib/types/AssistantStats";
 import type { CommunityToolDB } from "$lib/types/Tool";
+import type { Waitlist } from "$lib/types/Waitlist";
 import { MongoMemoryServer } from "mongodb-memory-server";
 import { logger } from "$lib/server/logger";
 import { building } from "$app/environment";
@@ -132,6 +133,7 @@ export class Database {
 		const tokenCaches = db.collection<TokenCache>("tokens");
 		const tools = db.collection<CommunityToolDB>("tools");
 		const configCollection = db.collection<ConfigKey>("config");
+		const waitlist = db.collection<Waitlist>("waitlist");
 
 		return {
 			conversations,
@@ -151,6 +153,7 @@ export class Database {
 			tokenCaches,
 			tools,
 			config: configCollection,
+			waitlist,
 		};
 	}
 
@@ -175,6 +178,7 @@ export class Database {
 			tokenCaches,
 			tools,
 			config,
+			waitlist,
 		} = this.getCollections();
 
 		conversations
@@ -290,6 +294,8 @@ export class Database {
 			.catch((e) => logger.error(e));
 
 		config.createIndex({ key: 1 }, { unique: true }).catch((e) => logger.error(e));
+		waitlist.createIndex({ email: 1 }, { unique: true }).catch((e) => logger.error(e));
+		waitlist.createIndex({ createdAt: 1 }).catch((e) => logger.error(e));
 	}
 }
 

src/lib/types/Waitlist.ts

@@ -0,0 +1,9 @@
+import type { ObjectId } from "mongodb";
+import type { Timestamps } from "./Timestamps";
+
+export interface Waitlist extends Timestamps {
+	_id: ObjectId;
+	email: string;
+	phone: string;
+	repetition: string;
+}

src/routes/api/waitlist/+server.ts

@@ -0,0 +1,45 @@
+import { collections } from "$lib/server/database";
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+import { ObjectId } from "mongodb";
+
+export const POST: RequestHandler = async ({ request }) => {
+	try {
+		const { email, phone, repetition } = await request.json();
+
+		// Validate input
+		if (!email || !phone || !repetition) {
+			return json({ error: "Email, phone, and repetition are required" }, { status: 400 });
+		}
+
+		// Validate email format
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(email)) {
+			return json({ error: "Invalid email format" }, { status: 400 });
+		}
+
+		// Check if email already exists
+		const existingEntry = await collections.waitlist.findOne({ email });
+		if (existingEntry) {
+			return json({ error: "Email already registered" }, { status: 409 });
+		}
+
+		// Insert new waitlist entry
+		const now = new Date();
+		const waitlistEntry = {
+			_id: new ObjectId(),
+			email,
+			phone,
+			repetition,
+			createdAt: now,
+			updatedAt: now,
+		};
+
+		await collections.waitlist.insertOne(waitlistEntry);
+
+		return json({ success: true, message: "Successfully added to waitlist" });
+	} catch (error) {
+		console.error("Error adding to waitlist:", error);
+		return json({ error: "Internal server error" }, { status: 500 });
+	}
+};