diff options
author | Leonid Logvinov <logvinov.leon@gmail.com> | 2019-01-09 19:02:25 +0800 |
---|---|---|
committer | Leonid Logvinov <logvinov.leon@gmail.com> | 2019-01-09 19:02:25 +0800 |
commit | ea14913b412e78ff458bdfba47182f7363e776e5 (patch) | |
tree | 3ee220bfbbd9923b5e1adc36ee51f9b5d39ad640 /packages/website/ts/components/newsletter_form.tsx | |
parent | 5868c91cfb54cfa9177572b201d88d1168bf5b06 (diff) | |
parent | 5dd55491b86bf8577405e37d0f2d668aa1273b10 (diff) | |
download | dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.gz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.bz2 dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.lz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.xz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.zst dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.zip |
Merge development
Diffstat (limited to 'packages/website/ts/components/newsletter_form.tsx')
-rw-r--r-- | packages/website/ts/components/newsletter_form.tsx | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx new file mode 100644 index 000000000..4a7abb7ec --- /dev/null +++ b/packages/website/ts/components/newsletter_form.tsx @@ -0,0 +1,202 @@ +import * as React from 'react'; +import styled, { withTheme } from 'styled-components'; + +import { ThemeValuesInterface } from 'ts/components/siteWrap'; +import { colors } from 'ts/style/colors'; +import { errorReporter } from 'ts/utils/error_reporter'; + +interface FormProps { + theme: ThemeValuesInterface; +} + +interface InputProps { + isSubmitted: boolean; + name: string; + type: string; + label: string; + textColor: string; + required?: boolean; +} + +interface ArrowProps { + isSubmitted: boolean; +} + +const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => { + const { name, label, type } = props; + const id = `input-${name}`; + + return ( + <InnerInputWrapper {...props}> + <label className="visuallyHidden" htmlFor={id}> + {label} + </label> + <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} /> + </InnerInputWrapper> + ); +}); + +class Form extends React.Component<FormProps> { + public emailInput = React.createRef<HTMLInputElement>(); + public state = { + isSubmitted: false, + }; + public render(): React.ReactNode { + const { isSubmitted } = this.state; + const { theme } = this.props; + + return ( + <StyledForm onSubmit={this._onSubmitAsync.bind(this)}> + <InputWrapper> + <Input + isSubmitted={isSubmitted} + name="email" + type="email" + label="Email Address" + ref={this.emailInput} + required={true} + textColor={theme.textColor} + /> + + <SubmitButton> + <Arrow + isSubmitted={isSubmitted} + width="22" + height="17" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" + fill="#CBCBCB" + /> + </Arrow> + </SubmitButton> + <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText> + </InputWrapper> + <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text> + </StyledForm> + ); + } + + private async _onSubmitAsync(e: React.FormEvent<HTMLFormElement>): Promise<void> { + e.preventDefault(); + + const email = this.emailInput.current.value; + const referrer = 'https://0x.org/'; + + this.setState({ isSubmitted: true }); + + if (email === 'triggererror@0xproject.org') { + throw new Error('Manually triggered error'); + } + + try { + await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { + method: 'post', + mode: 'cors', + headers: { + 'content-type': 'application/json; charset=utf-8', + }, + body: JSON.stringify({ email, referrer }), + }); + } catch (e) { + errorReporter.report(e); + } + } +} + +export const NewsletterForm = withTheme(Form); + +const StyledForm = styled.form` + appearance: none; + border: 0; + color: ${colors.white}; + padding: 13px 0 14px; + margin-top: 27px; +`; + +const StyledInput = + styled.input < + InputProps > + ` + appearance: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid #393939; + color: ${props => props.textColor || '#fff'}; + font-size: 1.294117647rem; + padding: 15px 0; + outline: none; + width: 100%; + + &::placeholder { + color: #B1B1B1; // #9D9D9D on light theme + } +`; + +const InputWrapper = styled.div` + position: relative; +`; + +const InnerInputWrapper = + styled.div < + ArrowProps > + ` + opacity: ${props => props.isSubmitted && 0}; + visibility: ${props => props.isSubmitted && 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.30s; +`; + +const SubmitButton = styled.button` + width: 44px; + height: 44px; + background-color: transparent; + border: 0; + position: absolute; + right: 0; + top: calc(50% - 22px); + overflow: hidden; + outline: 0; + + &:focus-within { + //background-color: #eee; + } +`; + +const Text = styled.p` + color: #656565; + font-size: 0.833333333rem; + font-weight: 300; + line-height: 1.2em; + margin-top: 15px; +`; + +const SuccessText = + styled.p < + ArrowProps > + ` + color: #B1B1B1; + font-size: 1rem; + font-weight: 300; + line-height: 1.2em; + padding-top: 25px; + position: absolute; + left: 0; + top: 0; + text-align: left; + right: 50px; + opacity: ${props => (props.isSubmitted ? 1 : 0)}; + visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.55s; +`; + +const Arrow = + styled.svg < + ArrowProps > + ` + transform: ${props => props.isSubmitted && `translateX(44px)`}; + transition: transform 0.25s ease-in-out; +`; |