From 8bbfd1007d98690d7121039877a9417819838ac0 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Tue, 11 Dec 2018 19:37:48 +0100 Subject: [PATCH 1/2] 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 { + 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 ( + + + {rewardIsPending && } + + + Custom Code + Are you a supermodel or rockstar that received a custom reward code? Claim it here. + + + this.setState({ rewardCode: text })} + value={this.state.rewardCode} /> +