lbry-desktop/src/renderer/page/rewards/view.jsx

161 lines
4.7 KiB
React
Raw Normal View History

// @flow
import React from 'react';
2018-03-26 23:32:43 +02:00
import BusyIndicator from 'component/common/busy-indicator';
import RewardListClaimed from 'component/rewardListClaimed';
import RewardTile from 'component/rewardTile';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import Page from 'component/page';
import classnames from 'classnames';
2017-05-26 10:53:32 +02:00
type Props = {
doAuth: () => void,
navigate: string => void,
fetching: boolean,
rewards: Array<{ reward_type: boolean }>,
user: ?{
is_identity_verified: boolean,
is_reward_approved: boolean,
primary_email: string,
has_verified_email: boolean,
},
daemonSettings: {
share_usage_data: boolean,
},
};
class RewardsPage extends React.PureComponent<Props> {
/*
Below is broken for users who have claimed all rewards.
2017-06-08 02:56:52 +02:00
It can safely be disabled since we fetch all rewards after authentication, but should be re-enabled once fixed.
2017-05-26 10:53:32 +02:00
*/
// componentDidMount() {
// this.fetchRewards(this.props);
// }
//
// componentWillReceiveProps(nextProps) {
// this.fetchRewards(nextProps);
// }
//
// fetchRewards(props) {
// const { fetching, rewards, fetchRewards } = props;
//
// if (!fetching && (!rewards || !rewards.length)) {
// fetchRewards();
// }
// }
2017-05-26 10:53:32 +02:00
renderPageHeader() {
const { doAuth, navigate, user, daemonSettings } = this.props;
2017-06-23 07:29:40 +02:00
2018-06-05 17:22:15 +02:00
if (user && !user.is_reward_approved && daemonSettings && daemonSettings.share_usage_data) {
if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
return (
2018-03-26 23:32:43 +02:00
<section className="card card--section">
<div className="card__title">{__('Humans Only')}</div>
<div className="card__subtitle">
<p>
{__('Rewards are for human beings only.')}{' '}
{__("You'll have to prove you're one of us before you can claim any rewards.")}
</p>
</div>
<div className="card__content">
2018-03-26 23:32:43 +02:00
<Button onClick={doAuth} button="primary" label="Prove Humanity" />
</div>
2017-08-21 05:38:34 +02:00
</section>
);
}
return (
<div className="card__content">
<p>
{__(
'This account must undergo review before you can participate in the rewards program.'
)}{' '}
{__('This can take anywhere from several minutes to several days.')}
</p>
<p>
{__(
'We apologize for this inconvenience, but have added this additional step to prevent fraud.'
)}
</p>
<p>
{`${__('If you continue to see this message, send us an email to help@lbry.io.')} ${__(
'Please enjoy free content in the meantime!'
)}`}
</p>
<p>
2018-03-26 23:32:43 +02:00
<Button onClick={() => navigate('/discover')} button="primary" label="Return Home" />
</p>
</div>
);
}
return null;
}
renderUnclaimedRewards() {
2018-03-16 22:05:24 +01:00
const { fetching, rewards, user, daemonSettings, navigate } = this.props;
2018-06-05 17:22:15 +02:00
if (daemonSettings && !daemonSettings.share_usage_data) {
return (
2018-03-30 02:48:06 +02:00
<div className="card card--section">
<div className="card__title">{__('Disabled')}</div>
<p>
{__(
2018-03-16 22:05:24 +01:00
'Rewards are currently disabled for your account. Turn on diagnostic data sharing, in'
)}{' '}
2018-03-30 02:48:06 +02:00
<Button button="link" onClick={() => navigate('/settings')} label="Settings" />
2018-03-16 22:05:24 +01:00
{__(', in order to re-enable them.')}
</p>
</div>
);
} else if (fetching) {
return (
<div className="card__content">
2018-03-26 23:32:43 +02:00
<BusyIndicator message={__('Fetching rewards')} />
</div>
);
2017-08-03 00:55:58 +02:00
} else if (user === null) {
return (
2018-03-26 23:32:43 +02:00
<div className="card__content">
<p>
{__('This application is unable to earn rewards due to an authentication failure.')}
</p>
2017-08-03 00:55:58 +02:00
</div>
2017-06-23 07:29:40 +02:00
);
} else if (!rewards || rewards.length <= 0) {
return (
2018-03-26 23:32:43 +02:00
<div className="card__content">
{__('There are no rewards available at this time, please check back later.')}
2017-08-26 05:21:26 +02:00
</div>
);
2017-06-23 07:29:40 +02:00
}
2018-03-26 23:32:43 +02:00
const isNotEligible =
!user || !user.primary_email || !user.has_verified_email || !user.is_reward_approved;
return (
2018-03-26 23:32:43 +02:00
<div
className={classnames('card__list--rewards', {
'card--disabled': isNotEligible,
})}
>
{rewards.map(reward => <RewardTile key={reward.reward_type} reward={reward} />)}
</div>
);
}
2017-06-23 07:29:40 +02:00
render() {
2017-06-23 07:29:40 +02:00
return (
2018-03-26 23:32:43 +02:00
<Page>
{this.renderPageHeader()}
{this.renderUnclaimedRewards()}
{<RewardListClaimed />}
2018-03-26 23:32:43 +02:00
</Page>
2017-06-23 07:29:40 +02:00
);
}
}
2017-05-26 10:53:32 +02:00
export default RewardsPage;