optimise display of rewards verification requirements

app/src/component/customRewardCard/view.js

@@ -28,12 +28,15 @@ class CustomRewardCard extends React.PureComponent<Props> {
   }
 
   onClaimPress = () => {
-    const { canClaim, notify, submitRewardCode } = this.props;
+    const { canClaim, notify, showVerification, submitRewardCode } = this.props;
     const { rewardCode } = this.state;
 
     Keyboard.dismiss();
 
     if (!canClaim) {
+      if (showVerification) {
+        showVerification();
+      }
       notify({ message: 'Unfortunately, you are not eligible to claim this reward at this time.' });
       return;
     }

app/src/component/rewardCard/view.js

@@ -44,10 +44,14 @@ class RewardCard extends React.PureComponent<Props> {
       canClaim,
       claimReward,
       notify,
-      reward
+      reward,
+      showVerification
     } = this.props;
 
     if (!canClaim) {
+      if (showVerification) {
+        showVerification();
+      }
       notify({ message: 'Unfortunately, you are not eligible to claim this reward at this time.' });
       return;
     }

app/src/component/rewardSummary/view.js

@@ -44,6 +44,13 @@ class RewardSummary extends React.Component {
     });
   }
 
+  handleSummaryPressed = () => {
+    const { showVerification } = this.props;
+    if (showVerification) {
+      showVerification();
+    }
+  }
+
   render() {
     const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
 
@@ -59,7 +66,7 @@ class RewardSummary extends React.Component {
     }
 
     return (
-      <View style={rewardStyle.summaryContainer}>
+      <TouchableOpacity style={rewardStyle.summaryContainer} onPress={this.handleSummaryPressed}>
         <View style={rewardStyle.summaryRow}>
           <Icon name="award" size={36} color={Colors.White} />
           <Text style={rewardStyle.summaryText}>
@@ -67,7 +74,7 @@ class RewardSummary extends React.Component {
           </Text>
         </View>
         <Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
-      </View>
+      </TouchableOpacity>
     );
   }
 }

app/src/page/rewards/view.js

@@ -24,8 +24,11 @@ class RewardsPage extends React.PureComponent {
     isIdentityVerified: false,
     isRewardApproved: false,
     verifyRequestStarted: false,
+    revealVerification: false
   };
 
+  scrollView = null;
+
   componentDidMount() {
     const { fetchRewards, pushDrawerStack, navigation, user } = this.props;
 
@@ -73,7 +76,7 @@ class RewardsPage extends React.PureComponent {
           <Text style={rewardStyle.title}>Humans Only</Text>
           <Text style={rewardStyle.text}>Rewards are for human beings only. You'll have to prove you're one of us before you can claim any rewards.</Text>
           {!this.state.isEmailVerified && <EmailRewardSubcard />}
-          {!this.state.isIdentityVerified && <PhoneNumberRewardSubcard />}
+          {this.state.isEmailVerified && !this.state.isIdentityVerified && <PhoneNumberRewardSubcard />}
         </View>
       );
     }
@@ -115,10 +118,11 @@ class RewardsPage extends React.PureComponent {
     return (
       <View>
         {unclaimedRewards.map(reward => <RewardCard key={reward.reward_type}
+                                          showVerification={this.showVerification}
                                           canClaim={!isNotEligible}
                                           reward={reward}
                                           reward_type={reward.reward_type} />)}
-        <CustomRewardCard canClaim={!isNotEligible} />
+        <CustomRewardCard canClaim={!isNotEligible} showVerification={this.showVerification} />
       </View>
     );
   }
@@ -135,6 +139,14 @@ class RewardsPage extends React.PureComponent {
     }
   }
 
+  showVerification = () => {
+    this.setState({ revealVerification: true }, () => {
+      if (this.scrollView) {
+        this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
+      }
+    });
+  }
+
   render() {
     const { user, navigation } = this.props;
 
@@ -142,11 +154,12 @@ class RewardsPage extends React.PureComponent {
       <View style={rewardStyle.container}>
         <UriBar navigation={navigation} />
         <ScrollView
+          ref={ref => this.scrollView = ref}
           keyboardShouldPersistTaps={'handled'}
           style={rewardStyle.scrollContainer}
           contentContainerStyle={rewardStyle.scrollContentContainer}>
-          <RewardSummary navigation={navigation} />
+          <RewardSummary navigation={navigation} showVerification={this.showVerification} />
-          {this.renderVerification()}
+          {this.state.revealVerification && this.renderVerification()}
           {this.renderUnclaimedRewards()}
           {this.renderClaimedRewards()}
         </ScrollView>