src/page/invites/view.js

@@ -101,18 +101,26 @@ class InvitesPage extends React.PureComponent {
 
     if (prevPending && !isPending) {
       if (errorMessage && errorMessage.trim().length > 0) {
-        notify({ message: __(errorMessage), isError: true });
+        notify({ message: errorMessage, isError: true });
       } else {
-        notify({ message: __(`An invite was successfully sent to ${email}`) });
+        notify({ message: __(`${email} was invited to the LBRY party!`) });
         this.setState({ email: null });
       }
     }
   }
 
+  handleInviteLinkPress = () => {
+    const { notify } = this.props;
+    Clipboard.setString(this.state.inviteLink);
+    notify({
+      message: __('Invite link copied'),
+    });
+  };
+
   render() {
     const { fetchingInvitees, user, navigation, notify, isPending, invitees } = this.props;
     const { email, inviteLink } = this.state;
-    const hasInvitees = !fetchingInvitees && invitees && invitees.length > 0;
+    const hasInvitees = invitees && invitees.length > 0;
 
     return (
       <View style={invitesStyle.container}>
@@ -132,19 +140,10 @@ class InvitesPage extends React.PureComponent {
 
             <Text style={invitesStyle.subTitle}>{__('Your invite link')}</Text>
             <View style={invitesStyle.row}>
-              <Text selectable numberOfLines={1} style={invitesStyle.inviteLink}>
+              <Text selectable numberOfLines={1} style={invitesStyle.inviteLink} onPress={this.handleInviteLinkPress}>
                 {this.state.inviteLink}
               </Text>
-              <Button
-                icon={'clipboard'}
-                style={invitesStyle.button}
-                onPress={() => {
-                  Clipboard.setString(inviteLink);
-                  notify({
-                    message: __('Invite link copied'),
-                  });
-                }}
-              />
+              <Button icon={'clipboard'} style={invitesStyle.button} onPress={this.handleInviteLinkPress} />
             </View>
 
             <Text style={invitesStyle.customizeTitle}>{__('Customize invite link')}</Text>
@@ -166,7 +165,7 @@ class InvitesPage extends React.PureComponent {
               editable={!isPending}
               value={this.state.email}
               onChangeText={this.handleInviteEmailChange}
-              placeholder={__('myfriend@example.com')}
+              placeholder={__('imaginary@friend.com')}
               underlineColorAndroid={Colors.NextLbryGreen}
             />
             <View style={invitesStyle.rightRow}>
@@ -176,14 +175,18 @@ class InvitesPage extends React.PureComponent {
               <Button
                 disabled={!email || email.indexOf('@') === -1 || isPending}
                 style={invitesStyle.button}
-                text={'Invite'}
+                text={__('Invite')}
                 onPress={this.handleInvitePress}
               />
             </View>
           </View>
 
           <View style={[invitesStyle.card, invitesStyle.lastCard]}>
-            <Text style={invitesStyle.title}>{__('Invite History')}</Text>
+            <View style={invitesStyle.titleRow}>
+              <Text style={invitesStyle.titleCol}>{__('Invite History')}</Text>
+              {fetchingInvitees && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
+            </View>
+
             <Text style={invitesStyle.text}>
               {__(
                 'Earn 20 LBC for inviting a friend, an enemy, a frenemy, or an enefriend. Everyone needs content freedom.',
@@ -191,18 +194,13 @@ class InvitesPage extends React.PureComponent {
             </Text>
 
             <View style={invitesStyle.invitees}>
-              {fetchingInvitees && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
-
               {hasInvitees && (
                 <View style={invitesStyle.inviteesHeader}>
                   <Text style={invitesStyle.emailHeader} numberOfLines={1}>
-                    Email
-                  </Text>
-                  <Text style={invitesStyle.statusHeader} numberOfLines={1}>
-                    Status
+                    {__('Email')}
                   </Text>
                   <Text style={invitesStyle.rewardHeader} numberOfLines={1}>
-                    Reward
+                    {__('Reward')}
                   </Text>
                 </View>
               )}
@@ -212,9 +210,6 @@ class InvitesPage extends React.PureComponent {
                     <Text style={invitesStyle.inviteeEmail} numberOfLines={1}>
                       {invitee.email}
                     </Text>
-                    <Text style={invitesStyle.inviteStatus} numberOfLines={1}>
-                      {invitee.accepted ? __('Accepted') : __('Not Accepted')}
-                    </Text>
                     <Text style={invitesStyle.rewardStatus} numberOfLines={1}>
                       {invitee.invite_reward_claimed && __('Claimed')}
                       {!invitee.invite_reward_claimed &&

src/page/rewards/view.js

@@ -11,6 +11,10 @@ import RewardEnrolment from 'component/rewardEnrolment';
 import UriBar from 'component/uriBar';
 import rewardStyle from 'styles/reward';
 
+const FILTER_ALL = 'all';
+const FILTER_AVAILABLE = 'available';
+const FILTER_CLAIMED = 'claimed';
+
 class RewardsPage extends React.PureComponent {
   state = {
     isEmailVerified: false,
@@ -19,6 +23,7 @@ class RewardsPage extends React.PureComponent {
     verifyRequestStarted: false,
     revealVerification: true,
     firstRewardClaimed: false,
+    currentFilter: FILTER_AVAILABLE,
   };
 
   scrollView = null;
@@ -182,8 +187,13 @@ class RewardsPage extends React.PureComponent {
     });
   };
 
+  setFilter = filter => {
+    this.setState({ currentFilter: filter });
+  };
+
   render() {
     const { user, navigation } = this.props;
+    const { currentFilter } = this.state;
 
     return (
       <View style={rewardStyle.container}>
@@ -197,8 +207,29 @@ class RewardsPage extends React.PureComponent {
             style={rewardStyle.scrollContainer}
             contentContainerStyle={rewardStyle.scrollContentContainer}
           >
-            {this.renderUnclaimedRewards()}
-            {this.renderClaimedRewards()}
+            <View style={rewardStyle.filterHeader}>
+              <Link
+                style={[rewardStyle.filterLink, currentFilter === FILTER_ALL ? rewardStyle.activeFilterLink : null]}
+                text={__('All')}
+                onPress={() => this.setFilter(FILTER_ALL)}
+              />
+              <Link
+                style={[
+                  rewardStyle.filterLink,
+                  currentFilter === FILTER_AVAILABLE ? rewardStyle.activeFilterLink : null,
+                ]}
+                text={__('Available')}
+                onPress={() => this.setFilter(FILTER_AVAILABLE)}
+              />
+              <Link
+                style={[rewardStyle.filterLink, currentFilter === FILTER_CLAIMED ? rewardStyle.activeFilterLink : null]}
+                text={__('Claimed')}
+                onPress={() => this.setFilter(FILTER_CLAIMED)}
+              />
+            </View>
+
+            {(currentFilter === FILTER_AVAILABLE || currentFilter === FILTER_ALL) && this.renderUnclaimedRewards()}
+            {(currentFilter === FILTER_CLAIMED || currentFilter === FILTER_ALL) && this.renderClaimedRewards()}
           </ScrollView>
         )}
       </View>

src/styles/invites.js

@@ -30,6 +30,16 @@ const walletStyle = StyleSheet.create({
     fontSize: 20,
     marginBottom: 8,
   },
+  titleRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 8,
+    justifyContent: 'space-between',
+  },
+  titleCol: {
+    fontFamily: 'Inter-SemiBold',
+    fontSize: 20,
+  },
   text: {
     fontFamily: 'Inter-Regular',
     fontSize: 14,
@@ -63,13 +73,13 @@ const walletStyle = StyleSheet.create({
   },
   subTitle: {
     fontFamily: 'Inter-Regular',
-    fontSize: 16,
+    fontSize: 14,
     marginTop: 12,
-    marginBottom: 8,
+    marginBottom: 4,
   },
   customizeTitle: {
     fontFamily: 'Inter-Regular',
-    fontSize: 16,
+    fontSize: 14,
     marginTop: 12,
   },
   inviteLink: {
@@ -112,17 +122,12 @@ const walletStyle = StyleSheet.create({
   emailHeader: {
     fontFamily: 'Inter-SemiBold',
     fontSize: 14,
-    width: '50%',
-  },
-  statusHeader: {
-    fontFamily: 'Inter-SemiBold',
-    fontSize: 14,
-    width: '30%',
+    width: '65%',
   },
   rewardHeader: {
     fontFamily: 'Inter-SemiBold',
     fontSize: 14,
-    width: '20%',
+    width: '35%',
   },
   inviteeItem: {
     flex: 1,
@@ -133,17 +138,12 @@ const walletStyle = StyleSheet.create({
   inviteeEmail: {
     fontFamily: 'Inter-Regular',
     fontSize: 12,
-    width: '50%',
-  },
-  inviteStatus: {
-    fontFamily: 'Inter-Regular',
-    fontSize: 12,
-    width: '30%',
+    width: '65%',
   },
   rewardStatus: {
     fontFamily: 'Inter-Regular',
     fontSize: 12,
-    width: '20%',
+    width: '35%',
   },
 });
 

src/styles/reward.js

@@ -305,6 +305,23 @@ const rewardStyle = StyleSheet.create({
     fontSize: 12,
     lineHeight: 16,
   },
+  filterHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 16,
+    marginLeft: 16,
+    marginRight: 16,
+    padding: 16,
+    backgroundColor: Colors.White,
+  },
+  filterLink: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 14,
+    marginRight: 24,
+  },
+  activeFilterLink: {
+    fontFamily: 'Inter-SemiBold',
+  },
 });
 
 export default rewardStyle;