Add contact page

8 files changed, 199 insertions, 14 deletions

diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte
index 39d2260..71c9aba 100644
--- a/src/components/DirectionCard.svelte
+++ b/src/components/DirectionCard.svelte
@@ -24,9 +24,3 @@
     </div>
   {/if}
 </main>
-
-<style>
-  p {
-    white-space: pre-wrap;
-  }
-</style>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index f99dc43..e6a829e 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -7,7 +7,7 @@
           <div class="d-flex flex-row align-items-center border-darkish p-1">
             <i class="bi bi-telephone"></i>
             <div class="px-4">
-              <span>(530) 638 - 3546 (call or text)</span>
+              <span>(530) 638 - 3546</span>
             </div>
           </div>
         </a>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index aa8d8d8..ccb2fd5 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -2,8 +2,10 @@
   import NavBar from '../components/NavBar.svelte';
   import Footer from '../components/Footer.svelte';
   import '../app.css';
+  import { SvelteToast } from '@zerodevx/svelte-toast';
 </script>
 
+<SvelteToast />
 <NavBar />
 <div class="container my-2">
   <slot />
diff --git a/src/routes/approach/index.svelte b/src/routes/approach/index.svelte
index f72b3e1..2dbe1df 100644
--- a/src/routes/approach/index.svelte
+++ b/src/routes/approach/index.svelte
@@ -4,7 +4,7 @@
     <div class="row justify-content-center">
       <div class="col-sm-10">
         <div style="text-align:center">
-          <img src="https://ztxoywaazhxdeiftmsiy.supabase.co/storage/v1/object/public/mistymountains/boats.jpg" style="width:60%">
+          <img src="https://ztxoywaazhxdeiftmsiy.supabase.co/storage/v1/object/public/mistymountains/boats.jpg" alt="boats in water" style="width:60%">
         </div>
         <br>
         <p>I meet each client where they are at and customize their therapeutic journey to best fit their personality and issues. The approaches I use most are listed below:</p>
diff --git a/src/routes/contact/index.svelte b/src/routes/contact/index.svelte
index cbedec9..84d9621 100644
--- a/src/routes/contact/index.svelte
+++ b/src/routes/contact/index.svelte
@@ -1,8 +1,128 @@
-<main>
-  <div class="h-captcha" data-sitekey={import.meta.env.VITE_HCAPTCHA_KEY}></div>
+<script context="module">
+  import { browser } from '$app/env';
+  import { toast } from '@zerodevx/svelte-toast'
+  import HCaptcha from 'svelte-hcaptcha';
 
+  let submission = {
+    name: '',
+    email: '',
+    message: '',
+    captchaToken: '',
+  };
 
-  <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
-</main>
+  let captcha;
+
+  function handleSubmit (e) {
+    e.preventDefault();
+
+    if (browser) {
+      const sendToast = toast.push('Sending...', {
+        duration: 300,
+        initial: 0,
+        next: 0.2,
+        dismissable: false
+      });
+      fetch('/contact/submit', {
+        method: "POST",
+        body: JSON.stringify(submission)
+      })
+        .then((x) => x.json())
+        .then((x) => {
+          toast.set(sendToast, { next: 1 });
+
+          if (x.success) {
+            toast.push('Success! Reloading...', {
+              theme: {
+                '--toastBackground': '#48BB78',
+                '--toastBarBackground': '#2F855A'
+              },
+              duration: 1000,
+              onpop: () => { window.location.reload(); },
+            });
+          } else if (x.error) {
+            toast.push(x.error, {
+              theme: {
+                '--toastBackground': '#F56565',
+                '--toastBarBackground': '#C53030'
+              }
+            });
+          }
+        })
+        .catch((err) => console.log(err));
+    }
+  }
 
