88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
'use client';
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import { z } from 'zod';
|
|
import { ResponseSchema } from '../../utils/types';
|
|
import { CustomLink } from '../elements/customLink';
|
|
import ErrorComponent from '../elements/error';
|
|
import { HomeLink } from '../elements/homeLink';
|
|
import { SuccessComponent } from '../elements/success';
|
|
|
|
export const SubscribeForm = () => {
|
|
const [completed, setCompleted] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
const [error, setError] = useState(false);
|
|
const honeypotRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (honeypotRef.current) {
|
|
honeypotRef.current.style.display = 'none';
|
|
}
|
|
}, []);
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const data = new FormData(e.currentTarget);
|
|
|
|
if (data.get('name')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: data.get('email'),
|
|
}),
|
|
});
|
|
|
|
if (!response?.ok) {
|
|
throw new Error(`Invalid response: ${response.status}`);
|
|
}
|
|
|
|
const formResponse: z.infer<typeof ResponseSchema> =
|
|
await response.json();
|
|
|
|
setMessage(formResponse.message);
|
|
setCompleted(true);
|
|
} catch (error) {
|
|
console.log('Subscribe error', error);
|
|
setError(true);
|
|
}
|
|
}
|
|
|
|
if (error) {
|
|
return ErrorComponent();
|
|
}
|
|
|
|
if (completed) {
|
|
return SuccessComponent(message);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<form className="container" onSubmit={handleSubmit}>
|
|
<h1>Subscribe to newsletter</h1>
|
|
<div className="email block">
|
|
<label htmlFor="frm-email">Email</label>
|
|
<input
|
|
placeholder="example@email.com"
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<input type="text" name="name" ref={honeypotRef} />
|
|
<div className="button block">
|
|
<button type="submit">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
<HomeLink />
|
|
<CustomLink path={`/unsubscribe`} text="Unsubscribe" />
|
|
</div>
|
|
);
|
|
};
|