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

// @flow
import React from 'react';
import RewardLink from 'component/rewardLink';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import Card from 'component/common/card';
import LbcMessage from 'component/common/lbc-message';

type Props = {
  invitees: ?Array<{
    email: string,
    invite_accepted: boolean,
    invite_reward_claimed: boolean,
    invite_reward_claimable: boolean,
  }>,
  referralReward: ?Reward,
};

class InviteList extends React.PureComponent<Props> {
  render() {
    const { invitees, referralReward } = this.props;

    if (!invitees || !invitees.length) {
      return null;
    }

    let rewardAmount = 0;
    let rewardHelp = __(
      "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@odysee.com' }
    );

    if (referralReward) {
      rewardAmount = referralReward.reward_amount;
      rewardHelp = referralReward.reward_description;
    }
    const showClaimable = invitees.some((invite) => invite.invite_reward_claimable && !invite.invite_reward_claimed);

    return (
      <Card
        title={<div className="table__header-text">{__('Invite History')}</div>}
        subtitle={
          <div className="table__header-text">
            <LbcMessage>{rewardHelp}</LbcMessage>
          </div>
        }
        titleActions={
          referralReward &&
          showClaimable && (
            <div className="card__actions--inline">
              <RewardLink
                button
                label={__(`Claim Your %reward_amount% Credit Invite Reward`, { reward_amount: rewardAmount })}
                claim_code={referralReward.claim_code}
              />
            </div>
          )
        }
        isBodyList
        body={
          <div className="table__wrapper">
            <table className="table section">
              <thead>
                <tr>
                  <th>{__('Invitee Email')}</th>
                  <th>{__('Invite Status')}</th>
                  <th>{__('Reward')}</th>
                </tr>
              </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>
        }
      />
    );
  }
}

export default InviteList;