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 && (
<>
-
+
+
+
+
>
)}