1import { css } from '@emotion/react';
2import { borderRadius, shadows, spacing, theme, typography } from '@expo/styleguide';
3import { useState } from 'react';
4
5import { Button } from '../Button';
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="mini"
28          theme={userSignedUp ? 'ghost' : '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  fontFamily: typography.fontFaces.regular,
62  display: 'block',
63  boxSizing: 'border-box',
64  boxShadow: shadows.input,
65  border: `1px solid ${theme.border.default}`,
66  borderRadius: borderRadius.small,
67  color: theme.text.default,
68  background: theme.background.default,
69  height: 48,
70  width: '100%',
71  margin: `${spacing[2.5]}px 0`,
72  padding: `0 ${buttonMinWidth + spacing[4]}px 0 ${spacing[4]}px`,
73  outline: 'none',
74
75  '::placeholder': {
76    opacity: 0.65,
77  },
78});
79
80const sendButtonStyle = css({
81  position: 'absolute',
82  outline: 'none',
83  right: 10,
84  top: 10,
85  minWidth: buttonMinWidth,
86});
87