add referrals levels

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.34.0",
+	"version": "0.35.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/[locale]/pages/marking-document/page.tsx

@@ -1,49 +1,29 @@
-import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
 import FilesTable from '@/app/ui/dashboard/files-table';
-import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/UploadSectionFile';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
-import { StackedBarChart } from '@/app/components/StackedBarChart';
 import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
 import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
-
-const data = [
-	{
-		name: 'File A',
-		checks: 4,
-		violations: 2
-	},
-	{
-		name: 'File B',
-		checks: 8,
-		violations: 4
-	},
-	{
-		name: 'File C',
-		checks: 2,
-		violations: 1
-	},
-	{
-		name: 'File D',
-		checks: 7,
-		violations: 1
-	},
-	{
-		name: 'File E',
-		checks: 5,
-		violations: 4
-	},
-	{
-		name: 'File F',
-		checks: 5,
-		violations: 3
-	}
-];
+import { fetchReferralUserStats } from '@/app/actions/referralsActions';
+import { getQueryClient } from '@/app/providers/getQueryClient';
 
 export default async function Page() {
 	const FILE_TYPE = "document";
 	const { file_extension, max_file_size } = await getAllowedFilesExtensions(FILE_TYPE);
 
+	const queryClient = getQueryClient();
+
+	try {
+		const data = await queryClient.fetchQuery({
+			queryKey: ['referralUserStats'],
+			queryFn: fetchReferralUserStats,
+		});
+		if (data?.referralLink) {
+			return null;
+		}
+	} catch (error) {
+		console.error('Ошибка загрузки статистики рефералов:', error);
+	}
+
 	return (
 		<div>
 			<PageTitleColorFrame
@@ -51,14 +31,12 @@ export default async function Page() {
 				description="multi-layered-protection-for-your-audios"
 			/>
 			<ProtectionStatistic fileType={FILE_TYPE} />
-{/* 			<div className="split-blocks">
-				<ProtectionSummary fileType={FILE_TYPE} />
-				<div className="protection-overview">
-					<StackedBarChart data={data} />
-				</div>
-			</div> */}
-			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
+			<UploadSectionFile
+				fileType={FILE_TYPE}
+				allowedExtensions={file_extension}
+				maxFileSize={max_file_size}
+			/>
 			<FilesTable fileType={FILE_TYPE} />
 		</div>
-	)
+	);
 }

src/app/actions/referralsActions.ts

@@ -27,7 +27,10 @@ export async function fetchReferralsLevels() {
 			let parsed = await response.json();
 
 			if (parsed.message_code === 0) {
-				return parsed.message_body.length ? parsed.message_body : parsed;
+				return {
+					referrals: parsed.message_body,
+					error: null
+				}
 			} else {
 				throw parsed;
 			}
@@ -37,6 +40,7 @@ export async function fetchReferralsLevels() {
 
 	} catch (error) {
 		return {
+			referrals: [],
 			error: error
 		}
 	}

src/app/ui/navigation/nav-link-dropdown.tsx

@@ -5,7 +5,9 @@ import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useSideMenuStore } from '@/app/stores/sideMenuStore';
 
