lbry-desktop/ui/page/rewards/view.jsx

161 lines
5.1 KiB
React
Raw Normal View History

// @flow
2019-08-27 16:43:42 +02:00
import * as PAGES from 'constants/pages';
import React, { PureComponent, Fragment } 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';
2019-10-31 19:00:33 +01:00
import Card from 'component/common/card';
2018-03-26 23:32:43 +02:00
import classnames from 'classnames';
2018-09-26 02:12:07 +02:00
import { rewards as REWARD_TYPES } from 'lbryinc';
2017-05-26 10:53:32 +02:00
type Props = {
doAuth: () => void,
2019-09-19 20:45:48 +02:00
fetchRewards: () => void,
2019-10-14 22:18:16 +02:00
fetchUser: () => void,
fetching: boolean,
2018-07-11 04:54:50 +02:00
rewards: Array<Reward>,
claimed: Array<Reward>,
user: ?{
is_identity_verified: boolean,
is_reward_approved: boolean,
primary_email: string,
has_verified_email: boolean,
},
daemonSettings: {
share_usage_data: boolean,
},
};
class RewardsPage extends PureComponent<Props> {
2019-09-19 20:45:48 +02:00
componentDidMount() {
this.props.fetchRewards();
}
renderPageHeader() {
2019-10-14 22:18:16 +02:00
const { user, daemonSettings, fetchUser } = this.props;
2019-10-23 20:59:33 +02:00
const rewardsEnabled = IS_WEB || (daemonSettings && daemonSettings.share_usage_data);
2017-06-23 07:29:40 +02:00
2019-10-23 20:59:33 +02:00
if (user && !user.is_reward_approved && rewardsEnabled) {
if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
return (
2019-10-31 19:00:33 +01:00
<Card
title={__('Sign In To Unlock Rewards')}
subtitle={__(
'This is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.'
)}
actions={
2019-08-27 16:43:42 +02:00
<Button
2019-09-26 18:07:11 +02:00
navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.REWARDS}`}
2019-08-27 16:43:42 +02:00
button="primary"
label={__('Unlock Rewards')}
/>
2019-10-31 19:00:33 +01:00
}
/>
);
}
return (
2019-01-08 20:16:07 +01:00
<section className="card card--section">
2019-07-21 23:31:22 +02:00
<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>
2019-07-21 23:31:22 +02:00
<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.com.')} ${__(
'Please enjoy free content in the meantime!'
)}`}
</p>
2019-04-19 21:28:43 +02:00
<div className="card__actions">
2019-03-28 17:53:13 +01:00
<Button navigate="/" button="primary" label="Return Home" />
2019-10-14 22:18:16 +02:00
<Button onClick={() => fetchUser()} button="link" label="Refresh" />
2019-04-19 21:28:43 +02:00
</div>
2019-01-08 20:16:07 +01:00
</section>
);
}
return null;
}
renderCustomRewardCode() {
return (
<RewardTile
key={REWARD_TYPES.TYPE_GENERATED_CODE}
reward={{
reward_type: REWARD_TYPES.TYPE_GENERATED_CODE,
reward_title: __('Custom Code'),
2019-05-07 23:38:29 +02:00
reward_description: __('Are you a supermodel or rockstar that received a custom reward code? Claim it here.'),
}}
/>
);
}
renderUnclaimedRewards() {
2019-03-28 17:53:13 +01:00
const { fetching, rewards, user, daemonSettings, claimed } = this.props;
2019-09-26 18:07:11 +02:00
if (!IS_WEB && daemonSettings && !daemonSettings.share_usage_data) {
return (
<section className="card card--section">
2019-07-21 23:31:22 +02:00
<h2 className="card__title">{__('Disabled')}</h2>
<p className="card__subtitle">
{__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '}
<Button button="link" navigate="/$/settings" label="Settings" />
{__(', in order to re-enable them.')}
</p>
</section>
);
} else if (fetching) {
2019-07-21 23:31:22 +02:00
return <BusyIndicator message={__('Fetching rewards')} />;
2017-08-03 00:55:58 +02:00
} else if (user === null) {
return (
2019-07-21 23:31:22 +02:00
<p className="help">{__('This application is unable to earn rewards due to an authentication failure.')}</p>
2017-06-23 07:29:40 +02:00
);
} else if (!rewards || rewards.length <= 0) {
return (
<Fragment>
2019-01-08 20:16:07 +01:00
<section className="card card--section">
<h2 className="card__title">{__('No Rewards Available')}</h2>
2019-07-21 23:31:22 +02:00
<p>
{claimed && claimed.length
? __(
2019-05-07 23:38:29 +02:00
"You have claimed all available rewards! We're regularly adding more so be sure to check back later."
)
: __('There are no rewards available at this time, please check back later.')}
</p>
2019-01-08 20:16:07 +01:00
</section>
2019-06-17 22:32:38 +02:00
<div className="card__list">{this.renderCustomRewardCode()}</div>
</Fragment>
);
2017-06-23 07:29:40 +02:00
}
2018-03-26 23:32:43 +02:00
2019-05-07 23:38:29 +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
2019-06-17 22:32:38 +02:00
className={classnames('card__list', {
2018-03-26 23:32:43 +02:00
'card--disabled': isNotEligible,
})}
>
2019-03-05 05:46:57 +01:00
{rewards.map(reward => (
<RewardTile key={reward.claim_code} reward={reward} />
))}
{this.renderCustomRewardCode()}
</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;