93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import lbryio from "lbryio";
|
|
import { BusyMessage, CreditAmount, Icon } from "component/common";
|
|
import SubHeader from "component/subHeader";
|
|
import Auth from "component/auth";
|
|
import Link from "component/link";
|
|
import RewardLink from "component/rewardLink";
|
|
|
|
const RewardTile = props => {
|
|
const { reward } = props;
|
|
|
|
const claimed = !!reward.transaction_id;
|
|
|
|
return (
|
|
<section className="card">
|
|
<div className="card__inner">
|
|
<div className="card__title-primary">
|
|
<CreditAmount amount={reward.reward_amount} />
|
|
<h3>{reward.reward_title}</h3>
|
|
</div>
|
|
<div className="card__actions">
|
|
{claimed
|
|
? <span><Icon icon="icon-check" /> Reward claimed.</span>
|
|
: <RewardLink reward_type={reward.reward_type} />}
|
|
</div>
|
|
<div className="card__content">{reward.reward_description}</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const RewardsPage = props => {
|
|
const {
|
|
fetching,
|
|
isEligible,
|
|
isVerificationCandidate,
|
|
hasEmail,
|
|
rewards,
|
|
} = props;
|
|
|
|
let content,
|
|
isCard = false;
|
|
|
|
if (!hasEmail || isVerificationCandidate) {
|
|
content = (
|
|
<div>
|
|
<p>
|
|
{__(
|
|
"Additional information is required to be eligible for the rewards program."
|
|
)}
|
|
</p>
|
|
<Auth />
|
|
</div>
|
|
);
|
|
isCard = true;
|
|
} else if (!isEligible) {
|
|
isCard = true;
|
|
content = (
|
|
<div className="empty">
|
|
<p>{__("You are not eligible to claim rewards.")}</p>
|
|
<p>
|
|
To become eligible, email
|
|
{" "}<Link href="mailto:help@lbry.io" label="help@lbry.io" /> with a
|
|
link to a public social media profile.
|
|
</p>
|
|
</div>
|
|
);
|
|
} else if (fetching) {
|
|
content = <BusyMessage message="Fetching rewards" />;
|
|
} else if (rewards.length > 0) {
|
|
content = rewards.map(reward =>
|
|
<RewardTile key={reward.reward_type} reward={reward} />
|
|
);
|
|
} else {
|
|
content = <div className="empty">{__("Failed to load rewards.")}</div>;
|
|
}
|
|
|
|
return (
|
|
<main className="main--single-column">
|
|
<SubHeader />
|
|
{isCard
|
|
? <section className="card">
|
|
<div className="card__content">
|
|
{content}
|
|
</div>
|
|
</section>
|
|
: content}
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default RewardsPage;
|