diff --git a/src/components/subscription/SubscriptionListCard.tsx b/src/components/subscription/SubscriptionListCard.tsx index 3918a2c..dc4d5ad 100644 --- a/src/components/subscription/SubscriptionListCard.tsx +++ b/src/components/subscription/SubscriptionListCard.tsx @@ -19,15 +19,28 @@ function formatDate(iso: string | null, locale?: string): string { function StatusBadge({ status, + isTrial, t, }: { status: string; + isTrial: boolean; t: (key: string, fallback: string) => string; }) { const isActive = status === 'active' || status === 'trial'; const isLimited = status === 'limited'; const isExpired = status === 'expired' || status === 'disabled'; + if (isTrial) { + return ( + + + + + {t('subscription.statusTrial', 'Тестовая')} + + ); + } + const color = isActive ? 'bg-emerald-400/15 text-emerald-400 border-emerald-400/20' : isLimited @@ -35,9 +48,7 @@ function StatusBadge({ : 'bg-red-400/15 text-red-400 border-red-400/20'; const label = isActive - ? status === 'trial' - ? t('subscription.statusTrial', 'Тестовая') - : t('subscription.statusActive', 'Активна') + ? t('subscription.statusActive', 'Активна') : isLimited ? t('subscription.statusLimited', 'Ограничена') : isExpired @@ -70,6 +81,7 @@ export default function SubscriptionListCard({ onClick(); }; + const isTrial = subscription.is_trial; const isActive = subscription.status === 'active' || subscription.status === 'trial'; const isExpired = subscription.status === 'expired' || subscription.status === 'disabled'; const trafficLimit = subscription.traffic_limit_gb; @@ -83,18 +95,27 @@ export default function SubscriptionListCard({ const trafficColor = trafficPercent >= 90 ? 'bg-red-400' : trafficPercent >= 70 ? 'bg-amber-400' : 'bg-emerald-400'; + const borderColor = isTrial + ? 'rgba(251,191,36,0.2)' + : isExpired + ? 'rgba(255,59,92,0.15)' + : g.cardBorder; + + const bgColor = isTrial + ? isDark + ? 'rgba(251,191,36,0.04)' + : 'rgba(251,191,36,0.03)' + : isExpired + ? isDark + ? 'rgba(255,59,92,0.04)' + : 'rgba(255,59,92,0.03)' + : g.cardBg; + return ( -

- {subscription?.tariff_name || t('subscription.title')} -

- - ) : ( -

{t('subscription.title')}

- )} + {/* Page title — native Telegram back button handles navigation */} +

+ {isMultiTariff && subscription?.tariff_name + ? subscription.tariff_name + : t('subscription.title')} +

{/* Current Subscription */} {subscription ? ( diff --git a/src/pages/SubscriptionPurchase.tsx b/src/pages/SubscriptionPurchase.tsx index 9d7987e..1a8aa35 100644 --- a/src/pages/SubscriptionPurchase.tsx +++ b/src/pages/SubscriptionPurchase.tsx @@ -383,34 +383,7 @@ export default function SubscriptionPurchase() { if (optionsError || (!purchaseOptions && !optionsLoading)) { return (
-
- -

- {t('subscription.extend')} -

-
+

{t('subscription.extend')}

- {/* Header with back link */} -
- -

- {isMultiTariff && !subscriptionId - ? t('subscription.buyTariff', 'Купить тариф') - : subscription?.is_daily && !subscription?.is_trial - ? t('subscription.switchTariff.title') - : subscription && !subscription.is_trial - ? t('subscription.extend') - : t('subscription.getSubscription')} -

-
+ {/* Header — native Telegram back button handles navigation */} +

+ {isMultiTariff && !subscriptionId + ? t('subscription.newTariff', 'Новый тариф') + : subscription?.is_daily && !subscription?.is_trial + ? t('subscription.switchTariff.title') + : subscription && !subscription.is_trial + ? t('subscription.extend') + : t('subscription.getSubscription')} +

{/* Tariffs Section */} {isTariffsMode && tariffs.length > 0 && (