-
Notifications
You must be signed in to change notification settings - Fork 1
/
newsletter-form.tsx
66 lines (57 loc) · 2.2 KB
/
newsletter-form.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { Icon } from '@sharingan/ui';
import { useState } from 'react';
import NewsletterAlert from '@/components/home/newsletter/newsletter-alert';
import useSubscribeToNewsletter from '@/graphql/newsletters/mutations/subscribe-newsletter';
import useBooleanState from '@/hooks/use-boolean-state';
import { REGEX_EMAIL } from '@/utils/constants';
const isEmailValid = (email: string) => REGEX_EMAIL.test(email);
const NewsletterForm = () => {
const [email, setEmail] = useState<string>('');
const [subscriptionState, setSubscriptionState] = useState<'success' | 'failure' | undefined>();
const [isAlertOpened, openAlert, closeAlert] = useBooleanState(false);
const [subscribe, { loading }] = useSubscribeToNewsletter();
const handleSubscribe = async () => {
if (!isEmailValid(email)) {
return;
}
await subscribe({
onCompleted: () => {
setSubscriptionState('success');
openAlert();
setEmail('');
},
onError: () => {
setSubscriptionState('failure');
openAlert();
},
variables: {
email,
},
});
};
return (
<div className="relative">
{isAlertOpened && <NewsletterAlert handleClose={closeAlert} state={subscriptionState ?? 'success'} />}
<input
className="block w-full px-5 py-6 text-base font-normal text-black placeholder-gray-600 bg-white border border-gray-300 rounded-xl focus:border-black focus:ring-1 focus:ring-black font-pj focus:outline-none"
disabled={loading}
name="email"
placeholder="Enter your email address"
required
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<div className="mt-4 sm:mt-0 sm:absolute sm:inset-y-0 sm:right-0 sm:flex sm:items-center sm:pr-3">
<button
onClick={handleSubscribe}
className="inline-flex items-center justify-center w-full px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-gray-900 border border-transparent sm:w-auto sm:py-3 hover:bg-opacity-90 rounded-xl"
>
{loading && <Icon.Spinner />}
Get updates
</button>
</div>
</div>
);
};
export default NewsletterForm;