Merge pull request #314 from lbryio/dismiss-reward-summary

dismiss button added to reward summary, and some style tweaks.

app/src/component/rewardSummary/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
 import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
 import RewardSummary from './view';
 
@@ -10,6 +11,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchRewards: () => dispatch(doRewardList()),
+  notify: data => dispatch(doNotify(data))
 });
 
 export default connect(select, perform)(RewardSummary);

app/src/component/rewardSummary/view.js

@@ -1,32 +1,54 @@
 import React from 'react';
-import { NativeModules, Text, TouchableOpacity } from 'react-native';
+import { AsyncStorage, NativeModules, Text, TouchableOpacity } from 'react-native';
+import Button from '../../component/button';
 import rewardStyle from '../../styles/reward';
 
 class RewardSummary extends React.Component {
+  static itemKey = 'rewardSummaryDismissed';
+
   state = {
-    actionsLeft: 0
+    actionsLeft: 0,
+    dismissed: false
   };
 
   componentDidMount() {
     this.props.fetchRewards();
 
-    const { user } = this.props;
-    let actionsLeft = 0;
-    if (!user || !user.has_verified_email) {
-      actionsLeft++;
-    }
+    AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
+      if ('true' === isDismissed) {
+        this.setState({ dismissed: true });
+      }
 
-    if (!user || !user.is_identity_verified) {
-      actionsLeft++;
-    }
+      const { user } = this.props;
+      let actionsLeft = 0;
+      if (!user || !user.has_verified_email) {
+        actionsLeft++;
+      }
 
-    this.setState({ actionsLeft });
+      if (!user || !user.is_identity_verified) {
+        actionsLeft++;
+      }
+
+      this.setState({ actionsLeft });
+    });
+  }
+
+  onDismissPressed = () => {
+    AsyncStorage.setItem(RewardSummary.itemKey, 'true');
+    this.setState({ dismissed: true });
+    this.props.notify({
+      message: 'You can always claim your rewards from the Rewards page.',
+      displayType: ['toast']
+    });
   }
 
   render() {
     const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
 
-    if ((user && user.is_reward_approved) || this.state.actionsLeft === 0 || unclaimedRewardAmount === 0) {
+    if (this.state.dismissed ||
+        (user && user.is_reward_approved) ||
+        this.state.actionsLeft === 0 ||
+        unclaimedRewardAmount === 0) {
       return null;
     }
 
@@ -37,6 +59,7 @@ class RewardSummary extends React.Component {
         <Text style={rewardStyle.summaryText}>
           You have {unclaimedRewardAmount} LBC in unclaimed rewards. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward. Tap here to continue.
         </Text>
+        <Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
       </TouchableOpacity>
     );
   }

app/src/styles/discover.js

@@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
   },
   fileItemMedia: {
     width: mediaWidth,
-    height: mediaHeight
+    height: mediaHeight,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   fileItemName: {
     fontFamily: 'Metropolis-Bold',

app/src/styles/fileItemMedia.js

@@ -1,4 +1,5 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
 
 const fileItemMediaStyle = StyleSheet.create({
   autothumb: {
@@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
   autothumbText: {
     fontFamily: 'Metropolis-SemiBold',
     textAlign: 'center',
-    color: '#ffffff',
+    color: Colors.White,
     fontSize: 40
   },
   autothumbPurple: {

app/src/styles/fileList.js

@@ -24,7 +24,8 @@ const fileListStyle = StyleSheet.create({
     width: thumbnailWidth,
     height: thumbnailHeight,
     marginRight: (screenWidthPixels <= 720) ? 10 : 12,
-    justifyContent: 'center'
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   title: {
     fontFamily: 'Metropolis-SemiBold',

app/src/styles/reward.js

@@ -155,13 +155,17 @@ const rewardStyle = StyleSheet.create({
   },
   summaryContainer: {
     backgroundColor: Colors.LbryGreen,
-    padding: 12
+    padding: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
   },
   summaryText: {
     color: Colors.White,
     fontFamily: 'Metropolis-Regular',
     fontSize: 14,
-    lineHeight: 22
+    lineHeight: 20,
+    flex: 0.7
   },
   phoneVerificationContainer: {
     paddingLeft: 4,
@@ -191,6 +195,13 @@ const rewardStyle = StyleSheet.create({
   },
   smsPermissionContainer: {
     marginBottom: 32
+  },
+  dismissButton: {
+    alignSelf: 'center',
+    backgroundColor: Colors.White,
+    paddingLeft: 4,
+    paddingRight: 4,
+    flex: 0.2
   }
 });