panel-web/apps/user/components/affiliate/index.tsx

'use client';

import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
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 } 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;
    },
  });

  const { data: inviteList = [] } = useQuery({
    queryKey: ['queryUserAffiliateList'],
    queryFn: async () => {
      const response = await queryUserAffiliateList({
        page: 1,
        size: 3,
      });
      return response.data.data?.list || [];
    },
  });

  return (
    <div className='grid grid-cols-2 gap-4'>
      <Card
        className={
          'rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
        }
      >
        <CardContent className={'p-0 text-[#666]'}>
          <div className={'mb-6'}>
            <div className={'text-xl font-bold'}>{t('totalCommission')}</div>
            <div className={'text-[15px] font-light'}>佣金金额，邀请成功后自动转入钱包余额</div>
          </div>
          <div className={'text-[32px] font-bold text-[#091B33]'}>历史推荐用户：7</div>
          <div className={'grid grid-cols-2 gap-5'}>
            <div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
              <p className='mb-3 text-sm font-medium text-[#666] opacity-80'>佣金总额</p>
              <p className='text-2xl font-bold text-[#225BA9]'>
                <Display type='currency' value={data?.total_commission} />
              </p>
            </div>
            <div className='rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
              <p className='mb-3 flex justify-between text-sm font-medium text-[#666] opacity-80'>
                <span>返佣邀请码</span>
              </p>
              <p className='flex justify-between text-2xl font-bold text-[#225BA9]'>
                <span> {user?.refer_code}</span>
                <CopyToClipboard
                  text={`${location?.origin}/?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' />
                  </Button>
                </CopyToClipboard>
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card className='rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6'>
        <div className='mb-4 flex items-center justify-between'>
          <h3 className='text-xl font-medium text-[#666666]'>邀请记录</h3>
          <span className='text-sm text-[#225BA9]'>更多</span>
        </div>

        <div className='space-y-4'>
          {inviteList?.length ? (
            <div className='relative space-y-3'>
              <div
                className={
                  'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'
                }
              ></div>
              {inviteList?.map((invite) => {
                return (
                  <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2'>
                    <div>
                      <div className={'text-[#225BA9]'}>用户识别代码</div>
                      <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>
                    </div>
                    <div>
                      <div className={'text-[#225BA9]'}>时间</div>
                      <div className={'font-bold text-[#091B33]'}>
                        {formatDate(invite.registered_at)}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <Empty />
          )}
        </div>
      </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('userIdentifier')}</span>
                    <span>{item.identifier}</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>
  );
}