✨ feat(affiliate): Update affiliate component to display total commis…

…sion and improve data fetching
perfect-panel · Jan 4, 2025 · cc834ca · cc834ca
1 parent 4aea4e8
commit cc834ca
Show file tree

Hide file tree

Showing 56 changed files with 335 additions and 114 deletions.
diff --git a/apps/admin/config/constants.ts b/apps/admin/config/constants.ts
@@ -4,10 +4,13 @@ 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') ?? process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE ?? defaultLocale;
 
 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');
+export const NEXT_PUBLIC_DEFAULT_USER_EMAIL =
+  env('NEXT_PUBLIC_DEFAULT_USER_EMAIL') ?? process.env.NEXT_PUBLIC_DEFAULT_USER_EMAIL;
+export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD =
+  env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD') ?? process.env.NEXT_PUBLIC_DEFAULT_USER_PASSWORD;
diff --git a/apps/admin/services/admin/typings.d.ts b/apps/admin/services/admin/typings.d.ts
@@ -172,7 +172,7 @@ declare namespace API {
     show: boolean;
     sell: boolean;
     deduction_ratio: number;
-    purchase_with_discount: boolean;
+    allow_deduction: boolean;
     reset_cycle: number;
     renewal_reset: boolean;
   };
@@ -548,6 +548,7 @@ declare namespace API {
     quantity: number;
     price: number;
     amount: number;
+    deduction: number;
     discount: number;
     coupon: string;
     coupon_discount: number;
@@ -556,8 +557,6 @@ declare namespace API {
     trade_no: string;
     status: number;
     subscribe_id: number;
-    subscription_discount_id: number;
-    subscription_discount_price: number;
     created_at: number;
     updated_at: number;
   };
@@ -570,6 +569,7 @@ declare namespace API {
     quantity: number;
     price: number;
     amount: number;
+    deduction: number;
     discount: number;
     coupon: string;
     coupon_discount: number;
@@ -579,8 +579,6 @@ declare namespace API {
     status: number;
     subscribe_id: number;
     subscribe: Subscribe;
-    subscription_discount_id: number;
-    subscription_discount_price: number;
     created_at: number;
     updated_at: number;
   };
@@ -747,7 +745,7 @@ declare namespace API {
     sell: boolean;
     sort: number;
     deduction_ratio: number;
-    purchase_with_discount: boolean;
+    allow_deduction: boolean;
     reset_cycle: number;
     renewal_reset: boolean;
     created_at: number;
@@ -975,7 +973,7 @@ declare namespace API {
     sell: boolean;
     sort: number;
     deduction_ratio: number;
-    purchase_with_discount: boolean;
+    allow_deduction: boolean;
     reset_cycle: number;
     renewal_reset: boolean;
   };
@@ -1010,6 +1008,8 @@ declare namespace API {
     email: string;
     avatar: string;
     balance: number;
+    commission: number;
+    deduction: number;
     telegram: number;
     refer_code: string;
     referer_id: number;

diff --git a/apps/admin/services/common/typings.d.ts b/apps/admin/services/common/typings.d.ts
@@ -165,6 +165,7 @@ declare namespace API {
     quantity: number;
     price: number;
     amount: number;
+    deduction: number;
     discount: number;
     coupon: string;
     coupon_discount: number;
@@ -173,8 +174,6 @@ declare namespace API {
     trade_no: string;
     status: number;
     subscribe_id: number;
-    subscription_discount_id: number;
-    subscription_discount_price: number;
     created_at: number;
     updated_at: number;
   };
@@ -187,6 +186,7 @@ declare namespace API {
     quantity: number;
     price: number;
     amount: number;
+    deduction: number;
     discount: number;
     coupon: string;
     coupon_discount: number;
@@ -196,8 +196,6 @@ declare namespace API {
     status: number;
     subscribe_id: number;
     subscribe: Subscribe;
-    subscription_discount_id: number;
-    subscription_discount_price: number;
     created_at: number;
     updated_at: number;
   };
@@ -333,7 +331,7 @@ declare namespace API {
     sell: boolean;
     sort: number;
     deduction_ratio: number;
-    purchase_with_discount: boolean;
+    allow_deduction: boolean;
     reset_cycle: number;
     renewal_reset: boolean;
     created_at: number;
@@ -416,6 +414,8 @@ declare namespace API {
     email: string;
     avatar: string;
     balance: number;
+    commission: number;
+    deduction: number;
     telegram: number;
     refer_code: string;
     referer_id: number;

diff --git a/apps/user/app/(main)/(user)/sidebar-right.tsx b/apps/user/app/(main)/(user)/sidebar-right.tsx
@@ -35,30 +35,48 @@ export function SidebarRight({ ...props }: React.ComponentProps<typeof Sidebar>)
           </CardContent>
         </Card>
         <Card>
-          <CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
-            <CardTitle className='text-sm font-medium'>{t('inviteCode')}</CardTitle>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <CopyToClipboard
-                    text={`${isBrowser() && location?.origin}/auth?invite=${user?.refer_code}`}
-                    onCopy={(text, result) => {
-                      if (result) {
-                        toast.success(t('copySuccess'));
-                      }
-                    }}
-                  >
-                    <Button variant='ghost' className='size-5 p-0'>
-                      <Icon icon='mdi:content-copy' className='text-primary text-2xl' />
-                    </Button>
-                  </CopyToClipboard>
-                </TooltipTrigger>
-                <TooltipContent>{t('copyInviteLink')}</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+          <CardHeader className='space-y-0 p-3 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('deductBalance')}</CardTitle>
+          </CardHeader>
+          <CardContent className='p-3 text-2xl font-bold'>
+            <Display type='currency' value={user?.deduction} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className='space-y-0 p-3 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('commission')}</CardTitle>
           </CardHeader>
-          <CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
+          <CardContent className='p-3 text-2xl font-bold'>
+            <Display type='currency' value={user?.commission} />
+          </CardContent>
         </Card>
+        {user?.refer_code && (
+          <Card>
+            <CardHeader className='flex flex-row items-center justify-between space-y-0 p-3 pb-2'>
+              <CardTitle className='text-sm font-medium'>{t('inviteCode')}</CardTitle>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <CopyToClipboard
+                      text={`${isBrowser() && location?.origin}/auth?invite=${user?.refer_code}`}
+                      onCopy={(text, result) => {
+                        if (result) {
+                          toast.success(t('copySuccess'));
+                        }
+                      }}
+                    >
+                      <Button variant='ghost' className='size-5 p-0'>
+                        <Icon icon='mdi:content-copy' className='text-primary text-2xl' />
+                      </Button>
+                    </CopyToClipboard>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('copyInviteLink')}</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </CardHeader>
+            <CardContent className='truncate p-3 font-bold'>{user?.refer_code}</CardContent>
+          </Card>
+        )}
       </SidebarContent>
     </Sidebar>
   );

diff --git a/apps/user/app/(main)/(user)/wallet/page.tsx b/apps/user/app/(main)/(user)/wallet/page.tsx
@@ -4,7 +4,7 @@ import { Display } from '@/components/display';
 import { ProList, ProListActions } from '@/components/pro-list';
 import useGlobalStore from '@/config/use-global';
 import { queryUserBalanceLog } from '@/services/user/user';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Card, CardContent } from '@workspace/ui/components/card';
 import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 
@@ -16,19 +16,48 @@ export default function Page() {
   const t = useTranslations('wallet');
   const { user } = useGlobalStore();
   const ref = useRef<ProListActions>(null);
-
+  const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.deduction || 0);
   return (
     <>
       <Card className='mb-4'>
-        <CardHeader>
-          <CardTitle className='font-medium'>{t('title')}</CardTitle>
-        </CardHeader>
-        <CardContent className='flex items-center justify-between'>
-          <div className='text-2xl font-bold'>
-            <Display type='currency' value={user?.balance} />
+        <CardContent className='p-6'>
+          <h2 className='text-foreground mb-4 text-2xl font-bold'>{t('totalAssets')}</h2>
+          <div className='mb-4'>
+            <div className='flex items-center justify-between'>
+              <div>
+                <p className='text-sm font-medium'>总资产</p>
+                <p className='text-3xl font-bold'>
+                  <Display type='currency' value={totalAssets} />
+                </p>
+              </div>
+              <Recharge />
+            </div>
           </div>
-          <div className='flex gap-2'>
-            <Recharge />
+          <div className='grid grid-cols-1 gap-6 md:grid-cols-3'>
+            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
+                {t('balance')}
+              </p>
+              <p className='text-secondary-foreground text-2xl font-bold'>
+                <Display type='currency' value={user?.balance} />
+              </p>
+            </div>
+            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
+                {t('deductBalance')}
+              </p>
+              <p className='text-secondary-foreground text-2xl font-bold'>
+                <Display type='currency' value={user?.deduction} />
+              </p>
+            </div>
+            <div className='bg-secondary rounded-lg p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
+              <p className='text-secondary-foreground text-sm font-medium opacity-80'>
+                {t('commission')}
+              </p>
+              <p className='text-secondary-foreground text-2xl font-bold'>
+                <Display type='currency' value={user?.commission} />
+              </p>
+            </div>
           </div>
         </CardContent>
       </Card>

diff --git a/apps/user/components/affiliate/index.tsx b/apps/user/components/affiliate/index.tsx
@@ -4,7 +4,8 @@ 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 { queryUserAffiliate, queryUserAffiliateList } from '@/services/user/user';
+import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Card,
@@ -24,6 +25,13 @@ 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'>
@@ -35,7 +43,7 @@ export default function Affiliate() {
         <CardContent>
           <div className='flex items-baseline gap-2'>
             <span className='text-3xl font-bold'>
-              <Display type='currency' value={sum} />
+              <Display type='currency' value={data?.total_commission} />
             </span>
             <span className='text-muted-foreground text-sm'>
               ({t('commissionRate')}: {common?.invite?.referral_percentage}%)
@@ -53,7 +61,7 @@ export default function Affiliate() {
               {user?.refer_code}
             </code>
             <CopyToClipboard
-              text={`${location.origin}/auth?invite=${user?.refer_code}`}
+              text={`${location?.origin}/auth?invite=${user?.refer_code}`}
               onCopy={(text, result) => {
                 if (result) {
                   toast.success(t('copySuccess'));
@@ -70,7 +78,7 @@ export default function Affiliate() {
       </Card>
       <ProList<API.UserAffiliate, Record<string, unknown>>
         request={async (pagination, filter) => {
-          const response = await queryUserAffiliate({ ...pagination, ...filter });
+          const response = await queryUserAffiliateList({ ...pagination, ...filter });
           setSum(response.data.data?.sum);
           return {
             list: response.data.data?.list || [],

diff --git a/apps/user/config/constants.ts b/apps/user/config/constants.ts
@@ -4,19 +4,28 @@ 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') ?? process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE ?? defaultLocale;
 
 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');
+export const NEXT_PUBLIC_DEFAULT_USER_EMAIL =
+  env('NEXT_PUBLIC_DEFAULT_USER_EMAIL') ?? process.env.NEXT_PUBLIC_DEFAULT_USER_EMAIL;
+export const NEXT_PUBLIC_DEFAULT_USER_PASSWORD =
+  env('NEXT_PUBLIC_DEFAULT_USER_PASSWORD') ?? process.env.NEXT_PUBLIC_DEFAULT_USER_PASSWORD;
 
-export const NEXT_PUBLIC_EMAIL = env('NEXT_PUBLIC_EMAIL');
+export const NEXT_PUBLIC_EMAIL = env('NEXT_PUBLIC_EMAIL') ?? process.env.NEXT_PUBLIC_EMAIL;
 
-export const NEXT_PUBLIC_TELEGRAM_LINK = env('NEXT_PUBLIC_TELEGRAM_LINK');
-export const NEXT_PUBLIC_DISCORD_LINK = env('NEXT_PUBLIC_DISCORD_LINK');
-export const NEXT_PUBLIC_GITHUB_LINK = env('NEXT_PUBLIC_GITHUB_LINK');
-export const NEXT_PUBLIC_LINKEDIN_LINK = env('NEXT_PUBLIC_LINKEDIN_LINK');
-export const NEXT_PUBLIC_TWITTER_LINK = env('NEXT_PUBLIC_TWITTER_LINK');
-export const NEXT_PUBLIC_INSTAGRAM_LINK = env('NEXT_PUBLIC_INSTAGRAM_LINK');
+export const NEXT_PUBLIC_TELEGRAM_LINK =
+  env('NEXT_PUBLIC_TELEGRAM_LINK') ?? process.env.NEXT_PUBLIC_TELEGRAM_LINK;
+export const NEXT_PUBLIC_DISCORD_LINK =
+  env('NEXT_PUBLIC_DISCORD_LINK') ?? process.env.NEXT_PUBLIC_DISCORD_LINK;
+export const NEXT_PUBLIC_GITHUB_LINK =
+  env('NEXT_PUBLIC_GITHUB_LINK') ?? process.env.NEXT_PUBLIC_GITHUB_LINK;
+export const NEXT_PUBLIC_LINKEDIN_LINK =
+  env('NEXT_PUBLIC_LINKEDIN_LINK') ?? process.env.NEXT_PUBLIC_LINKEDIN_LINK;
+export const NEXT_PUBLIC_TWITTER_LINK =
+  env('NEXT_PUBLIC_TWITTER_LINK') ?? process.env.NEXT_PUBLIC_TWITTER_LINK;
+export const NEXT_PUBLIC_INSTAGRAM_LINK =
+  env('NEXT_PUBLIC_INSTAGRAM_LINK') ?? process.env.NEXT_PUBLIC_INSTAGRAM_LINK;
diff --git a/apps/user/locales/cs-CZ/layout.json b/apps/user/locales/cs-CZ/layout.json
@@ -1,7 +1,9 @@
 {
   "accountBalance": "Zůstatek na účtu",
+  "commission": "Provize",
   "copyInviteLink": "Zkopírovat odkaz na pozvánku",
   "copySuccess": "Odkaz na pozvánku byl úspěšně zkopírován",
+  "deductBalance": "Odečíst zůstatek",
   "inviteCode": "pozvánkový kód",
   "recharge": "Dobít"
 }
diff --git a/apps/user/locales/cs-CZ/wallet.json b/apps/user/locales/cs-CZ/wallet.json
@@ -1,8 +1,10 @@
 {
   "amount": "Částka",
   "balance": "zůstatek",
+  "commission": "Provize",
   "createdAt": "čas",
-  "title": "Zůstatek na účtu",
+  "deductBalance": "Odečíst zůstatek",
+  "totalAssets": "Přehled aktiv",
   "type": {
     "0": "Typ",
     "1": "Dobití",

diff --git a/apps/user/locales/de-DE/layout.json b/apps/user/locales/de-DE/layout.json
@@ -1,7 +1,9 @@
 {
   "accountBalance": "Kontostand",
+  "commission": "Provision",
   "copyInviteLink": "Einladungslink kopieren",
   "copySuccess": "Einladungslink erfolgreich kopiert",
+  "deductBalance": "Guthaben abziehen",
   "inviteCode": "Einladungscode",
   "recharge": "Aufladen"
 }