+  function onCaptchaError () {
+    toast.push('Failed to verify captcha, try again.', {
+      theme: {
+        '--toastBackground': '#F56565',
+        '--toastBarBackground': '#C53030'
+      }
+    });
+    captcha.reset();
+  }
+
+  function onCaptchaSuccess ({ detail: { token } }) {
+    submission.captchaToken = token;
+  }
+</script>
+
+<main>
+  <h1 class="text-center">Let's get in touch</h1>
+  <div class="d-flex justify-content-center flex-row row">
+    <div class="border shadow bg-light py-2 col-lg-3 d-flex align-items-center flex-column m-2">
+      <h1><i class="bi bi-map-fill"></i></h1>
+      <p style="hyphens: auto;">
+        <a href="https://goo.gl/maps/DdkzDQTRHBTtG8ys6">534 Trejo Street, Suite 200F
+        <br>
+        Rexburg, ID, 83440
+        </a>
+      </p>
+    </div>
+    <div class="border shadow bg-light py-2 col-lg-2 d-flex align-items-center flex-column m-2">
+      <h1><i class="bi bi-phone-fill"></i></h1>
+      <p style="hyphens: auto;">
+        Call or text
+        <br>
+        <a href="tel:15306383546">(530) 638 - 3546</a>
+      </p>
+    </div>
+    <div class="border shadow bg-light py-2 col-lg-3 d-flex align-items-center flex-column m-2">
+      <h1><i class="bi bi-envelope-fill"></i></h1>
+      <p style="hyphens: auto;">
+        Email
+        <br>
+        <a href="mailto:jeffer@mistymountainsthreapy.com">jeffer@mistymountainstherapy.com</a>
+      </p>
+    </div>
+  </div>
+  <br>
+  <h3>Or send us a message</h3>
+  <form class="bg-light border shadow p-4" on:submit|preventDefault={handleSubmit}>
+    <div class="row mb-2">
+      <div class="form-group col-md-6">
+        <label>Email *</label>
+        <input type="email" class="form-control" bind:value={submission.email} placeholder="johnnyappleseed@example.com" required>
+      </div>
+      <div class="form-group col-md-6">
+        <label>Name *</label>
+        <input type="text" class="form-control" bind:value={submission.name} placeholder="Johnny Appleseed" required>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Message *</label>
+      <textarea class="form-control" bind:value={submission.message} rows="3" placeholder="Hello! I would like to schedule a free 15-minute consultation..." required></textarea>
+    </div>
+    <div class="pt-2">
+      <HCaptcha 
+        sitekey={import.meta.env.VITE_HCAPTCHA_KEY} 
+        bind:this={captcha}
+        on:success={onCaptchaSuccess}
+        on:error={onCaptchaError}
+      />
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+  <br>
+</main>
 
diff --git a/src/routes/contact/submit.js b/src/routes/contact/submit.js
new file mode 100644
index 0000000..cf0d65c
--- /dev/null
+++ b/src/routes/contact/submit.js
@@ -0,0 +1,69 @@
+import 'dotenv/config';
+import sgMail from '@sendgrid/mail';
+sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+
+export async function get() {
+  const items = [
+    {a: 1, b: 2},
+    {a: 3, b: 4},
+    {a: 5, b: 6},
+  ];
+  return {
+    body: items
+  };
+}
+ 
+export async function post({ request }) {
+  const body = await request.json();
+  const { HCAPTCHA_SECRET, FORM_FROM_EMAIL, FORM_TO_EMAIL } = process.env;
+
+  const captchaVerified = await fetch(`https://hcaptcha.com/siteverify?response=${body.captchaToken}&secret=${HCAPTCHA_SECRET}`, {
+    method: 'POST',
+  })
+    .then((res) => res.json())
+    .then((json) => json.success)
+    .catch(() => false);
+
+  if (!captchaVerified) {
+    return {
+      statusCode: 400,
+      body: {
+        error: 'Captcha verification failed',
+      },
+    };
+  }
+
+  const msg = {
+    to: FORM_TO_EMAIL,
+    from: FORM_FROM_EMAIL,
+    subject: `Form Submission from ${body.name}`,
+    text: `
+      Name: ${body.name}
+      Email: ${body.email}
+      Message: ${body.message}
+    `,
+  };
+
+  const messageSent = await sgMail
+    .send(msg)
+    .then(() => true)
+    .catch((error) => {
+      console.error(error);
+      return false;
+    });
+
+  if (!messageSent) {
+    return {
+      statusCode: 500,
+      body: {
+        error: 'Message could not be sent',
+      },
+    };
+  }
+
+  return {
+    body: {
+      success: true,
+    },
+  };
+}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 199014a..97d6566 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -20,7 +20,7 @@
         Misty Mountains Therapy is a privately owned, high quality, specialty therapy clinic, founded in January 2020 by Jefferson Hunt. We are dedicated to providing comprehensive therapy evaluation and treatment services to children and adults for a wide variety of disorders in the most efficient and effective manner possible in the Rexburg area. We believe that therapy should be fun, engaging, and most importantly, useful to our clients.
       </p>
       <p>
-        We are currently accepting new clients and offer a variety of services to help you live the life you desire. To find the right fit for you, schedule a <a href="">free 15-minute consultation</a>.
+        We are currently accepting new clients and offer a variety of services to help you live the life you desire. To find the right fit for you, schedule a <a href="/contact">free 15-minute consultation</a>.
       </p>
     </div>
   </div>
diff --git a/src/routes/team/index.svelte b/src/routes/team/index.svelte
index 3d27c0e..52c97ee 100644
--- a/src/routes/team/index.svelte
+++ b/src/routes/team/index.svelte
@@ -38,7 +38,7 @@
       <div class="row border-bottom">
         <DirectionCard imageSpec={{image: person.image, alt: person.name}} direction={i % 2 ? 'left' : 'right'}>
           <h2>{person.name}, {person.position}</h2>
-          <p>{person.bio}</p>
+          <p style="white-space: pre-line">{person.bio}</p>
           <a href="mailto:{person.email}"><p>{person.email}</p></a>
         </DirectionCard>
       </div>