1import { css } from '@emotion/react';
2import { Button, shadows, theme } from '@expo/styleguide';
3import { borderRadius, spacing } from '@expo/styleguide-base';
4import { useState } from 'react';
5
6import { A, CALLOUT, FOOTNOTE } from '../Text';
7
8export const NewsletterSignUp = () => {
9  const [email, setEmail] = useState('');
10  const [userSignedUp, setUserSignedUp] = useState(false);
11
12  return (
13    <div css={wrapperStyle}>
14      <CALLOUT theme="secondary" weight="medium">
15        Sign up for developer updates
16      </CALLOUT>
17      <div css={inputWrapperStyle}>
18        <input
19          onChange={event => setEmail(event.target.value)}
20          value={email}
21          css={inputStyle}
22          type="email"
23          placeholder={userSignedUp ? 'Thank you for the sign up!' : '[email protected]'}
24          disabled={userSignedUp}
25        />
26        <Button
27          size="xs"
28          theme={userSignedUp ? 'quaternary' : 'secondary'}
29          css={sendButtonStyle}
30          disabled={userSignedUp || !email.length}
31          onClick={() => {
32            setEmail('');
33            setUserSignedUp(true);
34          }}>
35          {userSignedUp ? 'Done!' : 'Sign Up'}
36        </Button>
37      </div>
38      <FOOTNOTE theme="secondary">
39        Unsubscribe at any time. Read our{' '}
40        <A href="https://expo.dev/privacy" openInNewTab>
41          privacy policy
42        </A>
43        .
44      </FOOTNOTE>
45    </div>
46  );
47};
48
49const wrapperStyle = css({
50  flex: 1,
51  maxWidth: 400,
52});
53
54const inputWrapperStyle = css({
55  position: 'relative',
56});
57
58const buttonMinWidth = spacing[16] + spacing[1];
59
60const inputStyle = css({
61  display: 'block',
62  boxSizing: 'border-box',
63  boxShadow: shadows.xs,
64  border: `1px solid ${theme.border.default}`,
65  borderRadius: borderRadius.sm,
66  color: theme.text.default,
67  background: theme.background.default,
68  height: 48,
69  width: '100%',
70  margin: `${spacing[2.5]}px 0`,
71  padding: `0 ${buttonMinWidth + spacing[4]}px 0 ${spacing[4]}px`,
72  outline: 'none',
73
74  '::placeholder': {
75    opacity: 0.65,
76  },
77});
78
79const sendButtonStyle = css({
80  position: 'absolute',
81  outline: 'none',
82  right: 10,
83  top: 8,
84  minWidth: buttonMinWidth,
85});
86