119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
'use client'
|
||
|
||
import { fetchReferralUserStats } from '@/app/actions/referralsActions';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { useTranslations } from 'next-intl';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { toast } from 'sonner';
|
||
|
||
export default function ReferralLinkSection() {
|
||
const {
|
||
data: referralUserStats,
|
||
isLoading,
|
||
isError,
|
||
error
|
||
} = useQuery({
|
||
queryKey: ['referralUserStats'],
|
||
queryFn: () => {
|
||
return fetchReferralUserStats();
|
||
},
|
||
select: (data) => {
|
||
return data;
|
||
}
|
||
});
|
||
|
||
const t = useTranslations('Global')
|
||
const [referralUrl, setReferralUrl] = useState<string>('');
|
||
const refLink = useRef<HTMLElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (typeof window !== 'undefined') {
|
||
setReferralUrl(`${window.location.origin}/register?ref=${referralUserStats?.referralLink}`);
|
||
}
|
||
}, [referralUserStats]);
|
||
|
||
const copyHandler = async () => {
|
||
if (!refLink.current?.textContent) return;
|
||
|
||
const textToCopy = refLink.current.textContent;
|
||
|
||
if (typeof window === 'undefined' || !navigator.clipboard) {
|
||
console.warn('Clipboard API не доступен');
|
||
|
||
const success = fallbackCopy(textToCopy);
|
||
if (success) {
|
||
toast.success(`${t('copied')}: ${textToCopy}`);
|
||
} else {
|
||
toast.error('Не удалось скопировать');
|
||
}
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(textToCopy);
|
||
toast.success(`${t('copied')}: ${textToCopy}`);
|
||
} catch (err) {
|
||
console.error('Ошибка копирования:', err);
|
||
|
||
const success = fallbackCopy(textToCopy);
|
||
if (success) {
|
||
toast.success(`${t('copied')}: ${textToCopy}`);
|
||
} else {
|
||
toast.error('Не удалось скопировать');
|
||
}
|
||
}
|
||
};
|
||
|
||
const fallbackCopy = (text: string) => {
|
||
try {
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = text;
|
||
textArea.style.position = 'fixed';
|
||
textArea.style.left = '-999999px';
|
||
textArea.style.top = '-999999px';
|
||
document.body.appendChild(textArea);
|
||
|
||
textArea.select();
|
||
textArea.setSelectionRange(0, 99999);
|
||
|
||
const successful = document.execCommand('copy');
|
||
document.body.removeChild(textArea);
|
||
|
||
return successful;
|
||
} catch (err) {
|
||
console.error('Fallback copy failed:', err);
|
||
return false;
|
||
}
|
||
};
|
||
|
||
if (!referralUserStats?.referralLink) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="referral-link-section">
|
||
<h3>Ваша реферальная ссылка</h3>
|
||
<p>Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки</p>
|
||
<div className="referral-link-input">
|
||
<span
|
||
id="referral-link"
|
||
ref={refLink}
|
||
>
|
||
{referralUrl}
|
||
</span >
|
||
<button
|
||
className="copy-btn"
|
||
onClick={copyHandler}
|
||
>
|
||
Копировать
|
||
</button>
|
||
</div>
|
||
<p className="referral-link-footer">
|
||
Код: <strong>{referralUserStats?.referralLink}</strong> •
|
||
Приглашений: <strong>
|
||
{referralUserStats?.totalInvitee}
|
||
</strong>
|
||
</p>
|
||
</div>
|
||
)
|
||
} |