-export default function DropDownList() {
+export default function DropDownList(
+	{ referralLink }: { referralLink: string | null }
+) {
 	const pathname = usePathname().replace('/en/', '/').replace('/ru/', '/');
 	const [dropDownExpanded, setDropDownExpanded] = useState(false);
 	const t = useTranslations('Global');
@@ -17,19 +19,19 @@ export default function DropDownList() {
 
 	const links = [
 		{
-			name: t('photo-marking'),
+			name: 'photo-marking',
 			href: '/pages/marking-images'
 		},
 		{
-			name: t('video-marking'),
+			name: 'video-marking',
 			href: '/pages/marking-video'
 		},
 		{
-			name: t('audio-marking'),
+			name: 'audio-marking',
 			href: '/pages/marking-audio'
 		},
 		{
-			name: t('document-marking'),
+			name: 'document-marking',
 			href: '/pages/marking-document'
 		}
 	];
@@ -54,6 +56,9 @@ export default function DropDownList() {
 			</div>
 			<ul className={`sub-menu ${dropDownExpanded ? 'expanded' : ''}`}>
 				{links.map((link) => {
+					if (referralLink && link.name === 'document-marking') {
+						return null;
+					}
 					return (
 						<Link
 							key={link.name}
@@ -68,7 +73,7 @@ export default function DropDownList() {
 								setMenuState(false)
 							}}
 						>
-							<p className="">{link.name}</p>
+							<p className="">{t(link.name)}</p>
 						</Link>
 					);
 				})}

src/app/ui/navigation/nav-links.tsx

@@ -26,7 +26,11 @@ export default function NavLinks() {
 			return fetchReferralUserStats();
 		},
 		select: (data) => {
+			if (data?.referralLink) {
 				return data?.referralLink;
+			} else {
+				return null;
+			}
 		}
 	});
 
@@ -83,7 +87,7 @@ export default function NavLinks() {
 					<p className="">{t('home')}</p>
 				</Link>
 
-				<DropDownList />
+				<DropDownList referralLink={referralLink} />
 
 				{links.map((link) => {
 					if (!referralLink && link.name === 'referral-program') {

src/app/ui/referral-page/commission-levels.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query';
-import { fetchReferralsLevels } from '@/app/actions/referralsActions';
+import { fetchReferralsLevels, fetchReferralUserStats } from '@/app/actions/referralsActions';
 import { useEffect } from 'react';
 
 export default function CommissionLevels() {
@@ -16,23 +16,58 @@ export default function CommissionLevels() {
 			return fetchReferralsLevels();
 		},
 		select: (data) => {
-			if (data?.message_body) {
-				return data?.message_body
+			if (data?.referrals) {
+				return data?.referrals
 			} else {
 				return []
 			}
 		}
 	});
 
-	useEffect(() => {
-		console.log('referralsLevels');
-		console.log(referralsLevels);
-	}, [referralsLevels])
+	const {
+		data: activeInvites,
+		error: activeInvitesError
+	} = useQuery({
+		queryKey: ['referralUserStats'],
+		queryFn: () => {
+			return fetchReferralUserStats();
+		},
+		select: (data) => {
+			if (data?.activeInvitee) {
+				return data.activeInvitee
+			} else {
+				return 0
+			};
+		}
+	});
 
 	if (!referralsLevels?.length) {
 		return null;
 	}
 
+	function getReferralIcon(referral: string) {
+		switch (referral) {
+			case 'bronze':
+				return '🥉'
+			case 'silver':
+				return '🥈'
+			case 'gold':
+				return '🥇'
+			case 'platinum':
+				return '💎'
+			default:
+				return '🥉'
+		}
+	}
+
+	function isActiveReferralLevel(activeInvites: number, maxInvites: number, minInvites: number) {
+		if (activeInvites <= maxInvites && activeInvites >= minInvites) {
+			return true
+		} else {
+			return false
+		}
+	}
+
 	return (
 		<div className="block-wrapper">
 			<h3 className="section-title">
@@ -40,32 +75,34 @@ export default function CommissionLevels() {
 				Уровни комиссии
 			</h3>
 			<div className="commission-levels">
-				<div className="level-card active">
-					<div className="level-number">🥉</div>
-					<div className="level-commission">15%</div>
-					<div className="level-subscribe">BRONZE</div>
-					<div className="level-requirement">0-5 рефералов</div>
+				{
+					referralsLevels.map((item: {
+						id: string,
+						share: string,
+						name: string,
+						minInvitee: number,
+						maxInvitee: number
+					}) => {
+						return (
+							<div
+								className={
+									`level-card ${isActiveReferralLevel(activeInvites, item.maxInvitee, item.minInvitee) ? 'active' : ''}`
+								}
+								key={item.id}
+							>
+								<div className="level-number">
+									{getReferralIcon(item.id)}
 								</div>
-				<div className="level-card ">
-					<div className="level-number">🥈</div>
-					<div className="level-commission">18%</div>
-					<div className="level-subscribe">SILVER</div>
-					<div className="level-requirement">6-15 рефералов</div>
+								<div className="level-commission">{item.share}%</div>
+								<div className="level-subscribe">{item.name}</div>
+								<div className="level-requirement">{
+									item.maxInvitee < 100 ? `${item.minInvitee}-${item.maxInvitee}` : `${item.minInvitee}+`
+								} рефералов
 								</div>
-
-				<div className="level-card ">
-					<div className="level-number">🥇</div>
-					<div className="level-commission">22%</div>
-					<div className="level-subscribe">GOLD</div>
-					<div className="level-requirement">16-50 рефералов</div>
-				</div>
-
-				<div className="level-card ">
-					<div className="level-number">💎</div>
-					<div className="level-commission">25%</div>
-					<div className="level-subscribe">PLATINUM</div>
-					<div className="level-requirement">50+ рефералов</div>
 							</div>
+						)
+					})
+				}
 			</div>
 		</div>
 	)