lbry-desktop/ui/component/inviteNew/view.jsx

104 lines
2.6 KiB
React
Raw Normal View History

// @flow
import React from 'react';
2018-04-10 22:58:34 +02:00
import Button from 'component/button';
2019-06-17 22:32:38 +02:00
import { Form, FormField } from 'component/common/form';
2019-02-20 17:18:59 +01:00
import CopyableText from 'component/copyableText';
2019-09-26 18:07:11 +02:00
import Card from 'component/common/card';
2017-08-18 05:31:44 +02:00
type FormProps = {
inviteNew: string => void,
errorMessage: ?string,
isPending: boolean,
};
type FormState = {
email: string,
};
class FormInviteNew extends React.PureComponent<FormProps, FormState> {
2018-03-26 23:32:43 +02:00
constructor() {
super();
2017-08-18 05:31:44 +02:00
this.state = {
email: '',
2017-08-18 05:31:44 +02:00
};
2018-03-26 23:32:43 +02:00
(this: any).handleSubmit = this.handleSubmit.bind(this);
2017-08-18 05:31:44 +02:00
}
handleEmailChanged(event) {
this.setState({
email: event.target.value,
});
}
handleSubmit() {
const { email } = this.state;
this.props.inviteNew(email);
2017-08-18 05:31:44 +02:00
}
render() {
const { errorMessage, isPending } = this.props;
2017-08-18 05:31:44 +02:00
return (
2018-03-26 23:32:43 +02:00
<Form onSubmit={this.handleSubmit}>
2019-02-13 17:27:20 +01:00
<FormField
2019-03-20 22:43:00 +01:00
type="text"
label="Email"
placeholder="youremail@example.org"
name="email"
2019-02-13 17:27:20 +01:00
value={this.state.email}
error={errorMessage}
2019-07-21 23:31:22 +02:00
inputButton={
<Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
}
2019-02-13 17:27:20 +01:00
onChange={event => {
this.handleEmailChanged(event);
}}
/>
</Form>
2017-08-18 05:31:44 +02:00
);
}
}
type Props = {
errorMessage: ?string,
inviteNew: string => void,
isPending: boolean,
rewardAmount: number,
2019-02-20 17:18:59 +01:00
referralLink: string,
};
class InviteNew extends React.PureComponent<Props> {
2017-08-18 05:31:44 +02:00
render() {
2019-02-20 17:18:59 +01:00
const { errorMessage, inviteNew, isPending, rewardAmount, referralLink } = this.props;
2017-08-18 05:31:44 +02:00
return (
2019-09-26 18:07:11 +02:00
<Card
title={__('Invite a Friend')}
subtitle={__('When your friends start using LBRY, the network gets stronger!')}
actions={
2019-09-26 18:07:11 +02:00
<React.Fragment>
<FormInviteNew
errorMessage={errorMessage}
inviteNew={inviteNew}
isPending={isPending}
rewardAmount={rewardAmount}
/>
<CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
2019-07-21 23:31:22 +02:00
2019-09-26 18:07:11 +02:00
<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>
}
/>
2017-08-18 05:31:44 +02:00
);
}
}
export default InviteNew;