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

138 lines
3.6 KiB
React
Raw Normal View History

2017-06-08 02:56:52 +02:00
import React from "react";
import { BusyMessage, CreditAmount, Icon } from "component/common";
import SubHeader from "component/subHeader";
2017-07-19 01:00:13 +02:00
import Link from "component/link";
2017-06-08 02:56:52 +02:00
import RewardLink from "component/rewardLink";
2017-05-26 10:53:32 +02:00
2017-06-08 02:56:52 +02:00
const RewardTile = props => {
const { reward } = props;
2017-05-26 10:53:32 +02:00
2017-06-08 02:56:52 +02:00
const claimed = !!reward.transaction_id;
2017-05-26 10:53:32 +02:00
return (
<section className="card">
<div className="card__inner">
<div className="card__title-primary">
<CreditAmount amount={reward.reward_amount} />
<h3>{reward.reward_title}</h3>
2017-05-26 10:53:32 +02:00
</div>
<div className="card__actions">
{claimed
2017-06-19 14:58:39 +02:00
? <span><Icon icon="icon-check" /> {__("Reward claimed.")}</span>
2017-06-08 02:56:52 +02:00
: <RewardLink reward_type={reward.reward_type} />}
2017-05-26 10:53:32 +02:00
</div>
<div className="card__content">{reward.reward_description}</div>
</div>
</section>
2017-06-08 02:56:52 +02:00
);
};
2017-05-26 10:53:32 +02:00
2017-06-23 07:29:40 +02:00
class RewardsPage extends React.PureComponent {
componentDidMount() {
this.fetchRewards(this.props);
}
2017-06-08 02:56:52 +02:00
2017-06-23 07:29:40 +02:00
componentWillReceiveProps(nextProps) {
this.fetchRewards(nextProps);
}
2017-05-26 10:53:32 +02:00
2017-06-23 07:29:40 +02:00
fetchRewards(props) {
const { fetching, rewards, fetchRewards } = props;
2017-07-16 18:29:46 +02:00
if (!fetching && (!rewards || !rewards.length)) {
fetchRewards();
}
2017-05-26 10:53:32 +02:00
}
2017-06-23 07:29:40 +02:00
render() {
const { doAuth, fetching, navigate, rewards, user } = this.props;
2017-06-23 07:29:40 +02:00
let content, cardHeader;
2017-06-23 07:29:40 +02:00
if (fetching) {
2017-07-16 18:29:46 +02:00
content = (
<div className="card__content">
<BusyMessage message={__("Fetching rewards")} />
</div>
);
2017-06-23 07:29:40 +02:00
} else if (rewards.length > 0) {
2017-07-16 18:29:46 +02:00
content = (
<div>
{rewards.map(reward =>
<RewardTile key={reward.reward_type} reward={reward} />
)}
</div>
2017-06-23 07:29:40 +02:00
);
} else {
2017-07-16 18:29:46 +02:00
content = (
<div className="card__content empty">
{__("Failed to load rewards.")}
</div>
);
2017-06-23 07:29:40 +02:00
}
if (user && !user.is_reward_approved) {
if (
!user.primary_email ||
!user.has_verified_email ||
!user.is_identity_verified
) {
cardHeader = (
<div>
<div className="card__content empty">
<p>
{__("Only verified accounts are eligible to earn rewards.")}
</p>
</div>
<div className="card__content">
<Link onClick={doAuth} button="primary" label="Become Verified" />
</div>
</div>
);
} else {
cardHeader = (
<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>
2017-07-25 00:59:26 +02:00
<p>
{__(
"We apologize for this inconvenience, but have added this additional step to prevent fraud."
)}
</p>
<p>
{__("You will receive an email when this process is complete.") +
" " +
__("Please enjoy free content in the meantime!")}
</p>
<p>
<Link
onClick={() => navigate("/discover")}
button="primary"
label="Return Home"
/>
</p>
</div>
);
}
2017-06-23 07:29:40 +02:00
}
return (
<main className="main--single-column">
<SubHeader />
{cardHeader && <section className="card">{cardHeader}</section>}
{content}
2017-06-23 07:29:40 +02:00
</main>
);
}
}
2017-05-26 10:53:32 +02:00
export default RewardsPage;