fix styles for payment tab

README.md

@@ -40,3 +40,5 @@ docker volume prune - удалить неиспользуемые базы да
 {URL}/api/payments/webhook/yookassa
 
 https://dev-workspace.not-copy.com/api/payments/webhook/yookassa
+
+https://mutely-profound-sandfish.cloudpub.ru/api/payments/webhook/yookassa

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",

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

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}>
+							return (
-								<div className="plan-header">
+								<div className="plan-card animate-card" key={item.id}>
-									<h3 className="plan-name">
+									<div className="plan-header">
-										{t.has(item.name) ? t(item.name) : item.name}
+										<h3 className="plan-name">
-									</h3>
+											{t.has(item.name) ? t(item.name) : item.name}
-									<div className="plan-price">{item.price ?? 0} ₽</div>
+										</h3>
-									<div className="plan-period">{t('per-month')}</div>
+										<div className="plan-price">{item.price ?? 0} ₽</div>
-									<div className="plan-tokens">{item.tokens ?? 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>

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">