add referrals levels

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) => {
-			return data?.referralLink;
+			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>
-				</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>
-
-				<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>
+				{
+					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-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>
+						)
+					})
+				}
 			</div>
 		</div>
 	)