2018-09-24 05:44:42 +02:00
|
|
|
// @flow
|
2017-12-21 22:08:54 +01:00
|
|
|
import React from 'react';
|
|
|
|
import RewardLink from 'component/rewardLink';
|
2019-03-05 05:46:57 +01:00
|
|
|
import Yrbl from 'component/yrbl';
|
2018-09-24 05:44:42 +02:00
|
|
|
import { rewards } from 'lbryinc';
|
2019-02-04 18:45:30 +01:00
|
|
|
import Icon from 'component/common/icon';
|
|
|
|
import * as ICONS from 'constants/icons';
|
2017-08-18 05:31:44 +02:00
|
|
|
|
2018-09-24 05:44:42 +02:00
|
|
|
type Props = {
|
|
|
|
invitees: ?Array<{
|
|
|
|
email: string,
|
|
|
|
invite_accepted: boolean,
|
|
|
|
invite_reward_claimed: boolean,
|
|
|
|
invite_reward_claimable: boolean,
|
|
|
|
}>,
|
2019-02-04 18:45:30 +01:00
|
|
|
referralReward: ?Reward,
|
2018-09-24 05:44:42 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
class InviteList extends React.PureComponent<Props> {
|
2017-08-18 05:31:44 +02:00
|
|
|
render() {
|
2019-02-04 18:45:30 +01:00
|
|
|
const { invitees, referralReward } = this.props;
|
2017-08-18 05:31:44 +02:00
|
|
|
|
|
|
|
if (!invitees) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-01-27 01:23:47 +01:00
|
|
|
if (!invitees.length) {
|
|
|
|
return (
|
|
|
|
<Yrbl
|
|
|
|
type="happy"
|
|
|
|
title={__('Power To The People')}
|
|
|
|
subtitle={__(
|
|
|
|
'LBRY is powered by the users. More users, more power… and with great power comes great responsibility.'
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-02-04 18:45:30 +01:00
|
|
|
let rewardAmount = 0;
|
|
|
|
let rewardHelp = __(
|
|
|
|
"Woah, you have a lot of friends! You've claimed the maximum amount of referral rewards. Check back soon to see if more are available!."
|
|
|
|
);
|
|
|
|
|
|
|
|
if (referralReward) {
|
|
|
|
rewardAmount = referralReward.reward_amount;
|
|
|
|
rewardHelp = referralReward.reward_description;
|
|
|
|
}
|
|
|
|
const showClaimable = invitees.some(
|
|
|
|
invite => invite.invite_reward_claimable && !invite.invite_reward_claimed
|
|
|
|
);
|
|
|
|
|
2017-08-18 05:31:44 +02:00
|
|
|
return (
|
2018-03-26 23:32:43 +02:00
|
|
|
<section className="card card--section">
|
2018-12-19 06:44:53 +01:00
|
|
|
<header className="card__header">
|
2019-02-04 18:45:30 +01:00
|
|
|
<h2 className="card__title card__title--flex-between">
|
|
|
|
{__('Invite History')}
|
2019-03-05 05:46:57 +01:00
|
|
|
{referralReward && showClaimable && (
|
|
|
|
<RewardLink
|
|
|
|
button
|
|
|
|
label={__(`Claim Your ${rewardAmount} LBC Invite Reward`)}
|
|
|
|
reward_type={rewards.TYPE_REFERRAL}
|
|
|
|
/>
|
|
|
|
)}
|
2019-02-04 18:45:30 +01:00
|
|
|
</h2>
|
2018-12-19 06:44:53 +01:00
|
|
|
</header>
|
|
|
|
|
2017-08-18 05:31:44 +02:00
|
|
|
<div className="card__content">
|
2019-02-13 17:27:20 +01:00
|
|
|
<table className="table table--invites">
|
2019-01-27 01:23:47 +01:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>{__('Invitee Email')}</th>
|
2019-02-04 18:45:30 +01:00
|
|
|
<th>{__('Invite Status')}</th>
|
|
|
|
<th>{__('Reward')}</th>
|
2019-01-27 01:23:47 +01:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{invitees.map(invitee => (
|
|
|
|
<tr key={invitee.email}>
|
|
|
|
<td>{invitee.email}</td>
|
2019-02-04 18:45:30 +01:00
|
|
|
<td>
|
|
|
|
<span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
|
2019-01-27 01:23:47 +01:00
|
|
|
</td>
|
2019-02-04 18:45:30 +01:00
|
|
|
<td>
|
|
|
|
{invitee.invite_reward_claimed && (
|
|
|
|
<React.Fragment>
|
|
|
|
<span>{__('Claimed')}</span>
|
|
|
|
<Icon icon={ICONS.COMPLETE} />
|
|
|
|
</React.Fragment>
|
2019-01-27 01:23:47 +01:00
|
|
|
)}
|
2019-02-04 18:45:30 +01:00
|
|
|
|
|
|
|
{!invitee.invite_reward_claimed &&
|
|
|
|
(invitee.invite_reward_claimable ? (
|
|
|
|
<span>{__('Claimable')}</span>
|
|
|
|
) : (
|
|
|
|
__('Unclaimable')
|
|
|
|
))}
|
2019-01-27 01:23:47 +01:00
|
|
|
</td>
|
2017-08-18 05:31:44 +02:00
|
|
|
</tr>
|
2019-01-27 01:23:47 +01:00
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2018-12-19 06:44:53 +01:00
|
|
|
|
2019-02-04 18:45:30 +01:00
|
|
|
<div className="help">{rewardHelp}</div>
|
2017-08-31 20:39:30 +02:00
|
|
|
</div>
|
2017-08-18 05:31:44 +02:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default InviteList;
|