add subscription info

src/app/ui/payment/payment-tab-tariffs.tsx

@@ -62,7 +62,7 @@ export default function PaymentTabTariffs() {
 								</li>
 								<li className="plan-feature">
 									<span className="feature-icon">✓</span>
-									{convertBytes(item.diskSize)} хранилища
+									{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
 								</li>
 								<li className="plan-feature">
 									<span className="feature-icon">✓</span>

src/app/ui/settings/subscription-settings.tsx

@@ -1,7 +1,42 @@
+'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">
@@ -12,18 +47,18 @@ export default function SubscriptionSettings() {
 				<div className="subscription-info">
 					<div className="subscription-info-header">
 						<div>
-							<h4 className="subscription-info-title">🎯 Подписка "ПРОФИ"</h4>
-							<p>📅 Активна до 10.06.2028</p>
+							<h4 className="subscription-info-title">Подписка {userData?.name}</h4>
+							<p>📅 Активна до {dateHandler(userData?.endTariff)}</p>
 						</div>
 						<div style={{ textAlign: "right" }}>
-							<div className="subscription-info-title">2,000</div>
+							<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>20 ГБ</span>
+							<span>{userData?.diskSize ? convertBytes(userData?.diskSize) : 0}</span>
 						</div>
 						<div className="subscription-info-item">
 							<div>🔌 API доступ</div>
@@ -36,7 +71,7 @@ export default function SubscriptionSettings() {
 					</div>
 				</div>
 
-				<div className="subscription-info-footer">
+				{/* <div className="subscription-info-footer">
 					<button className="btn btn-outline">
 						🚀 СТАРТ
 					</button>
@@ -46,7 +81,7 @@ export default function SubscriptionSettings() {
 					<button className="btn btn-outline">
 						💼 ПРОФИ
 					</button>
-				</div>
+				</div> */}
 			</div>
 		</div>
 	)