mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
fix: блокировка кнопки устройств на странице подписки
Аналогичная блокировка как на дашборде — disabled + haptic + предупреждение
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user