From 58842c6f1ec8d1bf79c4664f744ca2e5747292d5 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 10 Nov 2024 19:31:23 +0000
Subject: [PATCH] feat(#79): Create contact page

---
 .env.example                       |  4 +-
 src/routes/contact/+page.server.ts | 30 +++++++++++
 src/routes/contact/+page.svelte    | 87 ++++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/contact/+page.server.ts
 create mode 100644 src/routes/contact/+page.svelte

diff --git a/.env.example b/.env.example
index 79cb895..4ab3dbc 100644
--- a/.env.example
+++ b/.env.example
@@ -11,4 +11,6 @@ VITE_BREVO_API_KEY=""
 # Default sender email for system notifications
 VITE_BREVO_SENDER_EMAIL="noreply@example.com"
 # Display name for the sender email
-VITE_BREVO_SENDER_NAME="No Reply"
\ No newline at end of file
+VITE_BREVO_SENDER_NAME="No Reply"
+# Contact email for the contact page form to send to
+VITE_CONTACT_EMAIL=""
\ No newline at end of file
diff --git a/src/routes/contact/+page.server.ts b/src/routes/contact/+page.server.ts
new file mode 100644
index 0000000..7073ebc
--- /dev/null
+++ b/src/routes/contact/+page.server.ts
@@ -0,0 +1,30 @@
+import type { Actions } from '@sveltejs/kit';
+import { fail } from '@sveltejs/kit';
+import { sendEmail } from '$lib/utils/brevo/email';
+import { VITE_CONTACT_EMAIL } from '$env/static/private';
+import logger from '$lib/utils/logger/logger';
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		const name = formData.get('name') as string;
+		const email = formData.get('email') as string;
+		const message = formData.get('message') as string;
+
+		const emailContent = `
+            <p>You have a new contact form submission:</p>
+            <p><strong>Name:</strong> ${name}</p>
+            <p><strong>Email:</strong> ${email}</p>
+            <p><strong>Message:</strong></p>
+            <p>${message}</p>
+        `;
+
+		try {
+			await sendEmail('New Contact Form Submission', emailContent, VITE_CONTACT_EMAIL);
+			return { success: true };
+		} catch (error) {
+			logger.error('Failed to send email:', error);
+			return fail(400, { error });
+		}
+	}
+};
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
new file mode 100644
index 0000000..271ffec
--- /dev/null
+++ b/src/routes/contact/+page.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { SubmitFunction } from '@sveltejs/kit';
+
+	let name = '';
+	let email = '';
+	let message = '';
+	let submitted = false;
+	let error = '';
+
+	const handleSubmit: SubmitFunction = ({}) => {
+		return async ({ result, update }) => {
+			if (result.data.success) {
+				submitted = true;
+			} else {
+				error = result.error?.message || 'Form submission failed';
+			}
+		};
+	};
+</script>
+
+{#if submitted}
+	<div class="alert alert-success shadow-lg">
+		<div>
+			<span>Thank you for your message, {name}!</span>
+		</div>
+	</div>
+{:else}
+	<form
+		method="post"
+		action="?"
+		use:enhance={handleSubmit}
+		class="max-w-lg mx-auto p-4 bg-base-200 rounded-lg shadow-md"
+	>
+		{#if error}
+			<div class="alert alert-error shadow-lg mb-4">
+				<div>
+					<span>{error}</span>
+				</div>
+			</div>
+		{/if}
+		<div class="form-control mb-4">
+			<label for="name" class="label">
+				<span class="label-text">Name</span>
+			</label>
+			<input
+				id="name"
+				name="name"
+				type="text"
+				bind:value={name}
+				class="input input-bordered"
+				required
+			/>
+		</div>
+
+		<div class="form-control mb-4">
+			<label for="email" class="label">
+				<span class="label-text">Email</span>
+			</label>
+			<input
+				id="email"
+				name="email"
+				type="email"
+				bind:value={email}
+				class="input input-bordered"
+				required
+			/>
+		</div>
+
+		<div class="form-control mb-4">
+			<label for="message" class="label">
+				<span class="label-text">Message</span>
+			</label>
+			<textarea
+				id="message"
+				name="message"
+				bind:value={message}
+				class="textarea textarea-bordered"
+				required
+			></textarea>
+		</div>
+
+		<div class="form-control">
+			<button type="submit" class="btn btn-primary">Send</button>
+		</div>
+	</form>
+{/if}