no-copy-frontend/src/app/ui/settings/subscription-settings.tsx

'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';

export default function SubscriptionSettings() {
	const t = useTranslations('Global');
	const {
		data: userData,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['userData'],
		queryFn: () => {
			return getUserData();
		},
		select: (data) => {
			if (data.tariffInfo?.tariff) {
				return {
					diskSize: data.tariffInfo?.tariff?.diskSize,
					id: data.tariffInfo?.tariff?.id,
					maxFilesCount: data.tariffInfo?.tariff?.maxFilesCount,
					maxUsers: data.tariffInfo?.tariff?.maxUsers,
					name: data.tariffInfo?.tariff?.name,
					price: data.tariffInfo?.tariff?.price,
					tokens: data.tariffInfo?.tariff?.tokens,
					type: data.tariffInfo?.tariff?.type,
					endTariff: data.tariffInfo?.endTariff
				}
			}
		}
	});

	function dateHandler(date: string) {
		return date.split(' ')[0];
	}

	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?.name}</h4>
							<p>📅 Активна до {dateHandler(userData?.endTariff)}</p>
						</div>
						<div style={{ textAlign: "right" }}>
							<div className="subscription-info-title">{userData?.maxFilesCount}</div>
							<p>файлов в месяц</p>
						</div>
					</div>
					<div className="subscription-info-main">
						<div className="subscription-info-item">
							<div>💾 Хранилище</div>
							<span>{userData?.diskSize ? convertBytes(userData?.diskSize) : 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>
	)
}