From 8bbfd1007d98690d7121039877a9417819838ac0 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 11 Dec 2018 19:37:48 +0100
Subject: [PATCH] add support for custom reward codes

---
 app/src/component/customRewardCard/index.js | 26 +++++++
 app/src/component/customRewardCard/view.js  | 83 +++++++++++++++++++++
 app/src/page/rewards/view.js                |  2 +
 app/src/styles/reward.js                    | 11 +++
 4 files changed, 122 insertions(+)
 create mode 100644 app/src/component/customRewardCard/index.js
 create mode 100644 app/src/component/customRewardCard/view.js

diff --git a/app/src/component/customRewardCard/index.js b/app/src/component/customRewardCard/index.js
new file mode 100644
index 00000000..8e0cb3bd
--- /dev/null
+++ b/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);
diff --git a/app/src/component/customRewardCard/view.js b/app/src/component/customRewardCard/view.js
new file mode 100644
index 00000000..dda1c0a4
--- /dev/null
+++ b/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;
diff --git a/app/src/page/rewards/view.js b/app/src/page/rewards/view.js
index d57ff467..5ba6ca5a 100644
--- a/app/src/page/rewards/view.js
+++ b/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>
     );
   }
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index 51ec5206..6651ff01 100644
--- a/app/src/styles/reward.js
+++ b/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
   }
 });