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

182 lines
5.9 KiB
React
Raw Normal View History

// @flow
2019-11-22 22:13:00 +01:00
import * as PAGES from 'constants/pages';
import React, { PureComponent } 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';
import REWARD_TYPES from 'rewards';
2019-11-13 19:14:19 +01:00
import RewardAuthIntro from 'component/rewardAuthIntro';
2019-11-22 22:13:00 +01:00
import Card from 'component/common/card';
2019-12-19 18:33:33 +01:00
import I18nMessage from 'component/i18nMessage';
import { SITE_HELP_EMAIL, SITE_NAME } from 'config';
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() {
const { user, fetchUser, fetchRewards } = this.props;
const rewardsApproved = user && user.is_reward_approved;
fetchRewards();
if (!rewardsApproved) {
fetchUser();
}
2019-09-19 20:45:48 +02:00
}
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) {
2020-06-01 19:03:19 +02:00
return (
<div className="section">
<RewardAuthIntro />
</div>
);
}
2020-03-16 16:56:24 +01:00
return (
2020-03-16 16:56:24 +01:00
<Card
2020-06-01 19:03:19 +02:00
className="section"
2020-08-26 22:28:33 +02:00
title={__('Reward validation pending')}
2020-03-16 16:56:24 +01:00
body={
<React.Fragment>
<p>
2020-05-22 03:19:01 +02:00
{__(
'This account must undergo review before you can participate in the rewards program. Not all users and regions may qualify.'
)}{' '}
{__('This can take anywhere from a few hours to several days. Please be patient.')}
2020-03-16 16:56:24 +01:00
</p>
2020-03-16 16:56:24 +01:00
<p>
2020-05-22 03:19:01 +02:00
{__(
'We apologize for this inconvenience, but have added this additional step to prevent abuse. Users on VPN or shared connections will continue to see this message and are not eligible for Rewards.'
2020-05-22 03:19:01 +02:00
)}
</p>
<p>
<I18nMessage
tokens={{
rewards_faq: <Button button="link" label={__('Rewards FAQ')} href="https://lbry.com/faq/support" />,
help_email: SITE_HELP_EMAIL,
site_name: SITE_NAME,
2020-05-22 03:19:01 +02:00
}}
>
Please review the %rewards_faq% for eligibility, and send us an email to %help_email% if you continue
to see this message. You can continue to use %site_name% without this feature.
2020-05-22 03:19:01 +02:00
</I18nMessage>
{`${__('Enjoy all the awesome free content in the meantime!')}`}
2020-03-16 16:56:24 +01:00
</p>
</React.Fragment>
}
actions={
<div className="section__actions">
<Button navigate="/" button="primary" label="Return Home" />
<Button onClick={() => fetchUser()} button="link" label="Refresh" />
</div>
}
/>
);
}
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-12-19 18:33:33 +01:00
<h2 className="card__title card__title--deprecated">{__('Rewards Disabled')}</h2>
<p className="error__text">
2019-12-19 18:33:33 +01:00
<I18nMessage tokens={{ settings: <Button button="link" navigate="/$/settings" label="Settings" /> }}>
Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to
re-enable them.
</I18nMessage>
2019-07-21 23:31:22 +02:00
</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 (
2019-11-22 22:13:00 +01:00
<Card
2020-08-26 22:28:33 +02:00
title={__('No rewards available')}
2019-11-22 22:13:00 +01:00
subtitle={
claimed && claimed.length
? __(
"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.')
}
actions={<Button button="primary" navigate={`/$/${PAGES.DISCOVER}`} label={__('Go Home')} />}
/>
);
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,
})}
>
{rewards.map((reward) => (
2019-03-05 05:46:57 +01:00
<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()}
2020-06-01 19:03:19 +02:00
<div className="section">{this.renderUnclaimedRewards()}</div>
2020-09-02 22:08:37 +02:00
<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;