✨ Implement newsletter subscription form using API

Switch from SendInBlue to EmailOctopus for newsletter. Now uses their API through the form to handle subscription.
2022-06-23 20:10:55 +02:00
parent dc4eaca312
commit a9869b72be
8 changed files with 179 additions and 46 deletions
--- a/src/components/molecules/EmailForm.svelte
+++ b/src/components/molecules/EmailForm.svelte
@@ -3,52 +3,101 @@
 </style>

 <script lang="ts">
-    import { getContext } from 'svelte'
+    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

-    const { settings: { newsletter_url }}: any = getContext('global')
-
    let inputInFocus = false
+    let formStatus: 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.`,
+    }

    // Toggle input focus
    const toggleFocus = () => inputInFocus = !inputInFocus
+
+
+    /**
+     * Subscription form handling
+     */
+    const formSubmission = async ({ target }) => {
+        const formData = new FormData(target)
+        const formValues = Object.fromEntries(formData)
+        const { email } = formValues
+
+        if (email && email.match('/^([\w.-])+@([\w.-])+\.([a-zA-Z])+/')) {
+            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') {
+                sendEvent({ action: 'newsletterSubscribe' })
+            }
+        } else {
+            formStatus = 'INVALID_EMAIL'
+        }
+    }
+
+    $: if (formStatus !== 'PENDING') {
+        clearTimeout(formMessageTimeout)
+        formMessageTimeout = setTimeout(() => formStatus = null, 3000)
+    }
 </script>

 <div class="newsletter-form">
-    <form method="POST" action={newsletter_url} id="sib-form" target="_blank">
-        <div class="newsletter-form__email" class:is-focused={inputInFocus}>
-            <input type="email" placeholder="Your email address" name="EMAIL" id="SUB_EMAIL" required
-                on:focus={toggleFocus}
-                on:blur={toggleFocus}
-            >
-            <ButtonCircle
-                type="submit" form="sib-form"
-                color="pink" size="small"
-                clone={true}
-                label="Subscribe"
-            >
-                <IconArrow color="white" />
-            </ButtonCircle>
+    {#if formStatus !== 'PENDING'}
+        <form method="POST" on:submit|preventDefault={formSubmission}
+            out:fly={{ 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" sveltekit:noscroll sveltekit:prefetch>
+                        <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}
+        <div class="newsletter-form__message shadow-small"
+            class:is-error={formStatus !== 'PENDING'}
+            class:is-success={formStatus === 'PENDING'}
+            transition:fly={{ y: 8, easing: quartOut, duration: 600, delay: formStatus !== 'PENDING' ? 100 : 600 }}
+        >
+            <p class="text-xsmall">{formMessages[formStatus]}</p>
        </div>
-
-        <input type="text" name="email_address_check" value="" style="display: none;">
-        <input type="hidden" name="locale" value="en">
-        <input type="hidden" name="html_type" value="simple">
-    </form>
-
-    <div class="newsletter-form__bottom">
-        {#if past}
-            <a href="/subscribe" class="past-issues" sveltekit:noscroll sveltekit:prefetch>
-                <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>
+    {/if}
 </div>
--- a/src/components/organisms/NewsletterModule.svelte
+++ b/src/components/organisms/NewsletterModule.svelte
@@ -15,7 +15,7 @@
 <div class="newsletter newsletter--{theme} shadow-box-dark">
    <div class="newsletter__wrapper">
        <h3 class="title-medium">
-            <label for="SUB_EMAIL">{newsletter_subtitle}</label>
+            <label for="newsletter_email">{newsletter_subtitle}</label>
        </h3>
        <p class="text-small">{newsletter_text}</p>

--- a/src/components/organisms/PostersGrid.svelte
+++ b/src/components/organisms/PostersGrid.svelte
@@ -112,7 +112,7 @@
    </div>

    <div class="subscribe">
-        <label class="subscribe__text" for="SUB_EMAIL">Subscribe to be notified when new posters become available</label>
+        <label class="subscribe__text" for="newsletter_email">Subscribe to be notified when new posters become available</label>
        <EmailForm />
    </div>
 </section>
--- a/src/routes/api/newsletter.ts
+++ b/src/routes/api/newsletter.ts
@@ -0,0 +1,44 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+
+
+// Block GET requests
+export async function get({}: RequestEvent): Promise<RequestHandlerOutput> {
+    return {
+        status: 403,
+        body: 'nope!'
+    }
+}
+
+
+/**
+ * POST request
+ */
+export async function post ({ request }: RequestEvent): Promise<RequestHandlerOutput> {
+    const body = await request.text()
+
+    if (body) {
+        const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${import.meta.env.VITE_NEWSLETTER_LIST_ID}/contacts`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                api_key: import.meta.env.VITE_NEWSLETTER_API_TOKEN,
+                email_address: body,
+            })
+        })
+        const res = await req.json()
+
+        if (res && res.email_address && res.status === 'PENDING') {
+            return {
+                status: 200,
+                body: {
+                    code: 'PENDING'
+                },
+            }
+        }
+
+        return {
+            status: 403,
+            body: res.error,
+        }
+    }
+}
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -127,6 +127,18 @@
    }
 }

+// XSmall
+.text-xsmall {
+    font-size: rem(16px);
+    font-weight: 400;
+    line-height: 1.4;
+
+    @include bp (sm) {
+        font-size: rem(18px);
+        line-height: 1.5;
+    }
+}
+
 // Information
 .text-info {
    font-size: rem(14px);
--- a/src/style/molecules/_newsletter-form.scss
+++ b/src/style/molecules/_newsletter-form.scss
@@ -1,5 +1,7 @@
 // Email Form
 .newsletter-form {
+    position: relative;
+
    &__email {
        position: relative;
        width: 100%;
@@ -23,7 +25,7 @@
            font-size: rem(16px);
            font-family: $font-sans;
            font-weight: 300;
-            color: #333;
+            color: $color-tertiary;
            background: none;
            border: none;

@@ -99,4 +101,24 @@
            }
        }
    }
+
+    // Message
+    &__message {
+        padding: 24px;
+        text-align: center;
+        border-radius: 8px;
+
+        &.is-error {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            color: #fff;
+            background: $color-secondary;
+        }
+        &.is-success {
+            color: $color-text;
+            background: $color-tertiary;
+        }
+    }
 }
--- a/src/style/organisms/_newsletter.scss
+++ b/src/style/organisms/_newsletter.scss
@@ -46,6 +46,21 @@
        }
    }

+    // Form input
+    :global(.newsletter-form__email) {
+        :global(input) {
+            color: $color-text;
+        }
+        :global(input::placeholder) {
+            color: $color-gray;
+        }
+    }
+    // Form message
+    :global(.newsletter-form__message.is-success) {
+        color: #fff;
+        background: $color-primary-tertiary20;
+    }
+

    /*
    ** Variants
@@ -56,10 +71,6 @@

        :global(.newsletter-form__email) {
            background: $color-tertiary;
-
-            :global(input::placeholder) {
-                color: $color-gray;
-            }
        }
     }
    // Light
--- a/src/style/pages/_subscribe.scss
+++ b/src/style/pages/_subscribe.scss
@@ -13,11 +13,6 @@
                margin-bottom: 120px;
            }
        }
-        :global(.newsletter-form__email) {
-            :global(input) {
-                color: #fff;
-            }
-        }
        :global(.newsletter-form__bottom) {
            :global(p) {
                color: rgba($color-tertiary, 0.6);