fix: блокировка кнопки устройств на странице подписки

Аналогичная блокировка как на дашборде — disabled + haptic + предупреждение
This commit is contained in:
Fringg
2026-03-18 04:27:33 +03:00
parent 8636bd7659
commit 2d89b5e342

View File

@@ -14,6 +14,7 @@ import { useCurrency } from '../hooks/useCurrency';
import { useCloseOnSuccessNotification } from '../store/successNotification';
import PurchaseCTAButton from '../components/subscription/PurchaseCTAButton';
import { CopyIcon, CheckIcon } from '../components/icons';
import { useHaptic } from '../platform';
import {
getErrorMessage,
getInsufficientBalanceError,
@@ -169,6 +170,7 @@ export default function Subscription() {
const navigate = useNavigate();
const { isDark } = useTheme();
const g = getGlassColors(isDark);
const haptic = useHaptic();
const [copied, setCopied] = useState(false);
// Helper to format price from kopeks
@@ -444,6 +446,8 @@ export default function Subscription() {
const isUnlimited =
(trafficData?.is_unlimited ?? false) || subscription.traffic_limit_gb === 0;
const connectedDevices = devicesData?.total ?? 0;
const isAtDeviceLimit =
subscription.device_limit > 0 && connectedDevices >= subscription.device_limit;
return (
<div
@@ -726,8 +730,15 @@ export default function Subscription() {
<HoverBorderGradient
as="button"
accentColor={zone.mainHex}
onClick={() => navigate('/connection')}
className="mb-5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300"
disabled={isAtDeviceLimit}
onClick={() => {
if (isAtDeviceLimit) {
haptic.notification('error');
return;
}
navigate('/connection');
}}
className={`mb-5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300${isAtDeviceLimit ? 'cursor-not-allowed opacity-50' : ''}`}
style={{ fontFamily: 'inherit' }}
>
<div
@@ -762,6 +773,14 @@ export default function Subscription() {
max: subscription.device_limit,
})}
</div>
{isAtDeviceLimit && (
<div
className="mt-1 text-[10px] font-medium"
style={{ color: 'rgb(var(--color-warning-400))' }}
>
{t('dashboard.deviceLimitReached')}
</div>
)}
</div>
{subscription.device_limit === 0 ? (
<div