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

94 lines
2.8 KiB
React
Raw Normal View History

2018-09-24 05:44:42 +02:00
// @flow
import React from 'react';
import RewardLink from 'component/rewardLink';
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
2019-09-26 18:07:11 +02:00
if (!invitees || !invitees.length) {
2017-08-18 05:31:44 +02:00
return null;
}
2019-02-04 18:45:30 +01:00
let rewardAmount = 0;
let rewardHelp = __(
2020-01-16 21:11:16 +01:00
"Woah, you have a lot of friends! You've claimed the maximum amount of invite rewards. Email %email% if you'd like to be whitelisted for more invites.",
{ email: 'hello@lbry.com' }
2019-02-04 18:45:30 +01:00
);
if (referralReward) {
rewardAmount = referralReward.reward_amount;
rewardHelp = referralReward.reward_description;
}
2019-05-07 23:38:29 +02:00
const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
2019-02-04 18:45:30 +01:00
2017-08-18 05:31:44 +02:00
return (
2019-07-21 23:31:22 +02:00
<section className="card">
<div className="table__header">
2019-11-22 22:13:00 +01:00
<div className="table__header-text--between">
<div>
<h2 className="card__title">{__('Invite History')}</h2>
<p className="section__subtitle">{rewardHelp}</p>
</div>
2019-03-05 05:46:57 +01:00
{referralReward && showClaimable && (
<RewardLink
button
label={__(`Claim Your ${rewardAmount} LBC Invite Reward`)}
2020-04-02 21:09:35 +02:00
claim_code={referralReward.claim_code}
2019-03-05 05:46:57 +01:00
/>
)}
2019-11-22 22:13:00 +01:00
</div>
2019-07-21 23:31:22 +02:00
</div>
2019-02-04 18:45:30 +01:00
2019-12-18 06:27:08 +01:00
<div className="table__wrapper">
<table className="table section">
<thead>
<tr>
<th>{__('Invitee Email')}</th>
<th>{__('Invite Status')}</th>
<th>{__('Reward')}</th>
2019-07-21 23:31:22 +02:00
</tr>
2019-12-18 06:27:08 +01:00
</thead>
<tbody>
{invitees.map(invitee => (
<tr key={invitee.email}>
<td>{invitee.email}</td>
<td>
<span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
</td>
<td>
{invitee.invite_reward_claimed && (
<React.Fragment>
<span>{__('Claimed')}</span>
<Icon icon={ICONS.COMPLETE} />
</React.Fragment>
)}
{!invitee.invite_reward_claimed &&
(invitee.invite_reward_claimable ? <span>{__('Claimable')}</span> : __('Unclaimable'))}
</td>
</tr>
))}
</tbody>
</table>
</div>
2017-08-18 05:31:44 +02:00
</section>
);
}
}
export default InviteList;