feat: add refferal feature

2026-06-06 13:50:06 +03:30
parent 577d8afb53
commit 754c1c3178
10 changed files with 526 additions and 4 deletions
@@ -0,0 +1,116 @@
+'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>
+    );
+}