invites for all

ui/js/actions/user.js

@@ -187,7 +187,9 @@ export function doFetchInviteStatus() {
         dispatch({
           type: types.USER_INVITE_STATUS_FETCH_SUCCESS,
           data: {
-            invitesRemaining: status.invites_remaining,
+            invitesRemaining: status.invites_remaining
+              ? status.invites_remaining
+              : 0,
             invitees: status.invitees,
           },
         });

ui/js/component/inviteList/view.jsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { Icon } from "component/common";
+import RewardLink from "component/rewardLink";
+import rewards from "rewards.js";
 
 class InviteList extends React.PureComponent {
   render() {
@@ -38,11 +40,18 @@ class InviteList extends React.PureComponent {
                     <tr key={index}>
                       <td>{invitee.email}</td>
                       <td className="text-center">
-                        {invitee.invite_accepted && <Icon icon="icon-check" />}
+                        {invitee.invite_accepted
+                          ? <Icon icon="icon-check" />
+                          : <span className="empty">{__("unused")}</span>}
                       </td>
                       <td className="text-center">
-                        {invitee.invite_reward_claimed &&
+                        {invitee.invite_reward_claimed
-                          <Icon icon="icon-check" />}
+                          ? <Icon icon="icon-check" />
+                          : <RewardLink
+                              label={__("Claim")}
+                              button="text"
+                              reward_type={rewards.TYPE_FIRST_PUBLISH}
+                            />}
                       </td>
                     </tr>
                   );

ui/js/component/inviteNew/view.jsx

@@ -73,25 +73,20 @@ class InviteNew extends React.PureComponent {
             )}
           </h3>
         </div>
+        {/*
         <div className="card__content">
           {invitesRemaining > 0 &&
             <p>{__("You have %s invites remaining.", invitesRemaining)}</p>}
           {invitesRemaining <= 0 &&
-            <p>
+            <p className="empty">{__("You have no invites.")}</p>}
-              <span className="empty">
+        </div> */}
-                {__("You have no invites.", invitesRemaining)}
-              </span>
-            </p>}
-        </div>
-        {!inviteStatusIsPending &&
-          invitesRemaining > 0 &&
         <div className="card__content">
           <FormInviteNew
             errorMessage={errorMessage}
             inviteNew={inviteNew}
             isPending={isPending}
           />
-          </div>}
+        </div>
       </section>
     );
   }

ui/js/component/rewardLink/view.jsx

@@ -9,6 +9,7 @@ const RewardLink = props => {
     claimReward,
     clearError,
     errorMessage,
+    label,
     isPending,
   } = props;
 
@@ -17,7 +18,9 @@ const RewardLink = props => {
       <Link
         button={button ? button : "alt"}
         disabled={isPending}
-        label={isPending ? __("Claiming...") : __("Claim Reward")}
+        label={
+          isPending ? __("Claiming...") : label ? label : __("Claim Reward")
+        }
         onClick={() => {
           claimReward(reward);
         }}

ui/js/rewards.js

@@ -95,6 +95,7 @@ rewards.TYPE_FIRST_STREAM = "first_stream";
 rewards.TYPE_MANY_DOWNLOADS = "many_downloads";
 rewards.TYPE_FIRST_PUBLISH = "first_publish";
 rewards.TYPE_FEATURED_DOWNLOAD = "featured_download";
+rewards.TYPE_REFERRAL = "referral";
 
 rewards.claimReward = function(type) {
   function requestReward(resolve, reject, params) {

ui/js/selectors/search.js

@@ -61,6 +61,7 @@ export const selectWunderBarIcon = createSelector(selectCurrentPage, page => {
     case "invite":
       return "icon-envelope-open";
     case "address":
+    case "receive":
       return "icon-address-book";
     case "wallet":
     case "backup":