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