aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-12-18 07:11:35 +0800
committerGitHub <noreply@github.com>2018-12-18 07:11:35 +0800
commit2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a (patch)
treec98a57c1e3269bc4ee05a053e5cb02be80883578 /packages/website
parent4e80c395b15fc1a9ee33eea8b476527dcba672c5 (diff)
parent2cc03216bd3642c9101c19f309895f0d3b13e82e (diff)
downloaddexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar.gz
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar.bz2
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar.lz
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar.xz
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.tar.zst
dexon-sol-tools-2593f1b8d7b4906e7ea18cee799dee7c6bc77a6a.zip
Merge pull request #1442 from 0xProject/feature/website/0x-org-analytics
[website] 0x.org: Allow manual triggering of error, and report newsletter errors to Rollbar
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/newsletter_form.tsx65
1 files changed, 50 insertions, 15 deletions
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index 6dc4bf678..eef496982 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -1,9 +1,9 @@
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
import { colors } from 'ts/style/colors';
-
-import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
+import { errorReporter } from 'ts/utils/error_reporter';
interface FormProps {
theme: ThemeValuesInterface;
@@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme
return (
<InnerInputWrapper {...props}>
- <label className="visuallyHidden" htmlFor={id}>{label}</label>
+ <label className="visuallyHidden" htmlFor={id}>
+ {label}
+ </label>
<StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} />
</InnerInputWrapper>
);
@@ -39,17 +41,34 @@ class Form extends React.Component<FormProps> {
isSubmitted: false,
};
public render(): React.ReactNode {
- const {isSubmitted} = this.state;
- const {theme} = this.props;
+ 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} />
+ <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
+ 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>
@@ -67,6 +86,10 @@ class Form extends React.Component<FormProps> {
this.setState({ isSubmitted: true });
+ if (email === 'triggererror@0xproject.org') {
+ throw new Error('Manually triggered error');
+ }
+
try {
const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', {
method: 'post',
@@ -77,7 +100,7 @@ class Form extends React.Component<FormProps> {
body: JSON.stringify({ email, referrer }),
});
} catch (e) {
- // dosomething
+ errorReporter.report(e);
}
}
}
@@ -92,7 +115,10 @@ const StyledForm = styled.form`
margin-top: 27px;
`;
-const StyledInput = styled.input<InputProps>`
+const StyledInput =
+ styled.input <
+ InputProps >
+ `
appearance: none;
background-color: transparent;
border: 0;
@@ -112,7 +138,10 @@ const InputWrapper = styled.div`
position: relative;
`;
-const InnerInputWrapper = styled.div<ArrowProps>`
+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;
@@ -143,7 +172,10 @@ const Text = styled.p`
margin-top: 15px;
`;
-const SuccessText = styled.p<ArrowProps>`
+const SuccessText =
+ styled.p <
+ ArrowProps >
+ `
color: #B1B1B1;
font-size: 1rem;
font-weight: 300;
@@ -154,13 +186,16 @@ const SuccessText = styled.p<ArrowProps>`
top: 0;
text-align: left;
right: 50px;
- opacity: ${props => props.isSubmitted ? 1 : 0};
- visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'};
+ 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>`
+const Arrow =
+ styled.svg <
+ ArrowProps >
+ `
transform: ${props => props.isSubmitted && `translateX(44px)`};
transition: transform 0.25s ease-in-out;
`;