73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { getUserData } from '@/app/actions/action';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { convertBytes } from '@/app/lib/convertBytes';
|
|
import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
|
|
|
|
export default function SubscriptionSettings() {
|
|
const t = useTranslations('Global');
|
|
const { data: userData, isLoading, isError, error } = useUserProfile();
|
|
|
|
function dateHandler(date: string | undefined) {
|
|
if (!date) {
|
|
return 'error'
|
|
}
|
|
|
|
const newDate = new Date(date);
|
|
const day = newDate.getDate().toString().padStart(2, '0');
|
|
const month = (newDate.getMonth() + 1).toString().padStart(2, '0');
|
|
const year = newDate.getFullYear();
|
|
|
|
return `${day}.${month}.${year}`;
|
|
}
|
|
|
|
return (
|
|
<div className="settings-form">
|
|
<div className="form-section">
|
|
<h3 className="form-section-title">
|
|
{t('subscription')}
|
|
</h3>
|
|
<div className="subscription-info">
|
|
<div className="subscription-info-header">
|
|
<div>
|
|
<h4 className="subscription-info-title">Подписка {userData?.tariffInfo?.tariffName}</h4>
|
|
<p>📅 Активна до {dateHandler(userData?.tariffInfo?.endTariff)}</p>
|
|
</div>
|
|
<div style={{ textAlign: "right" }}>
|
|
<div className="subscription-info-title">{userData?.tariffInfo?.maxFileCounts}</div>
|
|
<p>файлов в месяц</p>
|
|
</div>
|
|
</div>
|
|
<div className="subscription-info-main">
|
|
<div className="subscription-info-item">
|
|
<div>💾 Хранилище</div>
|
|
<span>{userData?.tariffInfo?.maxFileOnDisk ? convertBytes(userData?.tariffInfo?.maxFileOnDisk) : 0}</span>
|
|
</div>
|
|
<div className="subscription-info-item">
|
|
<div>🔌 API доступ</div>
|
|
<span>Включен</span>
|
|
</div>
|
|
<div className="subscription-info-item">
|
|
<div>🎧 Поддержка</div>
|
|
<span>24/7</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div className="subscription-info-footer">
|
|
<button className="btn btn-outline">
|
|
🚀 СТАРТ
|
|
</button>
|
|
<button className="btn btn-outline">
|
|
⭐ ПРЕМИУМ
|
|
</button>
|
|
<button className="btn btn-outline">
|
|
💼 ПРОФИ
|
|
</button>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |