diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte index ad713c6..180e2e4 100644 --- a/src/components/molecules/EmailForm.svelte +++ b/src/components/molecules/EmailForm.svelte @@ -3,6 +3,7 @@
- {#if formStatus !== 'PENDING'} -
\ No newline at end of file diff --git a/src/components/organisms/PostersGrid.svelte b/src/components/organisms/PostersGrid.svelte index ca07032..ceb986d 100644 --- a/src/components/organisms/PostersGrid.svelte +++ b/src/components/organisms/PostersGrid.svelte @@ -7,7 +7,6 @@ import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel' // Components import Poster from '$components/molecules/Poster.svelte' - import EmailForm from '$components/molecules/EmailForm.svelte' import { debounce } from '$utils/functions' export let posters: any = [] diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 2ce88a9..67c2b5d 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,8 +1,13 @@ import { error } from '@sveltejs/kit' -import type { PageServerLoad } from './$types' +import type { Actions, PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' import { getRandomItems } from '$utils/functions' +import subscribe from '$utils/forms/subscribe' + +/** + * Page Data + */ export const load: PageServerLoad = async ({ setHeaders }) => { try { // Get total of published photos @@ -52,4 +57,13 @@ export const load: PageServerLoad = async ({ setHeaders }) => { } catch (err) { throw error(500, err.message) } +} + + +/** + * Form Data + */ + export const actions: Actions = { + // Form newsletter subscription + subscribe, } \ No newline at end of file diff --git a/src/routes/[country]/[location]/+page.server.ts b/src/routes/[country]/[location]/+page.server.ts index 29069ee..2474079 100644 --- a/src/routes/[country]/[location]/+page.server.ts +++ b/src/routes/[country]/[location]/+page.server.ts @@ -1,9 +1,13 @@ import { error } from '@sveltejs/kit' -import type { PageServerLoad } from './$types' +import type { Actions, PageServerLoad } from './$types' import { PUBLIC_LIST_AMOUNT } from '$env/static/public' import { fetchAPI, photoFields } from '$utils/api' +import subscribe from '$utils/forms/subscribe' +/** + * Page Data + */ export const load: PageServerLoad = async ({ params, setHeaders }) => { try { const { location: slug } = params @@ -88,4 +92,13 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => { } catch (err) { throw error(500, err.message) } +} + + +/** + * Form Data + */ +export const actions: Actions = { + // Form newsletter subscription + subscribe, } \ No newline at end of file diff --git a/src/routes/api/newsletter/+server.ts b/src/routes/api/newsletter/+server.ts deleted file mode 100644 index c2e4151..0000000 --- a/src/routes/api/newsletter/+server.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { error } from '@sveltejs/kit' -import type { RequestHandler } from './$types' -import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private' - - -export const POST: RequestHandler = async ({ request }) => { - try { - const body = await request.text() - - if (body) { - const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - api_key: NEWSLETTER_API_TOKEN, - email_address: body, - }) - }) - const res = await req.json() - - if (res) { - return new Response(JSON.stringify({ - code: res.error ? res.error.code : res.status - })) - } - } - } catch (err) { - throw error(403, err.message) - } -} \ No newline at end of file diff --git a/src/routes/locations/+page.server.ts b/src/routes/locations/+page.server.ts new file mode 100644 index 0000000..f97107a --- /dev/null +++ b/src/routes/locations/+page.server.ts @@ -0,0 +1,8 @@ +import type { Actions } from './$types' +import subscribe from '$utils/forms/subscribe' + + +export const actions: Actions = { + // Form newsletter subscription + subscribe, +} \ No newline at end of file diff --git a/src/routes/photos/+page.server.ts b/src/routes/photos/+page.server.ts index 10f52a7..8ff1373 100644 --- a/src/routes/photos/+page.server.ts +++ b/src/routes/photos/+page.server.ts @@ -1,9 +1,13 @@ import { error } from '@sveltejs/kit' -import type { PageServerLoad } from './$types' +import type { Actions, PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public' +import subscribe from '$utils/forms/subscribe' +/** + * Page Data + */ export const load: PageServerLoad = async ({ url, setHeaders }) => { try { // Query parameters @@ -85,4 +89,13 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => { } catch (err) { throw error(500, err.message) } +} + + +/** + * Form Data + */ +export const actions: Actions = { + // Form newsletter subscription + subscribe, } \ No newline at end of file diff --git a/src/routes/subscribe/+page.server.ts b/src/routes/subscribe/+page.server.ts index 59fa6d1..5a4f168 100644 --- a/src/routes/subscribe/+page.server.ts +++ b/src/routes/subscribe/+page.server.ts @@ -1,7 +1,12 @@ import { error } from '@sveltejs/kit' -import type { PageServerLoad } from './$types' +import type { Actions, PageServerLoad } from './$types' import { fetchAPI } from '$utils/api' +import subscribe from '$utils/forms/subscribe' + +/** + * Page Data + */ export const load: PageServerLoad = async ({ setHeaders }) => { try { const res = await fetchAPI(`query { @@ -35,4 +40,13 @@ export const load: PageServerLoad = async ({ setHeaders }) => { } catch (err) { throw error(500, err.message) } +} + + +/** + * Form Data + */ +export const actions: Actions = { + // Form newsletter subscription + subscribe, } \ No newline at end of file diff --git a/src/utils/forms/subscribe.ts b/src/utils/forms/subscribe.ts new file mode 100644 index 0000000..424d7eb --- /dev/null +++ b/src/utils/forms/subscribe.ts @@ -0,0 +1,49 @@ +import { invalid } from '@sveltejs/kit' +import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private' + +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.`, +} + + +export default async ({ request }) => { + const formData = await request.formData() + const email = formData.get('email') + + // Newsletter API request + const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + api_key: NEWSLETTER_API_TOKEN, + email_address: email, + }) + }) + + const res = await req.json() + + if (res) { + if (res && res.status !== 'PENDING') { + // Invalid email + if (!email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { + return invalid(400, { + error: 'INVALID_EMAIL', + message () { return formMessages[this.error] } + }) + } + + // Other error + return invalid(400, { + error: res.error.code, + message: formMessages[res.error.code], + }) + } + + return { + success: true, + message: formMessages[res.status], + } + } +} \ No newline at end of file