Merge pull request #2256 from lbryio/invite-claims

feat: claim all possible invite rewards in one go

package.json

@@ -52,8 +52,8 @@
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#e94de324876185561b4f38b18fabb2aa58b8e3ed",
+    "lbry-redux": "lbryio/lbry-redux#973bbd780a774ba48f4e22861b6accb706cf3835",
-    "lbryinc": "lbryio/lbryinc#83c275da7a44f346ce9e796d06f30126f02b4c63",
+    "lbryinc": "lbryio/lbryinc#da78018f7253d5e73dbc86f2edae62d1ec173484",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/renderer/component/inviteList/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import { selectUserInvitees, selectUserInviteStatusIsPending } from 'lbryinc';
+import { selectReferralReward, selectUserInvitees, selectUserInviteStatusIsPending } from 'lbryinc';
 import InviteList from './view';
 
 const select = state => ({
   invitees: selectUserInvitees(state),
   isPending: selectUserInviteStatusIsPending(state),
+  referralReward: selectReferralReward(state),
 });
 
 const perform = () => ({});

src/renderer/component/inviteList/view.jsx

@@ -1,10 +1,11 @@
 // @flow
-import * as ICONS from 'constants/icons';
+import type { Reward } from 'types/reward';
 import React from 'react';
-import Icon from 'component/common/icon';
 import RewardLink from 'component/rewardLink';
 import Yrbl from 'component/common/yrbl';
 import { rewards } from 'lbryinc';
+import Icon from 'component/common/icon';
+import * as ICONS from 'constants/icons';
 
 type Props = {
   invitees: ?Array<{
@@ -13,11 +14,12 @@ type Props = {
     invite_reward_claimed: boolean,
     invite_reward_claimable: boolean,
   }>,
+  referralReward: ?Reward,
 };
 
 class InviteList extends React.PureComponent<Props> {
   render() {
-    const { invitees } = this.props;
+    const { invitees, referralReward } = this.props;
 
     if (!invitees) {
       return null;
@@ -35,50 +37,72 @@ class InviteList extends React.PureComponent<Props> {
       );
     }
 
+    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
+    );
+
     return (
       <section className="card card--section">
         <header className="card__header">
-          <h2 className="card__title">{__('Invite History')}</h2>
+          <h2 className="card__title card__title--flex-between">
+            {__('Invite History')}
+            {referralReward &&
+              showClaimable && (
+                <RewardLink
+                  button
+                  label={__(`Claim Your ${40 || rewardAmount} LBC Invite Reward`)}
+                  reward_type={rewards.TYPE_REFERRAL}
+                />
+              )}
+          </h2>
         </header>
 
         <div className="card__content">
-          <table className="table table--stretch">
+          <table className="table table--invites table--stretch">
             <thead>
               <tr>
                 <th>{__('Invitee Email')}</th>
-                <th className="text-center">{__('Invite Status')}</th>
+                <th>{__('Invite Status')}</th>
-                <th className="text-center">{__('Reward')}</th>
+                <th>{__('Reward')}</th>
               </tr>
             </thead>
             <tbody>
               {invitees.map(invitee => (
                 <tr key={invitee.email}>
                   <td>{invitee.email}</td>
-                  <td className="text-center">
+                  <td>
-                    {invitee.invite_accepted ? (
+                    <span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
-                      <Icon icon={ICONS.COMPLETED} />
-                    ) : (
-                      <span className="empty">{__('unused')}</span>
-                    )}
                   </td>
-                  <td className="text-center">
+                  <td>
-                    {invitee.invite_reward_claimed && <Icon icon={ICONS.COMPLETED} />}
+                    {invitee.invite_reward_claimed && (
-                    {!invitee.invite_reward_claimed && invitee.invite_reward_claimable ? (
+                      <React.Fragment>
-                      <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
+                        <span>{__('Claimed')}</span>
-                    ) : (
+                        <Icon icon={ICONS.COMPLETE} />
-                      <span className="empty">{__('unclaimable')}</span>
+                      </React.Fragment>
                     )}
+
+                    {!invitee.invite_reward_claimed &&
+                      (invitee.invite_reward_claimable ? (
+                        <span>{__('Claimable')}</span>
+                      ) : (
+                        __('Unclaimable')
+                      ))}
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
 
-          <div className="help">
+          <div className="help">{rewardHelp}</div>
-            {__(
-              'The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test.'
-            )}
-          </div>
         </div>
       </section>
     );

src/renderer/component/rewardLink/view.jsx

@@ -16,9 +16,7 @@ type Props = {
 
 const RewardLink = (props: Props) => {
   const { reward, claimReward, label, isPending, button } = props;
-
   return !reward ? null : (
-    <div className="reward-link">
     <Button
       button={button ? 'primary' : 'link'}
       disabled={isPending}
@@ -27,7 +25,6 @@ const RewardLink = (props: Props) => {
         claimReward(reward);
       }}
     />
-    </div>
   );
 };
 

src/renderer/page/subscriptions/view.jsx

@@ -43,6 +43,7 @@ export default class extends PureComponent<Props> {
       firstRunCompleted,
       doShowSuggestedSubs,
     } = this.props;
+
     doFetchMySubscriptions();
     doFetchRecommendedSubscriptions();
 

src/renderer/scss/component/_card.scss

@@ -209,4 +209,9 @@
   display: flex;
   @include between;
   align-items: center;
+
+  .btn {
+    font-size: 1.2rem; // Don't make buttons the size of the title
+    font-weight: 400;
+  }
 }

src/renderer/scss/component/_table.scss

@@ -140,3 +140,10 @@
     width: 25%;
   }
 }
+
+.table--invites {
+  svg {
+    margin-bottom: -2px;
+    margin-left: var(--spacing-vertical-small);
+  }
+}

yarn.lock

@@ -5679,17 +5679,17 @@ lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbry-redux@lbryio/lbry-redux#e94de324876185561b4f38b18fabb2aa58b8e3ed:
+lbry-redux@lbryio/lbry-redux#973bbd780a774ba48f4e22861b6accb706cf3835:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/e94de324876185561b4f38b18fabb2aa58b8e3ed"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/973bbd780a774ba48f4e22861b6accb706cf3835"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#83c275da7a44f346ce9e796d06f30126f02b4c63:
+lbryinc@lbryio/lbryinc#da78018f7253d5e73dbc86f2edae62d1ec173484:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/83c275da7a44f346ce9e796d06f30126f02b4c63"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/da78018f7253d5e73dbc86f2edae62d1ec173484"
   dependencies:
     lbry-redux lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404
     reselect "^3.0.0"