add referrals levels

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>
 	)