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} /> +