114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { Display } from '@/components/display';
|
|
import { Empty } from '@/components/empty';
|
|
import { ProList } from '@/components/pro-list';
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@workspace/ui/components/card';
|
|
import { formatDate } from '@workspace/ui/utils';
|
|
import { Copy } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function Affiliate() {
|
|
const t = useTranslations('affiliate');
|
|
const { user, common } = useGlobalStore();
|
|
const [sum, setSum] = useState<number>();
|
|
const { data } = useQuery({
|
|
queryKey: ['queryUserAffiliate'],
|
|
queryFn: async () => {
|
|
const response = await queryUserAffiliate();
|
|
return response.data.data;
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className='flex flex-col gap-4'>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('totalCommission')}</CardTitle>
|
|
<CardDescription>{t('commissionInfo')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='flex items-baseline gap-2'>
|
|
<span className='text-3xl font-bold'>
|
|
<Display type='currency' value={data?.total_commission} />
|
|
</span>
|
|
<span className='text-muted-foreground text-sm'>
|
|
({t('commissionRate')}: {common?.invite?.referral_percentage}%)
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className='flex flex-row items-center justify-between space-y-0'>
|
|
<CardTitle className='text-lg font-medium'>{t('inviteCode')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='flex items-center justify-between'>
|
|
<code className='bg-muted rounded px-2 py-1 text-2xl font-bold'>
|
|
{user?.refer_code}
|
|
</code>
|
|
<CopyToClipboard
|
|
text={`${location?.origin}/auth?invite=${user?.refer_code}`}
|
|
onCopy={(text, result) => {
|
|
if (result) {
|
|
toast.success(t('copySuccess'));
|
|
}
|
|
}}
|
|
>
|
|
<Button variant='secondary' size='sm' className='gap-2'>
|
|
<Copy className='h-4 w-4' />
|
|
{t('copyInviteLink')}
|
|
</Button>
|
|
</CopyToClipboard>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<ProList<API.UserAffiliate, Record<string, unknown>>
|
|
request={async (pagination, filter) => {
|
|
const response = await queryUserAffiliateList({ ...pagination, ...filter });
|
|
setSum(response.data.data?.sum);
|
|
return {
|
|
list: response.data.data?.list || [],
|
|
total: response.data.data?.total || 0,
|
|
};
|
|
}}
|
|
header={{
|
|
title: t('inviteRecords'),
|
|
}}
|
|
renderItem={(item) => {
|
|
return (
|
|
<Card className='overflow-hidden'>
|
|
<CardContent className='p-3 text-sm'>
|
|
<ul className='grid grid-cols-2 gap-3 *:flex *:flex-col'>
|
|
<li className='font-semibold'>
|
|
<span className='text-muted-foreground'>{t('userEmail')}</span>
|
|
<span>{item.email}</span>
|
|
</li>
|
|
<li className='font-semibold'>
|
|
<span className='text-muted-foreground'>{t('registrationTime')}</span>
|
|
<time>{formatDate(item.registered_at)}</time>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}}
|
|
empty={<Empty />}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|