103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import Button from 'component/button';
|
|
import { Form, FormField } from 'component/common/form';
|
|
import CopyableText from 'component/copyableText';
|
|
import Card from 'component/common/card';
|
|
|
|
type FormProps = {
|
|
inviteNew: string => void,
|
|
errorMessage: ?string,
|
|
isPending: boolean,
|
|
};
|
|
|
|
type FormState = {
|
|
email: string,
|
|
};
|
|
|
|
class FormInviteNew extends React.PureComponent<FormProps, FormState> {
|
|
constructor() {
|
|
super();
|
|
|
|
this.state = {
|
|
email: '',
|
|
};
|
|
|
|
(this: any).handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
handleEmailChanged(event) {
|
|
this.setState({
|
|
email: event.target.value,
|
|
});
|
|
}
|
|
|
|
handleSubmit() {
|
|
const { email } = this.state;
|
|
this.props.inviteNew(email);
|
|
}
|
|
|
|
render() {
|
|
const { errorMessage, isPending } = this.props;
|
|
|
|
return (
|
|
<Form onSubmit={this.handleSubmit}>
|
|
<FormField
|
|
type="text"
|
|
label="Email"
|
|
placeholder="youremail@example.org"
|
|
name="email"
|
|
value={this.state.email}
|
|
error={errorMessage}
|
|
inputButton={
|
|
<Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
|
|
}
|
|
onChange={event => {
|
|
this.handleEmailChanged(event);
|
|
}}
|
|
/>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
type Props = {
|
|
errorMessage: ?string,
|
|
inviteNew: string => void,
|
|
isPending: boolean,
|
|
rewardAmount: number,
|
|
referralLink: string,
|
|
};
|
|
|
|
class InviteNew extends React.PureComponent<Props> {
|
|
render() {
|
|
const { errorMessage, inviteNew, isPending, rewardAmount, referralLink } = this.props;
|
|
|
|
return (
|
|
<Card
|
|
title={__('Invite a Friend')}
|
|
subtitle={__('When your friends start using LBRY, the network gets stronger!')}
|
|
actions={
|
|
<React.Fragment>
|
|
<FormInviteNew
|
|
errorMessage={errorMessage}
|
|
inviteNew={inviteNew}
|
|
isPending={isPending}
|
|
rewardAmount={rewardAmount}
|
|
/>
|
|
<CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
|
|
|
|
<p className="help">
|
|
{__('Earn')} <Button button="link" navigate="/$/rewards" label={__('rewards')} />{' '}
|
|
{__('for inviting your friends.')} {__('Read our')}{' '}
|
|
<Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />{' '}
|
|
{__('to learn more about referrals')}.
|
|
</p>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default InviteNew;
|