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,132 @@
+'use client';
+
+import { useState } from 'react';
+import { User, UpdateUserProfileData } from '@/types/user';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface UserEditFormProps {
+    user: User;
+    onSubmit: (data: UpdateUserProfileData) => void;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: UserEditFormProps) {
+    const [formData, setFormData] = useState<UpdateUserProfileData>({
+        first_name: user.first_name || '',
+        last_name: user.last_name || '',
+        email: user.email || '',
+        mobile: user.mobile || '',
+        avatar: null,
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        // Only send changed fields so we never overwrite values with empty ones
+        const payload: UpdateUserProfileData = {};
+        if (formData.first_name !== (user.first_name || '')) payload.first_name = formData.first_name;
+        if (formData.last_name !== (user.last_name || '')) payload.last_name = formData.last_name;
+        if (formData.email !== (user.email || '')) payload.email = formData.email;
+        if (formData.mobile !== (user.mobile || '')) payload.mobile = formData.mobile;
+        if (formData.avatar) payload.avatar = formData.avatar;
+
+        onSubmit(payload);
+    };
+
+    const inputClass =
+        'block w-full px-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm';
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+            <div className="bg-white rounded-lg shadow-xl w-full max-w-lg" dir="rtl">
+                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                    <h3 className="text-lg font-medium text-gray-900">ویرایش اطلاعات کاربر</h3>
+                    <button
+                        onClick={onCancel}
+                        className="text-gray-400 hover:text-gray-600"
+                        type="button"
+                    >
+                        <XMarkIcon className="h-5 w-5" />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
+                            <input
+                                type="text"
+                                className={inputClass}
+                                value={formData.first_name || ''}
+                                onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-1">نام خانوادگی</label>
+                            <input
+                                type="text"
+                                className={inputClass}
+                                value={formData.last_name || ''}
+                                onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">ایمیل</label>
+                        <input
+                            type="email"
+                            dir="ltr"
+                            className={inputClass}
+                            value={formData.email || ''}
+                            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label>
+                        <input
+                            type="text"
+                            dir="ltr"
+                            placeholder="09xxxxxxxxx"
+                            className={inputClass}
+                            value={formData.mobile || ''}
+                            onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">آواتار</label>
+                        <input
+                            type="file"
+                            accept="image/*"
+                            className="block w-full text-sm text-gray-700 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
+                            onChange={(e) =>
+                                setFormData({ ...formData, avatar: e.target.files?.[0] || null })
+                            }
+                        />
+                    </div>
+
+                    <div className="flex justify-end gap-2 pt-2">
+                        <button
+                            type="button"
+                            onClick={onCancel}
+                            disabled={isLoading}
+                            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                        >
+                            انصراف
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                        >
+                            {isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}