diff --git a/src/components/subscription/PurchaseCTAButton.tsx b/src/components/subscription/PurchaseCTAButton.tsx index b5e8c77..1fa7b0f 100644 --- a/src/components/subscription/PurchaseCTAButton.tsx +++ b/src/components/subscription/PurchaseCTAButton.tsx @@ -38,9 +38,12 @@ export default function PurchaseCTAButton({ ? t('subscription.cta.renewHint', 'Продление подписки') : t('subscription.cta.activeHint'); - // In multi-tariff mode: renew goes to per-subscription renew page - const linkTo = - isMultiTariff && subscription?.id + // Trial → purchase page (buy a real tariff, trial can't be renewed) + // Multi-tariff active → per-subscription renew page + // Otherwise → purchase page + const linkTo = isTrial + ? '/subscription/purchase' + : isMultiTariff && subscription?.id ? `/subscriptions/${subscription.id}/renew` : '/subscription/purchase'; diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx index 55c6642..2a70165 100644 --- a/src/pages/Subscription.tsx +++ b/src/pages/Subscription.tsx @@ -5,13 +5,15 @@ import { useNavigate, useParams } from 'react-router'; import { subscriptionApi } from '../api/subscription'; import { WebBackButton } from '../components/WebBackButton'; import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from '../components/primitives/Dialog'; + Sheet, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from '../components/primitives/Sheet'; +import { useDestructiveConfirm } from '../platform/hooks/useNativeDialog'; +import { usePlatform } from '../platform'; import TrafficProgressBar from '../components/dashboard/TrafficProgressBar'; import { HoverBorderGradient } from '../components/ui/hover-border-gradient'; import { useTrafficZone } from '../hooks/useTrafficZone'; @@ -183,8 +185,10 @@ export default function Subscription() { const g = getGlassColors(isDark); const haptic = useHaptic(); const [copied, setCopied] = useState(false); - const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); + const [showDeleteSheet, setShowDeleteSheet] = useState(false); const [deleteLoading, setDeleteLoading] = useState(false); + const { platform } = usePlatform(); + const destructiveConfirm = useDestructiveConfirm(); // Helper to format price from kopeks const formatPrice = (kopeks: number) => `${formatAmount(kopeks / 100)} ${currencySymbol}`; @@ -1278,8 +1282,33 @@ export default function Subscription() { {isMultiTariff && subscription && !subscription.is_active && !subscription.is_trial && ( <> - - - - {t('subscription.deleteTitle', 'Удалить подписку?')} - + {/* Web: Sheet confirmation */} + + + + {t('subscription.deleteTitle', 'Удалить подписку?')} + {t( 'subscription.deleteWarning', 'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны. Это действие нельзя отменить.', )} - - - - + + + - - - + + + + )}