🚧 Switch to monorepo with Turbo

apps/website/src/components/molecules/EmailForm.svelte

@@ -0,0 +1,106 @@
+<style lang="scss">
+    @import "../../style/molecules/newsletter-form";
+</style>
+
+<script lang="ts">
+    import { fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
+    import { sendEvent } from '$utils/analytics'
+    // Components
+    import IconArrow from '$components/atoms/IconArrow.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+
+    export let past: boolean = false
+
+    let inputInFocus = false
+    let formStatus: FormStatus = null
+    let formMessageTimeout: ReturnType<typeof setTimeout> | number
+
+    interface FormStatus {
+        error?: string
+        success?: boolean
+        message: string
+    }
+    const formMessages = {
+        PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
+        MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `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
+    async function handleForm (event: Event | HTMLFormElement) {
+        const data = new FormData(this)
+        const email = data.get('email')
+
+        if (email) {
+            const req = await fetch(this.action, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email })
+            })
+            const result: FormStatus = await req.json()
+            formStatus = result
+            console.log('SK api response:', result)
+
+            // If successful
+            if (formStatus.success) {
+                sendEvent('newsletterSubscribe')
+            } else {
+                // Hide message for errors
+                clearTimeout(formMessageTimeout)
+                formMessageTimeout = requestAnimationFrame(() => setTimeout(() => formStatus = null, 4000))
+            }
+        }
+    }
+</script>
+
+<div class="newsletter-form">
+    {#if !isSuccess}
+        <form method="POST" action="/api/newsletter" on:submit|preventDefault={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
+                    on:focus={toggleFocus}
+                    on:blur={toggleFocus}
+                >
+                <ButtonCircle
+                    type="submit"
+                    color="pink" size="small"
+                    clone={true}
+                    label="Subscribe"
+                >
+                    <IconArrow color="white" />
+                </ButtonCircle>
+            </div>
+
+            <div class="newsletter-form__bottom">
+                {#if past}
+                    <a href="/subscribe" class="past-issues" data-sveltekit-noscroll>
+                        <svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
+                        </svg>
+                        <span>See past issues</span>
+                    </a>
+                {/if}
+                <p>No spam, we promise!</p>
+            </div>
+        </form>
+    {/if}
+
+    {#if formStatus && formStatus.message}
+        <div class="newsletter-form__message shadow-small"
+            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.message]}</p>
+        </div>
+    {/if}
+</div>