diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx index 95514ae..56700ae 100644 --- a/src/pages/Subscription.tsx +++ b/src/pages/Subscription.tsx @@ -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 (
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' }} >
+ {isAtDeviceLimit && ( +
+ {t('dashboard.deviceLimitReached')} +
+ )}
{subscription.device_limit === 0 ? (