feat: /contact page on classroomio-com (#428)

* contact page v1 * finished the UI of the contact us page * working on the forms * All functions and logic done * some refactor * some refactor * some refactor * some refactor * added loading icon * removed the image * finished the send email * some cleanup * chore: refactoring * finishing touches * update .env.example --------- Co-authored-by: emmanuel <chifez1@gmail.com>
2024-11-12 02:18:51 +01:00
parent b78a0acc99
commit 89569fe6d1
18 changed files with 862 additions and 185 deletions
@@ -0,0 +1,70 @@
+<script>
+  import Button from '$lib/Button/Button.svelte';
+  import TextArea from '$lib/Input/TextArea.svelte';
+  import TextField from '$lib/Input/TextField.svelte';
+  import { isFormValid } from '$lib/utils/isFormValid';
+  import { submitForm } from '$lib/utils/submitForm';
+  import Sucess from './Sucess.svelte';
+
+  let name = '';
+  let email = '';
+  let title = '';
+  let description = '';
+
+  let isLoading = false;
+  let errorMessage = '';
+  let sent = false;
+
+  async function handleClick() {
+    const data = { name, email, title, description };
+
+    if (!isFormValid(data)) {
+      errorMessage = 'Please fill out all required fields.';
+      return;
+    }
+
+    isLoading = true;
+
+    const formData = {
+      title: `[HELP] ${title}`,
+      description: `My name is ${JSON.stringify(name)}, email is ${JSON.stringify(
+        email
+      )}. \n\n${JSON.stringify(description)}.`,
+      replyTo: email
+    };
+
+    try {
+      await submitForm(formData);
+      sent = true;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div>
+  {#if sent}
+    <Sucess />
+  {:else}
+    <div class="w-full my-10 space-y-5">
+      <div class="flex flex-col md:flex-row gap-10">
+        <TextField label="Your Name" isRequired className="w-full" bind:value={name} />
+        <TextField label="Your Email" isRequired className="w-full" bind:value={email} />
+      </div>
+      <TextField label="Subject" isRequired bind:value={title} />
+      <TextArea label="Message" isRequired bind:value={description} />
+      {#if !!errorMessage}
+        <p class="text-left text-sm text-red-500">{errorMessage}</p>
+      {/if}
+      <Button
+        label="Submit"
+        className="px-32"
+        onClick={handleClick}
+        isDisabled={isLoading}
+        {isLoading}
+      />
+    </div>
+  {/if}
+</div>