✨ feat(affiliate): Add Affiliate component with commission display and invite link functionality

2026-02-06 11:40:28 -05:00 · 2025-01-03 13:54:33 +07:00 · 2025-01-03 13:54:33 +07:00 · 4aea4e811f
commit 4aea4e811f
parent fb0c510b93
8 changed files with 134 additions and 121 deletions
--- a/apps/admin/config/constants.ts
+++ b/apps/admin/config/constants.ts
@ -4,10 +4,10 @@ import packageJSON from '../package.json';
 export const locales = packageJSON.i18n.outputLocales;
 export const defaultLocale = packageJSON.i18n.entry;

-export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || defaultLocale;
+export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') ?? defaultLocale;

-export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL');
-export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL');
+export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL') ?? process.env.NEXT_PUBLIC_SITE_URL;
+export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL') ?? process.env.NEXT_PUBLIC_API_URL;

 export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL');
 export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD');
--- a/apps/admin/services/admin/index.ts
+++ b/apps/admin/services/admin/index.ts
@ -1,5 +1,5 @@
 // @ts-ignore
-
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as announcement from './announcement';
--- a/apps/admin/utils/request.ts
+++ b/apps/admin/utils/request.ts
@ -1,7 +1,7 @@
 import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants';
 import { getTranslations } from '@/locales/utils';
 import { isBrowser } from '@workspace/ui/utils';
-import requset, { InternalAxiosRequestConfig } from 'axios';
+import axios, { InternalAxiosRequestConfig } from 'axios';
 import { toast } from 'sonner';
 import { getAuthorization, Logout } from './common';

@ -10,6 +10,7 @@ async function handleError(response: any) {
  if ([40002, 40003, 40004].includes(code)) return Logout();
  if (response?.config?.skipErrorHandler) return;
  if (!isBrowser()) return;
+
  const t = await getTranslations('common');
  const message =
    t(`request.${code}`) !== `request.${code}`
@ -19,21 +20,24 @@ async function handleError(response: any) {
  toast.error(message);
 }

-requset.defaults.baseURL = NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL;
-// axios.defaults.withCredentials = true;
-// axios.defaults.timeout = 10000;
+const requset = axios.create({
+  baseURL: NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL,
+  // timeout: 10000,
+  // withCredentials: true,
+});

 requset.interceptors.request.use(
  async (
    config: InternalAxiosRequestConfig & {
      Authorization?: string;
+      skipErrorHandler?: boolean;
    },
  ) => {
    const Authorization = getAuthorization(config.Authorization);
    if (Authorization) config.headers.Authorization = Authorization;
    return config;
  },
-  (error) => Promise.reject(error),
+  (error) => Promise.reject(new Error(error)),
 );

 requset.interceptors.response.use(
@ -47,7 +51,7 @@ requset.interceptors.response.use(
  },
  async (error) => {
    await handleError(error);
-    return Promise.reject(error);
+    return Promise.reject(new Error(error));
  },
 );

--- a/apps/user/app/(main)/(user)/affiliate/page.tsx
+++ b/apps/user/app/(main)/(user)/affiliate/page.tsx
@ -1,104 +1,5 @@
-'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 } from '@/services/user/user';
-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';
+import Affiliate from '@/components/affiliate';

 export default function Page() {
-  const t = useTranslations('affiliate');
-  const { user, common } = useGlobalStore();
-  const [sum, setSum] = useState<number>();
-
-  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={sum} />
-            </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 queryUserAffiliate({ ...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>
-  );
+  return <Affiliate />;
 }
--- a/apps/user/components/affiliate/index.tsx
+++ b/apps/user/components/affiliate/index.tsx
@ -0,0 +1,105 @@
+'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 } from '@/services/user/user';
+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>();
+
+  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={sum} />
+            </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 queryUserAffiliate({ ...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>
+  );
+}
--- a/apps/user/components/subscribe/recharge.tsx
+++ b/apps/user/components/subscribe/recharge.tsx
@ -23,7 +23,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';

-export default function Recharge(props: ButtonProps) {
+export default function Recharge(props: Readonly<ButtonProps>) {
  const t = useTranslations('subscribe');
  const { common } = useGlobalStore();
  const { currency } = common;
@ -38,6 +38,7 @@ export default function Recharge(props: ButtonProps) {
  });

  const { data: paymentMethods } = useQuery({
+    enabled: open,
    queryKey: ['getAvailablePaymentMethods'],
    queryFn: async () => {
      const { data } = await getAvailablePaymentMethods();
--- a/apps/user/config/constants.ts
+++ b/apps/user/config/constants.ts
@ -4,10 +4,10 @@ import packageJSON from '../package.json';
 export const locales = packageJSON.i18n.outputLocales;
 export const defaultLocale = packageJSON.i18n.entry;

-export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') || locales[0];
+export const NEXT_PUBLIC_DEFAULT_LANGUAGE = env('NEXT_PUBLIC_DEFAULT_LANGUAGE') ?? defaultLocale;

-export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL');
-export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL');
+export const NEXT_PUBLIC_SITE_URL = env('NEXT_PUBLIC_SITE_URL') ?? process.env.NEXT_PUBLIC_SITE_URL;
+export const NEXT_PUBLIC_API_URL = env('NEXT_PUBLIC_API_URL') ?? process.env.NEXT_PUBLIC_API_URL;

 export const NEXT_PUBLIC_DEFAULT_USER_EMAIL = env('NEXT_PUBLIC_DEFAULT_USER_EMAIL');
 export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD = env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD');
--- a/apps/user/utils/request.ts
+++ b/apps/user/utils/request.ts
@ -1,7 +1,7 @@
 import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants';
 import { getTranslations } from '@/locales/utils';
 import { isBrowser } from '@workspace/ui/utils';
-import requset, { InternalAxiosRequestConfig } from 'axios';
+import axios, { InternalAxiosRequestConfig } from 'axios';
 import { toast } from 'sonner';
 import { getAuthorization, Logout } from './common';

@ -20,9 +20,11 @@ async function handleError(response: any) {
  toast.error(message);
 }

-requset.defaults.baseURL = NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL;
-// axios.defaults.withCredentials = true;
-// axios.defaults.timeout = 10000;
+const requset = axios.create({
+  baseURL: NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL,
+  // timeout: 10000,
+  // withCredentials: true,
+});

 requset.interceptors.request.use(
  async (
@ -35,7 +37,7 @@ requset.interceptors.request.use(
    if (Authorization) config.headers.Authorization = Authorization;
    return config;
  },
-  (error) => Promise.reject(error),
+  (error) => Promise.reject(new Error(error)),
 );

 requset.interceptors.response.use(
@ -49,7 +51,7 @@ requset.interceptors.response.use(
  },
  async (error) => {
    await handleError(error);
-    return Promise.reject(error);
+    return Promise.reject(new Error(error));
  },
 );