From 3c73dc40dcbfde82b593721db2bc3329097e63bf Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Wed, 25 Mar 2026 10:53:15 +0700
Subject: [PATCH] fix styles for payment tab

---
 README.md                                  |  4 +-
 package.json                               |  2 +-
 src/app/styles/payment-container.scss      |  3 +-
 src/app/ui/payment/payment-tab-tariffs.tsx | 85 +++++++++++-----------
 src/app/ui/payment/payment-tabs.tsx        |  8 +-
 5 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 976a3f9..0902ef7 100644
--- a/README.md
+++ b/README.md
@@ -39,4 +39,6 @@ docker volume prune - удалить неиспользуемые базы да
 эндпоинт для бека.
 {URL}/api/payments/webhook/yookassa
 
-https://dev-workspace.not-copy.com/api/payments/webhook/yookassa
\ No newline at end of file
+https://dev-workspace.not-copy.com/api/payments/webhook/yookassa
+
+https://mutely-profound-sandfish.cloudpub.ru/api/payments/webhook/yookassa
\ No newline at end of file
diff --git a/package.json b/package.json
index 4080cb7..65cf144 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.69.0",
+	"version": "0.70.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",
diff --git a/src/app/styles/payment-container.scss b/src/app/styles/payment-container.scss
index 7dcafec..eb2eda7 100644
--- a/src/app/styles/payment-container.scss
+++ b/src/app/styles/payment-container.scss
@@ -202,7 +202,8 @@
 
 		.subscription-grid {
 			display: grid;
-			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+			/* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
+			grid-template-columns: 1fr 1fr 1fr 1fr;
 			gap: 20px;
 			margin-bottom: 25px;
 		}
diff --git a/src/app/ui/payment/payment-tab-tariffs.tsx b/src/app/ui/payment/payment-tab-tariffs.tsx
index a1e3383..5bf0f46 100644
--- a/src/app/ui/payment/payment-tab-tariffs.tsx
+++ b/src/app/ui/payment/payment-tab-tariffs.tsx
@@ -225,48 +225,51 @@ export default function PaymentTabTariffs() {
 							tokens: number;
 							maxFilesCount: number;
 							diskSize: number;
-						}) => (
-							<div className="plan-card animate-card" key={item.id}>
-								<div className="plan-header">
-									<h3 className="plan-name">
-										{t.has(item.name) ? t(item.name) : item.name}
-									</h3>
-									<div className="plan-price">{item.price ?? 0} ₽</div>
-									<div className="plan-period">{t('per-month')}</div>
-									<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
+						}) => {
+							return (
+								<div className="plan-card animate-card" key={item.id}>
+									<div className="plan-header">
+										<h3 className="plan-name">
+											{t.has(item.name) ? t(item.name) : item.name}
+										</h3>
+										<div className="plan-price">{item.price ?? 0} ₽</div>
+										<div className="plan-period">{t('per-month')}</div>
+										<div className="plan-tokens">{item.tokens ?? 0} токенов включено</div>
+									</div>
+									<ul className="plan-features">
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											{item.maxFilesCount} файлов в месяц
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											Базовые модули защиты
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon">✓</span>
+											Поддержка 24/7
+										</li>
+										<li className="plan-feature">
+											<span className="feature-icon not">✗</span>
+											API доступ
+										</li>
+									</ul>
+									<div className="flex justify-center">
+										<button
+											className="btn btn-primary"
+											onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
+										>
+											Выбрать план
+										</button>
+									</div>
 								</div>
-								<ul className="plan-features">
-									<li className="plan-feature">
-										<span className="feature-icon">✓</span>
-										{item.maxFilesCount} файлов в месяц
-									</li>
-									<li className="plan-feature">
-										<span className="feature-icon">✓</span>
-										{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
-									</li>
-									<li className="plan-feature">
-										<span className="feature-icon">✓</span>
-										Базовые модули защиты
-									</li>
-									<li className="plan-feature">
-										<span className="feature-icon">✓</span>
-										Поддержка 24/7
-									</li>
-									<li className="plan-feature">
-										<span className="feature-icon not">✗</span>
-										API доступ
-									</li>
-								</ul>
-								<div className="flex justify-center">
-									<button
-										className="btn btn-primary"
-										onClick={() => openPaymentWindow(item.price, item.name, item.tokens, item.id)}
-									>
-										Выбрать план
-									</button>
-								</div>
-							</div>
-						))}
+							)
+						}
+						)}
 					</div>
 				)}
 			</div>
diff --git a/src/app/ui/payment/payment-tabs.tsx b/src/app/ui/payment/payment-tabs.tsx
index ad61f42..0cc519f 100644
--- a/src/app/ui/payment/payment-tabs.tsx
+++ b/src/app/ui/payment/payment-tabs.tsx
@@ -5,7 +5,7 @@ import PaymentTabTariffs from '@/app/ui/payment/payment-tab-tariffs';
 import PaymentTubBuyTokens from './payment-tab-buy-tokens';
 import PaymentTabTransactionHistory from './payment-tab-transaction-history';
 import { useTranslations } from 'next-intl';
-
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function PaymentTabs() {
 	let [selectedTab, setSelectedTab] = useState('1');
@@ -14,6 +14,12 @@ export default function PaymentTabs() {
 		setSelectedTab(tab);
 	}
 
+	const { data: userData, isLoading, isError, error } = useUserProfile();
+
+	if (typeof userData?.tariffInfo?.tokens !== 'number') {
+		return null
+	}
+
 	return (
 		<>
 			<div className="payment-tabs">