add support for custom reward codes

app/src/component/customRewardCard/index.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { doToast } from 'lbry-redux';
+import {
+  doClaimRewardType,
+  doClaimRewardClearError,
+  makeSelectClaimRewardError,
+  makeSelectIsRewardClaimPending,
+  rewards as REWARD_TYPES
+} from 'lbryinc';
+import CustomRewardCard from './view';
+
+const select = state => ({
+  rewardIsPending: makeSelectIsRewardClaimPending()(state, {
+    reward_type: REWARD_TYPES.TYPE_REWARD_CODE,
+  }),
+  error: makeSelectClaimRewardError()(state, { reward_type: REWARD_TYPES.TYPE_REWARD_CODE }),
+});
+
+const perform = dispatch => ({
+  claimReward: reward => dispatch(doClaimRewardType(reward.reward_type, true)),
+  clearError: reward => dispatch(doClaimRewardClearError(reward)),
+  notify: data => dispatch(doToast(data)),
+  submitRewardCode: code => dispatch(doClaimRewardType(REWARD_TYPES.TYPE_REWARD_CODE, { params: { code } }))
+});
+
+export default connect(select, perform)(CustomRewardCard);

app/src/component/customRewardCard/view.js

@@ -0,0 +1,83 @@
+// @flow
+import React from 'react';
+import { ActivityIndicator, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Colors from '../../styles/colors';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import Button from '../button';
+import Link from '../link';
+import rewardStyle from '../../styles/reward';
+
+class CustomRewardCard extends React.PureComponent<Props> {
+  state = {
+    claimStarted: false,
+    rewardCode: ''
+  };
+
+  componentWillReceiveProps(nextProps) {
+    const { error, rewardIsPending } = nextProps;
+    const { clearError, notify } = this.props;
+    if (this.state.claimStarted && !rewardIsPending) {
+      if (error && error.trim().length > 0) {
+        notify({ message: error });
+      } else {
+        notify({ message: 'Reward successfully claimed!' });
+        this.setState({ rewardCode: '' });
+      }
+      this.setState({ claimStarted: false });
+    }
+  }
+
+  onClaimPress = () => {
+    const { canClaim, notify, submitRewardCode } = this.props;
+    const { rewardCode } = this.state;
+
+    if (!canClaim) {
+      notify({ message: 'Unfortunately, you are not eligible to claim this reward at this time.' });
+      return;
+    }
+
+    if (!rewardCode || rewardCode.trim().length === 0) {
+      notify({ message: 'Please enter a reward code to claim.' });
+      return;
+    }
+
+    this.setState({ claimStarted: true }, () => {
+      submitRewardCode(rewardCode);
+    });
+  }
+
+  render() {
+    const { canClaim, rewardIsPending } = this.props;
+
+    return (
+      <View style={[rewardStyle.rewardCard, rewardStyle.row]} >
+        <View style={rewardStyle.leftCol}>
+          {rewardIsPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
+        </View>
+        <View style={rewardStyle.midCol}>
+          <Text style={rewardStyle.rewardTitle}>Custom Code</Text>
+          <Text style={rewardStyle.rewardDescription}>Are you a supermodel or rockstar that received a custom reward code? Claim it here.</Text>
+
+          <View>
+            <TextInput style={rewardStyle.customCodeInput}
+                       placeholder={"0123abc"}
+                       onChangeText={text => this.setState({ rewardCode: text })}
+                       value={this.state.rewardCode} />
+            <Button style={rewardStyle.redeemButton}
+                    text={"Redeem"}
+                    disabled={(!this.state.rewardCode || this.state.rewardCode.trim().length === 0 || rewardIsPending)}
+                    onPress={() => {
+                      if (!rewardIsPending) { this.onClaimPress(); }
+                    }} />
+          </View>
+        </View>
+        <View style={rewardStyle.rightCol}>
+          <Text style={rewardStyle.rewardAmount}>?</Text>
+          <Text style={rewardStyle.rewardCurrency}>LBC</Text>
+        </View>
+      </View>
+    );
+  }
+};
+
+export default CustomRewardCard;

app/src/page/rewards/view.js

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import Colors from '../../styles/colors';
 import Link from '../../component/link';
+import CustomRewardCard from '../../component/customRewardCard';
 import PhoneNumberRewardSubcard from '../../component/phoneNumberRewardSubcard';
 import EmailRewardSubcard from '../../component/emailRewardSubcard';
 import PageHeader from '../../component/pageHeader';
@@ -122,6 +123,7 @@ class RewardsPage extends React.PureComponent {
                                            canClaim={!isNotEligible}
                                            reward={reward}
                                            reward_type={reward.reward_type} />)}
+        <CustomRewardCard canClaim={!isNotEligible} />
       </View>
     );
   }

app/src/styles/reward.js

@@ -202,6 +202,17 @@ const rewardStyle = StyleSheet.create({
     paddingLeft: 4,
     paddingRight: 4,
     flex: 0.2
+  },
+  customCodeInput: {
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 16,
+    letterSpacing: 1.3,
+    marginTop: -8,
+    marginBottom: 4
+  },
+  redeemButton: {
+    alignSelf: 'flex-end',
+    backgroundColor: Colors.LbryGreen
   }
 });