lbry-desktop/ui/modal/modalSetReferrer/view.jsx
2020-01-15 12:55:44 -05:00

81 lines
2.3 KiB
JavaScript

// @flow
import * as React from 'react';
import { FormField, Form } from 'component/common/form';
import { Modal } from 'modal/modal';
import Button from 'component/button';
import HelpLink from 'component/common/help-link';
import Card from 'component/common/card';
type Props = {
closeModal: () => void,
error: ?string,
rewardIsPending: boolean,
setReferrer: (string, boolean) => void,
referrerSetPending: boolean,
referrerSetError?: string,
};
type State = {
referrer: string,
};
class ModalSetReferrer extends React.PureComponent<Props, State> {
constructor() {
super();
this.state = {
referrer: '',
};
(this: any).handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit() {
const { referrer } = this.state;
const { setReferrer } = this.props;
setReferrer(referrer, true);
}
render() {
const { closeModal, rewardIsPending } = this.props;
const { referrer } = this.state;
return (
<Modal isOpen contentLabel={__('Enter Invitee')} type="card" onAborted={closeModal}>
<Card
title={__('Enter Invitee')}
subtitle={
<React.Fragment>
{__('Did someone invite you to use lbry.tv? Tell us who and you both get a reward!')}
<HelpLink href="https://lbry.com/faq/referrals" />
</React.Fragment>
}
actions={
<React.Fragment>
<Form onSubmit={this.handleSubmit}>
<FormField
autoFocus
type="text"
name="referrer-code"
inputButton={
<Button button="primary" type="submit" disabled={!referrer || rewardIsPending} label={__('Set')} />
}
label={__('Code or channel')}
placeholder="0123abc"
value={referrer}
onChange={e => this.setState({ referrer: e.target.value })}
/>
</Form>
<div className="card__actions">
<Button button="primary" label={__('Done')} onClick={closeModal} />
<Button button="link" label={__('Close')} onClick={closeModal} />
</div>
</React.Fragment>
}
/>
</Modal>
);
}
}
export default ModalSetReferrer;