<commit_before>import { c } from 'ttag';

import { Referral, ReferralState } from '@proton/shared/lib/interfaces';
import { Table, TableHeader, TableBody, TableRow } from '@proton/components';
import DateCell from './DateCell';
import ActivityCell from './ActivityCell';
import RewardCell from './RewardCell';
import UserCell from './UserCell';
import { Loader } from '../../../../components';

interface Props {
    loading: boolean;
    referrals: Referral[];
    hasReachedRewardLimit: boolean;
}

const RewardsTable = ({ loading, referrals, hasReachedRewardLimit }: Props) => {
    if (loading) {
        return <Loader />;
    }

    return (
        <>
            <Table>
                <TableHeader
                    cells={[c('Label').t`User`, c('Label').t`Date`, c('Label').t`Activity`, c('Label').t`Your reward`]}
                />
                {referrals.length > 0 && (
                    <TableBody loading={loading}>
                        {referrals.map((referral) => (
                            <TableRow
                                key={referral.ReferralID}
                                className={[ReferralState.REWARDED].includes(referral.State) ? 'text-bold' : ''}
                                cells={[
                                    <UserCell key={`${referral.ReferralID}-date`} referral={referral} />,
                                    <DateCell key={`${referral.ReferralID}-date`} referral={referral} />,
                                    <ActivityCell key={`${referral.ReferralID}-activity`} referral={referral} />,
                                    <RewardCell
                                        key={`${referral.ReferralID}-reward`}
                                        referral={referral}
                                        hasReachedRewardLimit={hasReachedRewardLimit}
                                    />,
                                ]}
                            />
                        ))}
                    </TableBody>
                )}
            </Table>
            {referrals.length === 0 && (
                <p className="color-weak">{c('info').t`Track your referral link activities here`}</p>
            )}
        </>
    );
};

export default RewardsTable;
<commit_msg>Add new section for referral program<commit_after>import { c } from 'ttag';

import { Referral, ReferralState } from '@proton/shared/lib/interfaces';
import { Table, TableHeader, TableBody, TableRow } from '@proton/components';
import DateCell from './DateCell';
import ActivityCell from './ActivityCell';
import RewardCell from './RewardCell';
import UserCell from './UserCell';
import { Loader } from '../../../../components';

interface Props {
    loading?: boolean;
    referrals: Referral[];
    hasReachedRewardLimit: boolean;
}

const RewardsTable = ({ loading, referrals, hasReachedRewardLimit }: Props) => {
    if (loading) {
        return <Loader />;
    }

    return (
        <>
            <Table>
                <TableHeader
                    cells={[c('Label').t`User`, c('Label').t`Date`, c('Label').t`Activity`, c('Label').t`Your reward`]}
                />
                {referrals.length > 0 && (
                    <TableBody loading={loading}>
                        {referrals.map((referral) => (
                            <TableRow
                                key={referral.ReferralID}
                                className={[ReferralState.REWARDED].includes(referral.State) ? 'text-bold' : ''}
                                cells={[
                                    <UserCell key={`${referral.ReferralID}-date`} referral={referral} />,
                                    <DateCell key={`${referral.ReferralID}-date`} referral={referral} />,
                                    <ActivityCell key={`${referral.ReferralID}-activity`} referral={referral} />,
                                    <RewardCell
                                        key={`${referral.ReferralID}-reward`}
                                        referral={referral}
                                        hasReachedRewardLimit={hasReachedRewardLimit}
                                    />,
                                ]}
                            />
                        ))}
                    </TableBody>
                )}
            </Table>
            {referrals.length === 0 && (
                <p className="color-weak">{c('info').t`Track your referral link activities here`}</p>
            )}
        </>
    );
};

export default RewardsTable;

{'fraction_non_alphanumeric': 0.13331873905429073, 'fraction_numerical': 0.0008756567425569177, 'mean_word_length': 1.3311224489795919, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7488779', 'n_tokens_mistral': 1189, 'n_tokens_neox': 1103, 'n_words': 203}