Switch newsletter form to SvelteKit Form Actions

- remove api endpoint and use latest SK form actions
- create reusable server page function for form handling
- handling the errors in the server function

src/components/molecules/EmailForm.svelte

@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { enhance } from '$app/forms'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { sendEvent } from '$utils/analytics'
@@ -12,54 +13,40 @@
 
     export let past: boolean = false
 
+
     let inputInFocus = false
-    let formStatus: string = null
+    let formStatus: { error: string, success: boolean, message: string } = null
     let formMessageTimeout: ReturnType<typeof setTimeout> | number
-    const formMessages = {
-        PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
-        MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `Uh oh! This email address is already subscribed to the newsletter.`,
-        INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
-    }
+
+    $: isSuccess = formStatus && formStatus.success
 
     // Toggle input focus
     const toggleFocus = () => inputInFocus = !inputInFocus
 
+    // Handle form submission
+    const handleForm = () => {
+        return async ({ result, update }) => {
+            formStatus = result.data
+            console.log(result.data)
 
-    /**
-     * Subscription form handling
-     */
-    const formSubmission = async ({ target }) => {
-        const formData = new FormData(target)
-        const email = String(formData.get('email'))
-
-        if (email && email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
-            const req = await fetch('/api/newsletter', {
-                method: 'POST',
-                headers: { 'Content-Type': 'text/plain' },
-                body: email
-            })
-
-            const res = await req.json()
-            formStatus = res.code
-
-            if (res.code === 'PENDING') {
+            // If successful
+            if (result.data.success) {
                 sendEvent({ action: 'newsletterSubscribe' })
+                update()
+            } else {
+                // Hide message for errors
+                clearTimeout(formMessageTimeout)
+                formMessageTimeout = requestAnimationFrame(() => setTimeout(() => formStatus = null, 4000))
             }
-        } else {
-            formStatus = 'INVALID_EMAIL'
         }
     }
-
-    $: if (formStatus !== 'PENDING') {
-        clearTimeout(formMessageTimeout)
-        formMessageTimeout = setTimeout(() => formStatus = null, 3000)
-    }
 </script>
 
 <div class="newsletter-form">
-    {#if formStatus !== 'PENDING'}
-        <form method="POST" on:submit|preventDefault={formSubmission}
-            out:fly={{ y: -8, easing: quartOut, duration: 600 }}
+    {#if !isSuccess}
+        <form method="POST" action="?/subscribe"
+            use:enhance={handleForm}
+            out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
         >
             <div class="newsletter-form__email" class:is-focused={inputInFocus}>
                 <input type="email" placeholder="Your email address" name="email" id="newsletter_email" required
@@ -90,14 +77,14 @@
         </form>
     {/if}
 
-    {#if formStatus}
+    {#if formStatus && formStatus.message}
         <div class="newsletter-form__message shadow-small"
-            class:is-error={formStatus !== 'PENDING'}
-            class:is-success={formStatus === 'PENDING'}
-            in:fly={{ y: 8, easing: quartOut, duration: 600, delay: 600 }}
-            out:fly={{ y: 8, easing: quartOut, duration: 600 }}
+            class:is-error={!isSuccess}
+            class:is-success={isSuccess}
+            in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}
+            out:fly|local={{ y: 8, easing: quartOut, duration: 600 }}
         >
-            <p class="text-xsmall">{formMessages[formStatus]}</p>
+            <p class="text-xsmall">{formStatus.message}</p>
         </div>
     {/if}
 </div>