feat: /contact page

apps/backend/src/routes/sendEmail.js

@@ -33,6 +33,8 @@ router.post('/', async (req, res) => {
 
     const emailDataArray = req.body;
 
+    console.log('mails', emailDataArray);
+
     Promise.all(
       emailDataArray.map(async (emailData) => {
         try {

apps/classroomio-com/.env.example

@@ -1,3 +1,4 @@
 PUBLIC_ENABLE_FAQ=1
 PUBLIC_ENABLE_USERS_COMPANIES=
-PUBLIC_ENABLE_STATS=
+PUBLIC_ENABLE_STATS=
+PUBLIC_GITHUB_KEY=

apps/classroomio-com/package.json

@@ -26,6 +26,7 @@
   },
   "type": "module",
   "dependencies": {
+    "octokit": "^4.0.2",
     "posthog-node": "^3.1.3",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",

apps/classroomio-com/src/lib/Button/Button.svelte

@@ -0,0 +1,22 @@
+<script>
+  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
+  export let label = '';
+  export let className = '';
+  export let isLoading = false;
+  export let isDisabled = false;
+  export let onClick = () => {};
+</script>
+
+<div class="w-full flex items-center justify-center pt-5">
+  <button
+    class="bg-[#0233BD] text-white font-medium text-sm py-4 {className}"
+    disabled={isDisabled}
+    on:click={onClick}
+  >
+    {#if isLoading}
+      <Renew size={24} class="animate-spin" />
+    {:else}
+      {label}
+    {/if}
+  </button>
+</div>

apps/classroomio-com/src/lib/ContactUs/Forms/BugForm.svelte

@@ -0,0 +1,90 @@
+<script>
+  import Button from '$lib/Button/Button.svelte';
+  import TextArea from '$lib/Input/TextArea.svelte';
+  import TextField from '$lib/Input/TextField.svelte';
+  import UploadWidget from '$lib/UploadWidget/UploadWidget.svelte';
+  import { isFormValid } from '$lib/utils/isFormValid';
+  import { submitForm } from '$lib/utils/submitForm';
+  import Sucess from './Sucess.svelte';
+
+  let name = '';
+  let email = '';
+  let embeddedLink = '';
+  let recordingLink = '';
+  let title = '';
+  let description = '';
+
+  let isLoading = false;
+  let errorMessage = '';
+  let sent = false;
+
+  const handleClick = async () => {
+    const data = { name, email, title, description, embeddedLink, recordingLink };
+
+    if (!isFormValid(data)) {
+      errorMessage = 'Please fill out all required fields.';
+      return;
+    }
+    isLoading = true;
+    const fullDescription = `${JSON.stringify(name)} is reporting a bug with the following details
+
+      recording: ${JSON.stringify(recordingLink)}
+      embeddedLink: ${JSON.stringify(embeddedLink)}
+      email: ${JSON.stringify(email)}.
+
+      ${JSON.stringify(description)}
+      `;
+
+    const mainTitle = `bug: ${title}`;
+    const formData = {
+      assignees: ['rotimi-best'],
+      labels: ['bug'],
+      title: mainTitle,
+      description: fullDescription
+    };
+    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="The bug in short" isRequired bind:value={title} />
+      <TextArea label="Describe the bug in detail" isRequired bind:value={description} />
+      <TextField
+        label="Add a Link to the page your widget is embedded on"
+        isRequired
+        bind:value={embeddedLink}
+      />
+      <!-- <UploadWidget label="Add a screenshot of the bug or incident" bind:imageURL /> -->
+      <TextField
+        label="Add a link to a screen recording (will help us investigate faster)"
+        isRequired
+        bind:value={recordingLink}
+      />
+      {#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>

apps/classroomio-com/src/lib/ContactUs/Forms/FeatureRequestForm.svelte

@@ -0,0 +1,99 @@
+<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 isPortalOpen = false;
+
+  let name = '';
+  let email = '';
+  let title = '';
+  let description = '';
+
+  let isLoading = false;
+  let errorMessage = '';
+  let sent = false;
+
+  const handleClick = async () => {
+    const data = { name, email, title, description };
+
+    if (!isFormValid(data)) {
+      errorMessage = 'Please fill out all required fields.';
+      return;
+    }
+
+    isLoading = true;
+    const fullDescription = `${JSON.stringify(
+      name
+    )} would like to request for a new feature with the following details
+
+      ${JSON.stringify(description)}
+
+       email: ${JSON.stringify(email)}
+      `;
+
+    const mainTitle = `Request: ${title}`;
+
+    const formData = {
+      assignees: ['rotimi-best'],
+      labels: ['enhancement', 'needs triage'],
+      title: mainTitle,
+      description: fullDescription
+    };
+    try {
+      await submitForm(formData);
+      sent = true;
+    } catch (error) {
+      console.log(error);
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  const togglePortal = () => {
+    isPortalOpen = !isPortalOpen;
+  };
+</script>
+
+{#if sent}
+  <Sucess />
+{:else}
+  <div
+    class="relative overflow-hidden mt-10 flex space-y-3 flex-col text-center items-center border border-[#D9E0F5] justify-center w-full rounded-md min-h-[300px] p-4 bg-[#F5F8FE]"
+  >
+    <h1 class="font-bold text-3xl">Request a feature</h1>
+    <div class="absolute w-20 h-20 bg-[#0233BD] -top-14 -left-9 rotate-[50deg]" />
+    {#if isPortalOpen}
+      <p class="w-[70%] font-normal text-sm mb-2">
+        Fill out the fields to request for your feature
+      </p>
+      <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="Feature Name" isRequired bind:value={title} />
+        <TextArea label="Short description" isRequired bind:value={description} />
+        {#if !!errorMessage}
+          <p class="text-left text-sm text-red-500">{errorMessage}</p>
+        {/if}
+        <Button
+          label="Submit"
+          className="px-10 md:px-32"
+          onClick={handleClick}
+          isDisabled={isLoading}
+          {isLoading}
+        />
+      </div>
+    {:else}
+      <p class="w-[70%] font-normal text-sm">
+        Would you like to request a new feature? We’d love to hear your suggestions. Click the
+        button below to access our feedback portal.
+      </p>
+      <Button label="Visit feedback portal" className="px-10 md:px-20" onClick={togglePortal} />
+    {/if}
+  </div>
+{/if}

apps/classroomio-com/src/lib/ContactUs/Forms/FeedbackForm.svelte

@@ -0,0 +1,75 @@
+<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;
+
+  const handleClick = async () => {
+    const data = { name, email, title, description };
+
+    if (!isFormValid(data)) {
+      errorMessage = 'Please fill out all required fields.';
+      return;
+    }
+    isLoading = true;
+    const fullDescription = `My name is ${JSON.stringify(name)}
+
+      ${JSON.stringify(description)}
+
+      email: ${JSON.stringify(email)}.
+      `;
+
+    const mainTitle = `[feedback] ${title}`;
+    const formData = {
+      assignees: ['rotimi-best'],
+      labels: ['feedback'],
+      title: mainTitle,
+      description: fullDescription
+    };
+
+    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>

apps/classroomio-com/src/lib/ContactUs/Forms/HelpForm.svelte

@@ -0,0 +1,67 @@
+<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 Sucess from './Sucess.svelte';
+
+  let name = '';
+  let email = '';
+  let title = '';
+  let description = '';
+
+  let isLoading = false;
+  let errorMessage = '';
+  let sent = false;
+
+  function handleClick() {
+    const data = { name, email, title, description };
+
+    if (!isFormValid(data)) {
+      errorMessage = 'Please fill out all required fields.';
+      return;
+    }
+    isLoading = true;
+    try {
+      const subject = `[help] ${title}`;
+      const body = description;
+
+      // Create the mailto URL with encoded components
+      const mailToUrl = `mailto:help@classroomio.com?subject=${encodeURIComponent(
+        subject
+      )}&body=${encodeURIComponent(body)}`;
+
+      // Redirect to the mailto URL
+      window.location.href = mailToUrl;
+    } 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>