This commit is contained in:
@ -23,7 +23,7 @@ import {
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import toast, { Toaster } from 'react-hot-toast';
|
import toast, { Toaster } from 'react-hot-toast';
|
||||||
import AuthService from '../services/AuthService';
|
import AuthService from '../services/AuthService';
|
||||||
import { changePassword, deleteMyAccount, submitReport } from '../utils/api';
|
import { deleteMyAccount } from '../utils/api';
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
@ -31,12 +31,6 @@ export default function SettingsPage() {
|
|||||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||||
const [deletePassword, setDeletePassword] = useState('');
|
const [deletePassword, setDeletePassword] = useState('');
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
||||||
|
|
||||||
const [showContactDialog, setShowContactDialog] = useState(false);
|
|
||||||
const [contactSubject, setContactSubject] = useState('');
|
|
||||||
const [contactBody, setContactBody] = useState('');
|
|
||||||
const [isSendingContact, setIsSendingContact] = useState(false);
|
|
||||||
|
|
||||||
const handleSignOut = () => {
|
const handleSignOut = () => {
|
||||||
AuthService.deleteToken();
|
AuthService.deleteToken();
|
||||||
@ -65,23 +59,45 @@ export default function SettingsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSendContact = async () => {
|
const handleContactSupport = async () => {
|
||||||
if (!contactSubject.trim() || !contactBody.trim()) {
|
|
||||||
toast.error(t('fill-subject-and-message'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSendingContact(true);
|
|
||||||
try {
|
try {
|
||||||
await submitReport(contactSubject.trim(), contactBody.trim());
|
let token = '';
|
||||||
toast.success(t('send-success'));
|
if (typeof AuthService.getToken === 'function') {
|
||||||
setShowContactDialog(false);
|
token = AuthService.getToken();
|
||||||
setContactSubject('');
|
} else if (typeof window !== 'undefined') {
|
||||||
setContactBody('');
|
token = localStorage.getItem('token') || localStorage.getItem('accessToken') || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch('http://45.93.137.91/api/Configuration/GetPlatformNumber', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch support number');
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseText = await response.text();
|
||||||
|
let numberStr = responseText;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(responseText);
|
||||||
|
numberStr = parsed.data || parsed.number || parsed.value || parsed;
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
const cleanNumber = typeof numberStr === 'string'
|
||||||
|
? numberStr.replace(/[^0-9+]/g, '')
|
||||||
|
: String(numberStr).replace(/[^0-9+]/g, '');
|
||||||
|
|
||||||
|
if (cleanNumber) {
|
||||||
|
window.location.href = `https://wa.me/${cleanNumber}`;
|
||||||
|
} else {
|
||||||
|
toast.error(t('error'));
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err.message || t('send-error'));
|
toast.error(t('error'));
|
||||||
} finally {
|
|
||||||
setIsSendingContact(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -104,7 +120,7 @@ export default function SettingsPage() {
|
|||||||
title: t('support'),
|
title: t('support'),
|
||||||
items: [
|
items: [
|
||||||
{ icon: HelpCircle, label: t('faq'), href: '/faq', desc: t('faq-desc') },
|
{ icon: HelpCircle, label: t('faq'), href: '/faq', desc: t('faq-desc') },
|
||||||
{ icon: MessageCircle, label: t('contactUs'), desc: t('contact-us-desc'), action: () => setShowContactDialog(true) },
|
{ icon: MessageCircle, label: t('contactUs'), desc: t('contact-us-desc'), action: handleContactSupport },
|
||||||
{ icon: FileText, label: t('terms-and-conditions'), href: '/terms', desc: t('terms-desc') },
|
{ icon: FileText, label: t('terms-and-conditions'), href: '/terms', desc: t('terms-desc') },
|
||||||
{ icon: Eye, label: t('privacy'), href: '/privacy', desc: t('privacy-desc') },
|
{ icon: Eye, label: t('privacy'), href: '/privacy', desc: t('privacy-desc') },
|
||||||
]
|
]
|
||||||
@ -289,74 +305,6 @@ export default function SettingsPage() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showContactDialog && (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.95 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
|
|
||||||
<MessageCircle className="w-5 h-5 text-amber-600" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">{t('contactUs')}</h3>
|
|
||||||
<p className="text-sm text-gray-500">{t('contact-reply-prompt')}</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowContactDialog(false);
|
|
||||||
setContactSubject('');
|
|
||||||
setContactBody('');
|
|
||||||
}}
|
|
||||||
className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<X className="w-5 h-5 text-gray-400" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={contactSubject}
|
|
||||||
onChange={(e) => setContactSubject(e.target.value)}
|
|
||||||
placeholder={t('subject')}
|
|
||||||
maxLength={300}
|
|
||||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
value={contactBody}
|
|
||||||
onChange={(e) => setContactBody(e.target.value)}
|
|
||||||
placeholder={t('write-message-placeholder')}
|
|
||||||
rows={5}
|
|
||||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none resize-none"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowContactDialog(false);
|
|
||||||
setContactSubject('');
|
|
||||||
setContactBody('');
|
|
||||||
}}
|
|
||||||
className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
|
|
||||||
>
|
|
||||||
{t('cancel')}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSendContact}
|
|
||||||
disabled={isSendingContact}
|
|
||||||
className="flex-1 px-4 py-3 rounded-xl bg-amber-600 text-white hover:bg-amber-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
{isSendingContact ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
|
|
||||||
{isSendingContact ? t('sending') : t('send')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user