flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'fix/newsletterForm' into dev

Browse Source
This commit is contained in:
Félix Péault
2022-12-25 16:45:56 +01:00
parent e03f4321f2 c5803ae046
commit 88c849a69a
10 changed files with 78 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/molecules/EmailForm.svelte
View File

@@ -3,7 +3,6 @@
</style>
<script lang="ts">
import { enhance } from '$app/forms'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { sendEvent } from '$utils/analytics'
@@ -13,26 +12,44 @@
export let past: boolean = false
let inputInFocus = false
let formStatus: { error: string, success: boolean, message: string } = null
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
const handleForm = () => {
return async ({ result, update }) => {
formStatus = result.data
console.log(result.data)
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 (result.data.success) {
if (formStatus.success) {
sendEvent('newsletterSubscribe')
update()
} else {
// Hide message for errors
clearTimeout(formMessageTimeout)
@@ -44,8 +61,7 @@
<div class="newsletter-form">
{#if !isSuccess}
<form method="POST" action="?/subscribe"
use:enhance={handleForm}
<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}>
@@ -84,7 +100,7 @@
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">{formStatus.message}</p>
<p class="text-xsmall">{formMessages[formStatus.message]}</p>
</div>
{/if}
</div>

12
src/routes/(site)/[country]/[location]/+page.server.ts
View File

@@ -1,8 +1,7 @@
import { error } from '@sveltejs/kit'
import type { Actions, PageServerLoad } from './$types'
import type { PageServerLoad } from './$types'
import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
import { fetchAPI, photoFields } from '$utils/api'
import subscribe from '$utils/forms/subscribe'
/**
@@ -92,13 +91,4 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
} catch (err) {
throw error(500, err.message)
}
}
/**
* Form Data
*/
export const actions: Actions = {
// Form newsletter subscription
subscribe,
}

8
src/routes/(site)/locations/+page.server.ts
View File

@@ -1,8 +0,0 @@
import type { Actions } from './$types'
import subscribe from '$utils/forms/subscribe'
export const actions: Actions = {
// Form newsletter subscription
subscribe,
}

12
src/routes/(site)/photos/+page.server.ts
View File

@@ -1,8 +1,7 @@
import { error } from '@sveltejs/kit'
import type { Actions, PageServerLoad } from './$types'
import type { 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'
/**
@@ -89,13 +88,4 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => {
} catch (err) {
throw error(500, err.message)
}
}
/**
* Form Data
*/
export const actions: Actions = {
// Form newsletter subscription
subscribe,
}

12
src/routes/(site)/subscribe/+page.server.ts
View File

@@ -1,7 +1,6 @@
import { error } from '@sveltejs/kit'
import type { Actions, PageServerLoad } from './$types'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import subscribe from '$utils/forms/subscribe'
/**
@@ -40,13 +39,4 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
} catch (err) {
throw error(500, err.message)
}
}
/**
* Form Data
*/
export const actions: Actions = {
// Form newsletter subscription
subscribe,
}

12
src/routes/+page.server.ts
View File

@@ -1,8 +1,7 @@
import { error } from '@sveltejs/kit'
import type { Actions, PageServerLoad } from './$types'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { getRandomItems } from '$utils/functions'
import subscribe from '$utils/forms/subscribe'
/**
@@ -57,13 +56,4 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
} catch (err) {
throw error(500, err.message)
}
}
/**
* Form Data
*/
export const actions: Actions = {
// Form newsletter subscription
subscribe,
}

40
src/routes/api/newsletter/+server.ts Normal file
View File

@@ -0,0 +1,40 @@
import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
import type { RequestHandler } from './$types'
export const POST = (async ({ request, fetch }) => {
const data: { email: string } = await request.json()
const { email } = data
// No email
if (!email) {
return new Response(JSON.stringify({ message: 'NO_EMAIL' }), { status: 400 })
}
// Invalid email
if (!email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
return new Response(JSON.stringify({ message: 'INVALID_EMAIL' }), { status: 400 })
}
// 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()
console.log('server API response:', res)
// Other error
if (res && res.status !== 'PENDING') {
return new Response(JSON.stringify({ message: res.error.code }), { status: 400 })
}
return new Response(JSON.stringify({
success: true,
message: res.status,
}), {
status: 200
})
}) satisfies RequestHandler

49
src/utils/forms/subscribe.ts
View File

@@ -1,49 +0,0 @@
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],
}
}
}

2
svelte.config.js
View File

@@ -18,7 +18,7 @@ const config = {
kit: {
adapter: adapter({
edge: true
// edge: true
}),
alias: {
$components: 'src/components',

6
vercel.json
View File

@@ -8,7 +8,11 @@
{ "key": "X-XSS-Protection", "value": "1; mode=block" },
{ "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains; preload" },
{ "key": "Referrer-Policy", "value": "no-referrer-when-downgrade" },
{ "key": "Feature-Policy", "value": "geolocation 'self'" }
{ "key": "Feature-Policy", "value": "geolocation 'self'" },
{ "key": "Access-Control-Allow-Credentials", "value": "true" },
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
},
{