frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix styles for payment tab

Browse Source
This commit is contained in:
smanylov
2026-03-25 10:53:15 +07:00
parent 4986455919
commit 3c73dc40dc
5 changed files with 57 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/payment-container.scss
+2 -1
View File
@@ -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
+44 -41
View File
@@ -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>
src/app/ui/payment/payment-tabs.tsx
+7 -1
View File
@@ -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">