117 lines
4.8 KiB
TypeScript
117 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { referralApi } from '@/lib/api/referral';
|
|
import ReferralList from '@/components/admin/referral/ReferralList';
|
|
import { ReferralRewardUser } from '@/types/referral';
|
|
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
|
|
|
export default function ReferralRewardsPage() {
|
|
const { token } = useAuth();
|
|
const [users, setUsers] = useState<ReferralRewardUser[]>([]);
|
|
const [subscriptionTarget, setSubscriptionTarget] = useState(0);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [fulfillingId, setFulfillingId] = useState<number | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
|
|
const initialLoadRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (token && !initialLoadRef.current) {
|
|
initialLoadRef.current = true;
|
|
loadRewards();
|
|
}
|
|
}, [token]);
|
|
|
|
const loadRewards = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await referralApi.getPendingRewards(token!);
|
|
setUsers(data.data || []);
|
|
setSubscriptionTarget(data.subscription_target || 0);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'خطا در دریافت لیست پاداشهای معرفی');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFulfill = async (user: ReferralRewardUser) => {
|
|
if (!confirm(`آیا از اعطای یک ماه اشتراک رایگان به «${user.name || user.mobile || user.email}» اطمینان دارید؟`)) {
|
|
return;
|
|
}
|
|
|
|
setFulfillingId(user.id);
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
await referralApi.fulfillReward(user.id, token!);
|
|
setSuccess(`اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
|
|
// Remove the fulfilled user from the list and refresh
|
|
setUsers((prev) => prev.filter((u) => u.id !== user.id));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'خطا در اعطای اشتراک رایگان');
|
|
} finally {
|
|
setFulfillingId(null);
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
پاداشهای معرفی
|
|
</h1>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
کاربرانی که به حد نصاب دعوت موفق رسیدهاند و هنوز اشتراک رایگان دریافت نکردهاند.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={loadRewards}
|
|
disabled={isLoading}
|
|
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
>
|
|
<ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
|
|
بروزرسانی
|
|
</button>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
{error && (
|
|
<div className="mb-4 rounded-md bg-red-50 p-4">
|
|
<p className="text-sm text-red-800">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="mb-4 rounded-md bg-green-50 p-4">
|
|
<p className="text-sm text-green-800">{success}</p>
|
|
</div>
|
|
)}
|
|
|
|
{isLoading && users.length === 0 ? (
|
|
<div className="text-center py-12 bg-white rounded-lg shadow">
|
|
<p className="text-gray-500">در حال بارگذاری...</p>
|
|
</div>
|
|
) : (
|
|
<ReferralList
|
|
users={users}
|
|
subscriptionTarget={subscriptionTarget}
|
|
onFulfill={handleFulfill}
|
|
isLoading={isLoading}
|
|
fulfillingId={fulfillingId}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|