lbry-desktop/ui/component/rewardTile/view.jsx

71 lines
2.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
import React from 'react';
2018-03-26 23:32:43 +02:00
import Icon from 'component/common/icon';
import RewardLink from 'component/rewardLink';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-09-26 18:07:11 +02:00
import Card from 'component/common/card';
import rewards from 'rewards';
import LbcMessage from 'component/common/lbc-message';
2018-03-26 23:32:43 +02:00
type Props = {
2018-09-26 02:12:07 +02:00
openRewardCodeModal: () => void,
2020-01-14 21:44:07 +01:00
openSetReferrerModal: () => void,
2018-03-26 23:32:43 +02:00
reward: {
id: string,
reward_title: string,
reward_amount: number,
reward_range?: string,
2018-03-26 23:32:43 +02:00
transaction_id: string,
created_at: string,
reward_description: string,
reward_type: string,
2020-03-26 20:14:22 +01:00
claim_code: string,
2018-03-26 23:32:43 +02:00
},
2020-01-14 21:44:07 +01:00
user: User,
2018-03-26 23:32:43 +02:00
};
2018-03-26 23:32:43 +02:00
const RewardTile = (props: Props) => {
2020-01-14 21:44:07 +01:00
const { reward, openRewardCodeModal, openSetReferrerModal, user } = props;
const referrerSet = user && user.invited_by_id;
const claimed = !!reward.transaction_id;
const customActionsRewards = [rewards.TYPE_REFERRAL, rewards.TYPE_REFEREE];
return (
2019-09-26 18:07:11 +02:00
<Card
title={reward.reward_title}
subtitle={<LbcMessage>{reward.reward_description}</LbcMessage>}
2019-09-26 18:07:11 +02:00
actions={
2020-09-01 21:21:01 +02:00
<div className="section__actions">
2019-09-26 18:07:11 +02:00
{reward.reward_type === rewards.TYPE_GENERATED_CODE && (
<Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
)}
{reward.reward_type === rewards.TYPE_REFERRAL && (
2020-06-20 11:23:50 +02:00
<Button button="primary" navigate="/$/invite" label={__('Go To Invites')} />
2020-01-14 21:44:07 +01:00
)}
{reward.reward_type === rewards.TYPE_REFEREE && (
<>
{referrerSet && <RewardLink button reward_type={reward.reward_type} />}
<Button
button={referrerSet ? 'link' : 'primary'}
onClick={openSetReferrerModal}
label={referrerSet ? __('Change Inviter') : __('Set Inviter')}
/>
</>
2020-01-06 23:53:27 +01:00
)}
{!customActionsRewards.some(i => i === reward.reward_type) &&
2019-09-26 18:07:11 +02:00
(claimed ? (
<span>
<Icon icon={ICONS.COMPLETED} /> {__('Reward claimed.')}
</span>
) : (
2020-03-26 20:14:22 +01:00
<RewardLink button claim_code={reward.claim_code} />
2019-09-26 18:07:11 +02:00
))}
</div>
}
/>
);
};
export default RewardTile;