From 5fcaa73d20cd140ac9ee87ee12d2e9a2825b6de5 Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Fri, 10 Oct 2025 11:19:58 +0300
Subject: [PATCH] Add subscription renewal section to miniapp

---
 miniapp/index.html | 1238 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1238 insertions(+)

diff --git a/miniapp/index.html b/miniapp/index.html
index 2da7b218..75fd1a2b 100644
--- a/miniapp/index.html
+++ b/miniapp/index.html
@@ -696,6 +696,195 @@
             color: var(--text-secondary);
         }
 
+        .subscription-renewal-card .card-header {
+            align-items: flex-start;
+        }
+
+        .subscription-renewal-summary {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin-top: 8px;
+        }
+
+        .subscription-renewal-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 4px 10px;
+            border-radius: var(--radius-sm);
+            background: rgba(var(--primary-rgb), 0.08);
+            color: var(--primary);
+            font-size: 12px;
+            font-weight: 600;
+            line-height: 1.2;
+        }
+
+        .subscription-renewal-content {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .subscription-renewal-loading {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .subscription-renewal-periods {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .subscription-renewal-period {
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius);
+            padding: 14px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+            background: var(--bg-primary);
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .subscription-renewal-period:hover {
+            border-color: rgba(var(--primary-rgb), 0.6);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .subscription-renewal-period.active {
+            border-color: var(--primary);
+            background: rgba(var(--primary-rgb), 0.08);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .subscription-renewal-period.disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .subscription-renewal-period-info {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .subscription-renewal-period-title {
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .subscription-renewal-period-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-items: center;
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+
+        .subscription-renewal-price {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 6px;
+        }
+
+        .subscription-renewal-price-original {
+            text-decoration: line-through;
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+
+        .subscription-renewal-price-current {
+            font-size: 18px;
+            font-weight: 700;
+        }
+
+        .subscription-renewal-price-per-month {
+            font-size: 13px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-discount-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 8px;
+            border-radius: var(--radius-sm);
+            background: rgba(var(--primary-rgb), 0.12);
+            color: var(--primary);
+            font-size: 12px;
+            font-weight: 600;
+        }
+
+        .subscription-renewal-summary-card {
+            border: 2px dashed rgba(var(--primary-rgb), 0.18);
+            border-radius: var(--radius);
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            background: rgba(var(--primary-rgb), 0.05);
+        }
+
+        .subscription-renewal-summary-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            gap: 12px;
+        }
+
+        .subscription-renewal-summary-label {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-summary-prices {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 4px;
+        }
+
+        .subscription-renewal-info-note {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-actions {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .subscription-renewal-status-text {
+            font-size: 13px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-error {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            align-items: flex-start;
+        }
+
+        :root[data-theme="dark"] .subscription-renewal-summary-card {
+            border-color: rgba(var(--primary-rgb), 0.3);
+            background: rgba(var(--primary-rgb), 0.1);
+        }
+
+        :root[data-theme="dark"] .subscription-renewal-period {
+            background: rgba(15, 23, 42, 0.9);
+        }
+
         :root[data-theme="dark"] .subscription-settings-toggle {
             background: rgba(15, 23, 42, 0.6);
         }
@@ -3749,6 +3938,53 @@
                 </div>
             </div>
 
+            <!-- Subscription Renewal -->
+            <div class="card expandable subscription-renewal-card hidden" id="subscriptionRenewalCard">
+                <div class="card-header">
+                    <div class="card-title">
+                        <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 1m6-1a9 9 0 11-9-9 9 9 0 019 9zm-9 4h.01"/>
+                        </svg>
+                        <span data-i18n="subscription_renewal.title">Продление подписки</span>
+                    </div>
+                    <div class="subscription-renewal-summary hidden" id="subscriptionRenewalSummary"></div>
+                    <svg class="expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                    </svg>
+                </div>
+                <div class="card-content">
+                    <div class="subscription-renewal-status-text hidden" id="subscriptionRenewalStatus"></div>
+                    <div class="subscription-settings-loading hidden" id="subscriptionRenewalLoading">
+                        <div class="subscription-settings-loading-line"></div>
+                        <div class="subscription-settings-loading-line" style="width: 70%;"></div>
+                        <div class="subscription-settings-loading-line" style="width: 55%;"></div>
+                    </div>
+                    <div class="subscription-renewal-error hidden" id="subscriptionRenewalError">
+                        <div id="subscriptionRenewalErrorText" data-i18n="subscription_renewal.status.error">Не удалось загрузить варианты продления.</div>
+                        <button class="subscription-settings-retry" id="subscriptionRenewalRetry" type="button" data-i18n="subscription_renewal.action.retry">Повторить</button>
+                    </div>
+                    <div class="subscription-renewal-content hidden" id="subscriptionRenewalContent">
+                        <div class="subscription-renewal-info-note" data-i18n="subscription_renewal.subtitle">Выберите период продления и оплатите.</div>
+                        <div class="subscription-renewal-periods" id="subscriptionRenewalPeriodList"></div>
+                        <div class="subscription-renewal-summary-card hidden" id="subscriptionRenewalSummaryCard">
+                            <div class="subscription-renewal-summary-header">
+                                <div class="subscription-renewal-summary-label" data-i18n="subscription_renewal.summary.total">К оплате</div>
+                                <div class="subscription-renewal-summary-prices">
+                                    <div class="subscription-renewal-price-original hidden" id="subscriptionRenewalPriceOriginal">—</div>
+                                    <div class="subscription-renewal-price-current" id="subscriptionRenewalPriceCurrent">—</div>
+                                </div>
+                            </div>
+                            <div class="subscription-renewal-price-per-month hidden" id="subscriptionRenewalPricePerMonth">—</div>
+                            <div class="subscription-renewal-discount-badge hidden" id="subscriptionRenewalPriceDiscount">—</div>
+                            <div class="subscription-renewal-info-note" id="subscriptionRenewalInfoNote" data-i18n="subscription_renewal.summary.includes_discounts">Стоимость указана с учётом всех скидок.</div>
+                        </div>
+                        <div class="subscription-renewal-actions">
+                            <button class="btn btn-primary" id="subscriptionRenewalSubmit" type="button" data-i18n="subscription_renewal.action.submit" disabled>Продлить</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Subscription Settings -->
             <div class="card expandable subscription-settings-card hidden" id="subscriptionSettingsCard">
                 <div class="card-header">
@@ -4156,6 +4392,7 @@
         });
 
         setupSubscriptionSettingsEvents();
+        setupSubscriptionRenewalEvents();
         setupSubscriptionPurchaseEvents();
 
         const themeToggle = document.getElementById('themeToggle');
@@ -4378,6 +4615,33 @@
                 'subscription_purchase.breakdown.promo': 'Promo discount',
                 'subscription_purchase.breakdown.total': 'Total',
                 'card.balance.title': 'Balance',
+                'subscription_renewal.title': 'Renew subscription',
+                'subscription_renewal.subtitle': 'Extend access for the selected period.',
+                'subscription_renewal.status.loading': 'Loading renewal options…',
+                'subscription_renewal.status.error': 'Unable to load renewal options.',
+                'subscription_renewal.status.empty': 'No renewal options available right now.',
+                'subscription_renewal.status.autopay': 'Autopay is enabled — the subscription will renew automatically.',
+                'subscription_renewal.action.retry': 'Try again',
+                'subscription_renewal.action.submit': 'Renew',
+                'subscription_renewal.period.days': '{days} days',
+                'subscription_renewal.period.unknown': 'Custom period',
+                'subscription_renewal.summary.total': 'To pay',
+                'subscription_renewal.summary.per_month': '{amount}/month',
+                'subscription_renewal.summary.includes_discounts': 'The amount already includes all discounts.',
+                'subscription_renewal.summary.discount': 'Discount: −{percent}%',
+                'subscription_renewal.discount.promogroup': 'Promo group · −{percent}%',
+                'subscription_renewal.discount.offer': 'Promo offer · −{percent}%',
+                'subscription_renewal.discount.until': 'until {date}',
+                'subscription_renewal.confirm.title': 'Confirm renewal',
+                'subscription_renewal.confirm.message': 'You will be charged {amount}.',
+                'subscription_renewal.confirm.message_period': 'You will be charged {amount} for {period}.',
+                'subscription_renewal.confirm.submit': 'Renew',
+                'subscription_renewal.confirm.cancel': 'Cancel',
+                'subscription_renewal.success': 'Subscription renewed successfully.',
+                'subscription_renewal.error.generic': 'Unable to renew the subscription. Please try again later.',
+                'subscription_renewal.error.selection': 'Select a renewal period to continue.',
+                'subscription_renewal.error.unauthorized': 'Authorization failed. Please reopen the mini app from Telegram.',
+                'subscription_renewal.error.insufficient': 'Not enough funds to renew the subscription.',
                 'subscription_settings.title': 'Subscription settings',
                 'subscription_settings.summary.servers': 'Servers: {count}',
                 'subscription_settings.summary.servers_one': 'Server: {count}',
@@ -4704,6 +4968,33 @@
                 'subscription_purchase.breakdown.promo': 'Промо скидка',
                 'subscription_purchase.breakdown.total': 'Итого',
                 'card.balance.title': 'Баланс',
+                'subscription_renewal.title': 'Продление подписки',
+                'subscription_renewal.subtitle': 'Выберите период продления и оплатите.',
+                'subscription_renewal.status.loading': 'Загружаем варианты продления…',
+                'subscription_renewal.status.error': 'Не удалось загрузить варианты продления.',
+                'subscription_renewal.status.empty': 'Доступных вариантов продления пока нет.',
+                'subscription_renewal.status.autopay': 'Автоплатёж включён — подписка продлится автоматически.',
+                'subscription_renewal.action.retry': 'Повторить',
+                'subscription_renewal.action.submit': 'Продлить',
+                'subscription_renewal.period.days': '{days} дней',
+                'subscription_renewal.period.unknown': 'Особый период',
+                'subscription_renewal.summary.total': 'К оплате',
+                'subscription_renewal.summary.per_month': '{amount}/мес',
+                'subscription_renewal.summary.includes_discounts': 'Стоимость указана с учётом всех скидок.',
+                'subscription_renewal.summary.discount': 'Скидка: −{percent}%',
+                'subscription_renewal.discount.promogroup': 'Промогруппа · −{percent}%',
+                'subscription_renewal.discount.offer': 'Промопредложение · −{percent}%',
+                'subscription_renewal.discount.until': 'до {date}',
+                'subscription_renewal.confirm.title': 'Подтвердите продление',
+                'subscription_renewal.confirm.message': 'Будет списано {amount}.',
+                'subscription_renewal.confirm.message_period': 'Будет списано {amount} за {period}.',
+                'subscription_renewal.confirm.submit': 'Продлить',
+                'subscription_renewal.confirm.cancel': 'Отменить',
+                'subscription_renewal.success': 'Подписка успешно продлена.',
+                'subscription_renewal.error.generic': 'Не удалось продлить подписку. Попробуйте позже.',
+                'subscription_renewal.error.selection': 'Выберите период продления.',
+                'subscription_renewal.error.unauthorized': 'Не удалось выполнить авторизацию. Откройте мини-приложение из Telegram.',
+                'subscription_renewal.error.insufficient': 'Недостаточно средств для продления подписки.',
                 'subscription_settings.title': 'Настройка подписки',
                 'subscription_settings.summary.servers': 'Серверов: {count}',
                 'subscription_settings.summary.servers_one': 'Сервер: {count}',
@@ -5049,6 +5340,15 @@
             devices: null,
         };
 
+        let subscriptionRenewalData = null;
+        let subscriptionRenewalPromise = null;
+        let subscriptionRenewalError = null;
+        let subscriptionRenewalLoading = false;
+        let subscriptionRenewalSubmitting = false;
+        const subscriptionRenewalSelections = {
+            periodId: null,
+        };
+
         let subscriptionPurchaseData = null;
         let subscriptionPurchasePreview = null;
         let subscriptionPurchasePromise = null;
@@ -5904,6 +6204,8 @@
             userData.subscriptionCryptoLink = userData.subscription_crypto_link || null;
             userData.referral = userData.referral || null;
 
+            resetSubscriptionRenewalState();
+
             const normalizedPurchaseUrl = normalizeUrl(
                 userData.subscription_purchase_url
                 || userData.subscriptionPurchaseUrl
@@ -6111,6 +6413,7 @@
             }
 
             renderSubscriptionPurchaseCard();
+            renderSubscriptionRenewalCard();
             renderSubscriptionSettingsCard();
             renderPromoOffers();
             renderPromoSection();
@@ -10328,6 +10631,941 @@
             renderSubscriptionSettingsDevices(subscriptionSettingsData);
         }
 
+        function resetSubscriptionRenewalState() {
+            subscriptionRenewalData = null;
+            subscriptionRenewalPromise = null;
+            subscriptionRenewalError = null;
+            subscriptionRenewalLoading = false;
+            subscriptionRenewalSubmitting = false;
+            subscriptionRenewalSelections.periodId = null;
+        }
+
+        function resetSubscriptionRenewalSelection(data) {
+            subscriptionRenewalSelections.periodId = null;
+            const periods = ensureArray(data?.periods);
+            const first = periods.find(period => period && period.id !== undefined && period.id !== null);
+            if (first) {
+                subscriptionRenewalSelections.periodId = String(first.id);
+            }
+        }
+
+        function normalizeSubscriptionRenewalData(payload) {
+            if (!payload || typeof payload !== 'object') {
+                return null;
+            }
+
+            const rootCandidate = payload.renewal || payload.data || payload.result || payload;
+            const root = typeof rootCandidate === 'object' && !Array.isArray(rootCandidate)
+                ? rootCandidate
+                : { periods: Array.isArray(rootCandidate) ? rootCandidate : [] };
+
+            const currencyCode = (root.currency || payload.currency || userData?.balance_currency || 'RUB')
+                .toString()
+                .toUpperCase();
+
+            let periodsSource = root.periods
+                || root.options
+                || root.available_periods
+                || root.availablePeriods
+                || root.entries;
+            if (!periodsSource && Array.isArray(payload.periods)) {
+                periodsSource = payload.periods;
+            }
+            if (!periodsSource && Array.isArray(root)) {
+                periodsSource = root;
+            }
+
+            const periods = ensureArray(periodsSource).map(option => {
+                if (!option || typeof option !== 'object') {
+                    return null;
+                }
+
+                const id = option.id
+                    ?? option.code
+                    ?? option.period_id
+                    ?? option.periodId
+                    ?? option.days
+                    ?? option.period_days
+                    ?? option.period;
+                const days = coercePositiveInt(
+                    option.days
+                    ?? option.period_days
+                    ?? option.period
+                    ?? option.duration_days,
+                    null,
+                );
+                let months = coercePositiveInt(option.months ?? option.period_months, null);
+                if (!months && days) {
+                    const approx = Math.round(days / 30);
+                    months = approx > 0 ? approx : null;
+                }
+
+                const priceKopeks = coercePositiveInt(
+                    option.price_kopeks
+                    ?? option.priceKopeks
+                    ?? option.final_price_kopeks
+                    ?? option.finalPriceKopeks
+                    ?? option.price
+                    ?? null,
+                    null,
+                );
+                const originalPriceKopeks = coercePositiveInt(
+                    option.original_price_kopeks
+                    ?? option.originalPriceKopeks
+                    ?? option.base_price_kopeks
+                    ?? option.basePriceKopeks
+                    ?? null,
+                    null,
+                );
+                const perMonthPriceKopeks = coercePositiveInt(
+                    option.per_month_price_kopeks
+                    ?? option.perMonthPriceKopeks
+                    ?? option.monthly_price_kopeks
+                    ?? option.monthlyPriceKopeks
+                    ?? null,
+                    null,
+                );
+
+                const discountPercent = coercePositiveInt(
+                    option.total_discount_percent
+                    ?? option.totalDiscountPercent
+                    ?? option.discount_percent
+                    ?? option.discountPercent,
+                    null,
+                );
+                const groupDiscount = coercePositiveInt(
+                    option.promo_group_discount_percent
+                    ?? option.promoGroupDiscountPercent,
+                    null,
+                );
+                const offerDiscount = coercePositiveInt(
+                    option.promo_offer_discount_percent
+                    ?? option.promoOfferDiscountPercent,
+                    null,
+                );
+
+                return {
+                    id: id !== undefined && id !== null ? String(id) : days !== null ? String(days) : null,
+                    days,
+                    months,
+                    label: option.label || option.title || null,
+                    priceKopeks,
+                    priceLabel: option.price_label || option.priceLabel || (priceKopeks !== null ? formatPriceFromKopeks(priceKopeks, currencyCode) : ''),
+                    originalPriceKopeks,
+                    originalPriceLabel: option.original_price_label || option.originalPriceLabel
+                        || (originalPriceKopeks !== null ? formatPriceFromKopeks(originalPriceKopeks, currencyCode) : ''),
+                    perMonthPriceKopeks,
+                    perMonthPriceLabel: option.per_month_price_label || option.perMonthPriceLabel || '',
+                    discountPercent,
+                    groupDiscount,
+                    offerDiscount,
+                    totalDiscount: discountPercent || null,
+                };
+            }).filter(Boolean);
+
+            return {
+                raw: payload,
+                subscriptionId: root.subscription_id
+                    ?? root.subscriptionId
+                    ?? payload.subscription_id
+                    ?? payload.subscriptionId
+                    ?? userData?.subscription_id
+                    ?? userData?.subscriptionId
+                    ?? null,
+                currency: currencyCode,
+                periods,
+                statusMessage: root.status_message || root.statusMessage || null,
+                autopayEnabled: coerceBoolean(
+                    root.autopay_enabled
+                    ?? root.autopayEnabled
+                    ?? userData?.autopay_enabled
+                    ?? false,
+                    false,
+                ),
+                promoGroupDiscountPercent: coercePositiveInt(
+                    root.promo_group_discount_percent
+                    ?? root.promoGroupDiscountPercent,
+                    null,
+                ),
+                promoOfferDiscountPercent: coercePositiveInt(
+                    root.promo_offer_discount_percent
+                    ?? root.promoOfferDiscountPercent,
+                    null,
+                ),
+                promoOfferExpiresAt: root.promo_offer_expires_at || root.promoOfferExpiresAt || null,
+            };
+        }
+
+        function ensureSubscriptionRenewalLoaded(options = {}) {
+            const { force = false } = options;
+
+            if (!hasPaidSubscription()) {
+                resetSubscriptionRenewalState();
+                renderSubscriptionRenewalCard();
+                return Promise.resolve(null);
+            }
+
+            if (!force && subscriptionRenewalData && !subscriptionRenewalLoading && !subscriptionRenewalError) {
+                return Promise.resolve(subscriptionRenewalData);
+            }
+
+            if (subscriptionRenewalPromise && !force) {
+                return subscriptionRenewalPromise;
+            }
+
+            const initData = tg.initData || '';
+            if (!initData) {
+                const message = t('subscription_renewal.error.unauthorized');
+                const error = createError('Authorization error', message === 'subscription_renewal.error.unauthorized'
+                    ? 'Authorization failed. Please reopen the mini app from Telegram.'
+                    : message);
+                subscriptionRenewalError = error;
+                renderSubscriptionRenewalCard();
+                return Promise.reject(error);
+            }
+
+            subscriptionRenewalLoading = true;
+            subscriptionRenewalError = null;
+            renderSubscriptionRenewalCard();
+
+            const subscriptionId = subscriptionRenewalData?.subscriptionId
+                ?? subscriptionSettingsData?.subscriptionId
+                ?? userData?.subscription_id
+                ?? userData?.subscriptionId
+                ?? null;
+
+            const requestPayload = { initData };
+            if (subscriptionId) {
+                requestPayload.subscription_id = subscriptionId;
+                requestPayload.subscriptionId = subscriptionId;
+            }
+
+            const request = fetch('/miniapp/subscription/renewal/options', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(requestPayload),
+            }).then(async response => {
+                const body = await parseJsonSafe(response);
+                if (!response.ok || (body && body.success === false)) {
+                    const message = extractRenewalError(body, response.status);
+                    throw createError('Subscription renewal error', message, response.status);
+                }
+
+                const normalized = normalizeSubscriptionRenewalData(body);
+                subscriptionRenewalData = normalized;
+                subscriptionRenewalLoading = false;
+                subscriptionRenewalError = null;
+                subscriptionRenewalPromise = null;
+                resetSubscriptionRenewalSelection(normalized);
+                renderSubscriptionRenewalCard();
+                return normalized;
+            }).catch(error => {
+                subscriptionRenewalLoading = false;
+                subscriptionRenewalPromise = null;
+                subscriptionRenewalError = error;
+                renderSubscriptionRenewalCard();
+                throw error;
+            });
+
+            subscriptionRenewalPromise = request;
+            return request;
+        }
+
+        function getSelectedSubscriptionRenewalPeriod(data) {
+            const periods = ensureArray(data?.periods);
+            if (!periods.length) {
+                return null;
+            }
+
+            const selectedId = subscriptionRenewalSelections.periodId;
+            if (selectedId) {
+                const found = periods.find(period => String(period.id) === String(selectedId));
+                if (found) {
+                    return found;
+                }
+            }
+
+            return periods[0] || null;
+        }
+
+        function formatRenewalPeriodLabel(period) {
+            if (!period) {
+                return '';
+            }
+            if (period.label) {
+                return period.label;
+            }
+            if (period.months) {
+                const monthsLabel = formatMonthsLabel(period.months);
+                if (monthsLabel) {
+                    return monthsLabel;
+                }
+            }
+            if (period.days) {
+                const template = t('subscription_renewal.period.days');
+                if (template && template !== 'subscription_renewal.period.days' && template.includes('{days}')) {
+                    return template.replace('{days}', String(period.days));
+                }
+                return `${period.days} days`;
+            }
+            const fallback = t('subscription_renewal.period.unknown');
+            return fallback && fallback !== 'subscription_renewal.period.unknown'
+                ? fallback
+                : 'Custom period';
+        }
+
+        function getActivePromoOfferContext(data) {
+            const percent = coercePositiveInt(
+                data?.promoOfferDiscountPercent
+                ?? subscriptionRenewalData?.promoOfferDiscountPercent
+                ?? userData?.promo_offer_discount_percent,
+                0,
+            );
+            if (!percent) {
+                return null;
+            }
+
+            const expiresRaw = data?.promoOfferExpiresAt
+                ?? subscriptionRenewalData?.promoOfferExpiresAt
+                ?? userData?.promo_offer_discount_expires_at
+                ?? null;
+            const expiresAt = parseDate(expiresRaw);
+            if (expiresAt && expiresAt.getTime() <= Date.now()) {
+                return null;
+            }
+
+            return { percent, expiresAt };
+        }
+
+        function renderSubscriptionRenewalHeaderSummary(data) {
+            const summary = document.getElementById('subscriptionRenewalSummary');
+            if (!summary) {
+                return;
+            }
+
+            summary.innerHTML = '';
+
+            const chips = [];
+
+            const groupDiscount = coercePositiveInt(
+                data?.promoGroupDiscountPercent,
+                null,
+            ) ?? computeTopPromoDiscount(userData?.promo_group);
+            if (groupDiscount) {
+                const template = t('subscription_renewal.discount.promogroup');
+                const label = template && template !== 'subscription_renewal.discount.promogroup'
+                    ? template.replace('{percent}', String(groupDiscount))
+                    : `Promo group · −${groupDiscount}%`;
+                chips.push(label);
+            }
+
+            const activeOffer = getActivePromoOfferContext(data);
+            if (activeOffer) {
+                const template = t('subscription_renewal.discount.offer');
+                let label = template && template !== 'subscription_renewal.discount.offer'
+                    ? template.replace('{percent}', String(activeOffer.percent))
+                    : `Promo offer · −${activeOffer.percent}%`;
+                if (activeOffer.expiresAt) {
+                    const formattedDate = formatDateTime(activeOffer.expiresAt);
+                    if (formattedDate) {
+                        const untilTemplate = t('subscription_renewal.discount.until');
+                        const untilLabel = untilTemplate && untilTemplate !== 'subscription_renewal.discount.until'
+                            ? untilTemplate.replace('{date}', formattedDate)
+                            : `until ${formattedDate}`;
+                        label = `${label} · ${untilLabel}`;
+                    }
+                }
+                chips.push(label);
+            }
+
+            if (chips.length) {
+                chips.forEach(text => {
+                    const chip = document.createElement('span');
+                    chip.className = 'subscription-renewal-chip';
+                    chip.textContent = text;
+                    summary.appendChild(chip);
+                });
+                summary.classList.remove('hidden');
+            } else {
+                summary.classList.add('hidden');
+            }
+        }
+
+        function renderSubscriptionRenewalPeriods(data) {
+            const container = document.getElementById('subscriptionRenewalPeriodList');
+            if (!container) {
+                return;
+            }
+
+            container.innerHTML = '';
+
+            const periods = ensureArray(data?.periods);
+            if (!periods.length) {
+                return;
+            }
+
+            if (!subscriptionRenewalSelections.periodId) {
+                resetSubscriptionRenewalSelection(data);
+            }
+
+            periods.forEach(period => {
+                if (!period || period.id === null || period.id === undefined) {
+                    return;
+                }
+
+                const isSelected = String(period.id) === String(subscriptionRenewalSelections.periodId);
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'subscription-renewal-period';
+                if (isSelected) {
+                    button.classList.add('active');
+                }
+                if (subscriptionRenewalSubmitting) {
+                    button.classList.add('disabled');
+                    button.disabled = true;
+                }
+
+                const info = document.createElement('div');
+                info.className = 'subscription-renewal-period-info';
+
+                const title = document.createElement('div');
+                title.className = 'subscription-renewal-period-title';
+                title.textContent = formatRenewalPeriodLabel(period);
+                info.appendChild(title);
+
+                const meta = document.createElement('div');
+                meta.className = 'subscription-renewal-period-meta';
+
+                const groupDiscount = coercePositiveInt(period.groupDiscount, null)
+                    ?? coercePositiveInt(data?.promoGroupDiscountPercent, null)
+                    ?? computeTopPromoDiscount(userData?.promo_group);
+                if (groupDiscount) {
+                    const template = t('subscription_renewal.discount.promogroup');
+                    const label = template && template !== 'subscription_renewal.discount.promogroup'
+                        ? template.replace('{percent}', String(groupDiscount))
+                        : `Promo group · −${groupDiscount}%`;
+                    const span = document.createElement('span');
+                    span.textContent = label;
+                    meta.appendChild(span);
+                }
+
+                const offerDiscount = coercePositiveInt(period.offerDiscount, null)
+                    ?? coercePositiveInt(data?.promoOfferDiscountPercent, null)
+                    ?? coercePositiveInt(userData?.promo_offer_discount_percent, null);
+                if (offerDiscount) {
+                    const template = t('subscription_renewal.discount.offer');
+                    const label = template && template !== 'subscription_renewal.discount.offer'
+                        ? template.replace('{percent}', String(offerDiscount))
+                        : `Promo offer · −${offerDiscount}%`;
+                    const span = document.createElement('span');
+                    span.textContent = label;
+                    meta.appendChild(span);
+                }
+
+                if (meta.childElementCount) {
+                    info.appendChild(meta);
+                }
+
+                button.appendChild(info);
+
+                const priceWrapper = document.createElement('div');
+                priceWrapper.className = 'subscription-renewal-price';
+
+                const priceLabel = period.priceLabel || (period.priceKopeks !== null
+                    ? formatPriceFromKopeks(period.priceKopeks, data.currency)
+                    : '');
+                const originalLabel = period.originalPriceLabel || (period.originalPriceKopeks !== null
+                    ? formatPriceFromKopeks(period.originalPriceKopeks, data.currency)
+                    : '');
+
+                if (originalLabel && originalLabel !== priceLabel) {
+                    const originalEl = document.createElement('div');
+                    originalEl.className = 'subscription-renewal-price-original';
+                    originalEl.textContent = originalLabel;
+                    priceWrapper.appendChild(originalEl);
+                }
+
+                const currentEl = document.createElement('div');
+                currentEl.className = 'subscription-renewal-price-current';
+                currentEl.textContent = priceLabel || '—';
+                priceWrapper.appendChild(currentEl);
+
+                const perMonthLabel = period.perMonthPriceLabel || (period.perMonthPriceKopeks !== null
+                    ? (() => {
+                        const formatted = formatPriceFromKopeks(period.perMonthPriceKopeks, data.currency);
+                        const template = t('subscription_renewal.summary.per_month');
+                        return template && template !== 'subscription_renewal.summary.per_month'
+                            ? template.replace('{amount}', formatted)
+                            : `${formatted}/month`;
+                    })()
+                    : '');
+                if (perMonthLabel) {
+                    const perMonthEl = document.createElement('div');
+                    perMonthEl.className = 'subscription-renewal-price-per-month';
+                    perMonthEl.textContent = perMonthLabel;
+                    priceWrapper.appendChild(perMonthEl);
+                }
+
+                if (coercePositiveInt(period.totalDiscount, null)) {
+                    const badge = document.createElement('div');
+                    badge.className = 'subscription-renewal-discount-badge';
+                    badge.textContent = `−${coercePositiveInt(period.totalDiscount, null)}%`;
+                    priceWrapper.appendChild(badge);
+                }
+
+                button.appendChild(priceWrapper);
+
+                if (!subscriptionRenewalSubmitting) {
+                    button.addEventListener('click', () => {
+                        handleSubscriptionRenewalPeriodSelect(period.id);
+                    });
+                }
+
+                container.appendChild(button);
+            });
+        }
+
+        function handleSubscriptionRenewalPeriodSelect(periodId) {
+            if (subscriptionRenewalSubmitting) {
+                return;
+            }
+            const idString = String(periodId);
+            if (subscriptionRenewalSelections.periodId === idString) {
+                return;
+            }
+            subscriptionRenewalSelections.periodId = idString;
+            renderSubscriptionRenewalCard();
+        }
+
+        function renderSubscriptionRenewalPriceSummary(data) {
+            const card = document.getElementById('subscriptionRenewalSummaryCard');
+            const currentEl = document.getElementById('subscriptionRenewalPriceCurrent');
+            const originalEl = document.getElementById('subscriptionRenewalPriceOriginal');
+            const perMonthEl = document.getElementById('subscriptionRenewalPricePerMonth');
+            const discountEl = document.getElementById('subscriptionRenewalPriceDiscount');
+            const noteEl = document.getElementById('subscriptionRenewalInfoNote');
+
+            if (!card || !currentEl || !originalEl || !perMonthEl || !discountEl) {
+                return;
+            }
+
+            const period = getSelectedSubscriptionRenewalPeriod(data);
+            if (!period) {
+                card.classList.add('hidden');
+                return;
+            }
+
+            card.classList.remove('hidden');
+
+            const currentLabel = period.priceLabel || (period.priceKopeks !== null
+                ? formatPriceFromKopeks(period.priceKopeks, data.currency)
+                : '');
+            currentEl.textContent = currentLabel || '—';
+
+            const originalLabel = period.originalPriceLabel || (period.originalPriceKopeks !== null
+                ? formatPriceFromKopeks(period.originalPriceKopeks, data.currency)
+                : '');
+            if (originalLabel && originalLabel !== currentLabel) {
+                originalEl.textContent = originalLabel;
+                originalEl.classList.remove('hidden');
+            } else {
+                originalEl.classList.add('hidden');
+            }
+
+            const perMonthLabel = period.perMonthPriceLabel || (period.perMonthPriceKopeks !== null
+                ? (() => {
+                    const formatted = formatPriceFromKopeks(period.perMonthPriceKopeks, data.currency);
+                    const template = t('subscription_renewal.summary.per_month');
+                    return template && template !== 'subscription_renewal.summary.per_month'
+                        ? template.replace('{amount}', formatted)
+                        : `${formatted}/month`;
+                })()
+                : '');
+            if (perMonthLabel) {
+                perMonthEl.textContent = perMonthLabel;
+                perMonthEl.classList.remove('hidden');
+            } else {
+                perMonthEl.classList.add('hidden');
+            }
+
+            const discountPercent = coercePositiveInt(period.totalDiscount, null)
+                ?? coercePositiveInt(period.discountPercent, null);
+            if (discountPercent) {
+                const template = t('subscription_renewal.summary.discount');
+                discountEl.textContent = template && template !== 'subscription_renewal.summary.discount'
+                    ? template.replace('{percent}', String(discountPercent))
+                    : `Discount: −${discountPercent}%`;
+                discountEl.classList.remove('hidden');
+            } else {
+                discountEl.classList.add('hidden');
+            }
+
+            if (noteEl) {
+                const noteKey = 'subscription_renewal.summary.includes_discounts';
+                const noteValue = t(noteKey);
+                noteEl.textContent = noteValue && noteValue !== noteKey
+                    ? noteValue
+                    : 'The amount already includes all discounts.';
+            }
+        }
+
+        function resolveRenewalErrorMessage(error, fallbackKey = 'subscription_renewal.error.generic') {
+            if (!error) {
+                const fallback = t(fallbackKey);
+                return fallback && fallback !== fallbackKey ? fallback : 'Unable to renew the subscription. Please try again later.';
+            }
+            if (typeof error === 'string') {
+                return error;
+            }
+            if (typeof error.message === 'string' && error.message.trim()) {
+                return error.message;
+            }
+            if (error.detail) {
+                if (typeof error.detail === 'string' && error.detail.trim()) {
+                    return error.detail;
+                }
+                if (typeof error.detail.message === 'string' && error.detail.message.trim()) {
+                    return error.detail.message;
+                }
+            }
+            if (error.status === 401) {
+                const label = t('subscription_renewal.error.unauthorized');
+                return label && label !== 'subscription_renewal.error.unauthorized'
+                    ? label
+                    : 'Authorization failed. Please reopen the mini app from Telegram.';
+            }
+            if (error.status === 402) {
+                const label = t('subscription_renewal.error.insufficient');
+                return label && label !== 'subscription_renewal.error.insufficient'
+                    ? label
+                    : 'Not enough funds to renew the subscription.';
+            }
+            const fallback = t(fallbackKey);
+            return fallback && fallback !== fallbackKey ? fallback : 'Unable to renew the subscription. Please try again later.';
+        }
+
+        function extractRenewalError(payload, status) {
+            if (status === 401) {
+                const label = t('subscription_renewal.error.unauthorized');
+                return label && label !== 'subscription_renewal.error.unauthorized'
+                    ? label
+                    : 'Authorization failed. Please reopen the mini app from Telegram.';
+            }
+            if (status === 402) {
+                const label = t('subscription_renewal.error.insufficient');
+                return label && label !== 'subscription_renewal.error.insufficient'
+                    ? label
+                    : 'Not enough funds to renew the subscription.';
+            }
+            if (!payload || typeof payload !== 'object') {
+                const fallback = t('subscription_renewal.error.generic');
+                return fallback && fallback !== 'subscription_renewal.error.generic'
+                    ? fallback
+                    : 'Unable to renew the subscription. Please try again later.';
+            }
+            if (typeof payload.detail === 'string') {
+                return payload.detail;
+            }
+            if (payload.detail && typeof payload.detail === 'object') {
+                if (typeof payload.detail.message === 'string') {
+                    return payload.detail.message;
+                }
+                if (typeof payload.detail.error === 'string') {
+                    return payload.detail.error;
+                }
+            }
+            if (typeof payload.message === 'string') {
+                return payload.message;
+            }
+            if (typeof payload.error === 'string') {
+                return payload.error;
+            }
+            const fallback = t('subscription_renewal.error.generic');
+            return fallback && fallback !== 'subscription_renewal.error.generic'
+                ? fallback
+                : 'Unable to renew the subscription. Please try again later.';
+        }
+
+        function renderSubscriptionRenewalCard() {
+            const card = document.getElementById('subscriptionRenewalCard');
+            if (!card) {
+                return;
+            }
+
+            const shouldShow = hasPaidSubscription();
+            card.classList.toggle('hidden', !shouldShow);
+            if (!shouldShow) {
+                return;
+            }
+
+            const loadingBlock = document.getElementById('subscriptionRenewalLoading');
+            const errorBlock = document.getElementById('subscriptionRenewalError');
+            const contentBlock = document.getElementById('subscriptionRenewalContent');
+            const statusText = document.getElementById('subscriptionRenewalStatus');
+            const submitButton = document.getElementById('subscriptionRenewalSubmit');
+
+            if (subscriptionRenewalLoading) {
+                loadingBlock?.classList.remove('hidden');
+                errorBlock?.classList.add('hidden');
+                contentBlock?.classList.add('hidden');
+                if (statusText) {
+                    const label = t('subscription_renewal.status.loading');
+                    statusText.textContent = label && label !== 'subscription_renewal.status.loading'
+                        ? label
+                        : 'Loading renewal options…';
+                    statusText.classList.remove('hidden');
+                }
+                if (submitButton) {
+                    submitButton.disabled = true;
+                }
+                return;
+            }
+
+            loadingBlock?.classList.add('hidden');
+
+            if (subscriptionRenewalError) {
+                contentBlock?.classList.add('hidden');
+                if (statusText) {
+                    statusText.classList.add('hidden');
+                }
+                if (submitButton) {
+                    submitButton.disabled = true;
+                }
+                if (errorBlock) {
+                    const errorText = document.getElementById('subscriptionRenewalErrorText');
+                    if (errorText) {
+                        errorText.textContent = resolveRenewalErrorMessage(subscriptionRenewalError);
+                    }
+                    errorBlock.classList.remove('hidden');
+                }
+                return;
+            }
+
+            errorBlock?.classList.add('hidden');
+
+            if (!subscriptionRenewalData) {
+                ensureSubscriptionRenewalLoaded().catch(error => {
+                    console.warn('Failed to load subscription renewal options:', error);
+                });
+                contentBlock?.classList.add('hidden');
+                if (statusText) {
+                    const label = t('subscription_renewal.status.loading');
+                    statusText.textContent = label && label !== 'subscription_renewal.status.loading'
+                        ? label
+                        : 'Loading renewal options…';
+                    statusText.classList.remove('hidden');
+                }
+                if (submitButton) {
+                    submitButton.disabled = true;
+                }
+                return;
+            }
+
+            renderSubscriptionRenewalHeaderSummary(subscriptionRenewalData);
+
+            const periods = ensureArray(subscriptionRenewalData.periods);
+            if (!periods.length) {
+                contentBlock?.classList.add('hidden');
+                if (statusText) {
+                    const label = t('subscription_renewal.status.empty');
+                    statusText.textContent = label && label !== 'subscription_renewal.status.empty'
+                        ? label
+                        : 'No renewal options available right now.';
+                    statusText.classList.remove('hidden');
+                }
+                if (submitButton) {
+                    submitButton.disabled = true;
+                }
+                return;
+            }
+
+            contentBlock?.classList.remove('hidden');
+
+            renderSubscriptionRenewalPeriods(subscriptionRenewalData);
+            renderSubscriptionRenewalPriceSummary(subscriptionRenewalData);
+
+            let statusMessage = subscriptionRenewalData.statusMessage || '';
+            if (!statusMessage && subscriptionRenewalData.autopayEnabled) {
+                const label = t('subscription_renewal.status.autopay');
+                statusMessage = label && label !== 'subscription_renewal.status.autopay'
+                    ? label
+                    : 'Autopay is enabled — the subscription will renew automatically.';
+            }
+
+            if (statusText) {
+                if (statusMessage) {
+                    statusText.textContent = statusMessage;
+                    statusText.classList.remove('hidden');
+                } else {
+                    statusText.classList.add('hidden');
+                }
+            }
+
+            const selectedPeriod = getSelectedSubscriptionRenewalPeriod(subscriptionRenewalData);
+            if (submitButton) {
+                submitButton.disabled = !selectedPeriod || subscriptionRenewalSubmitting;
+            }
+        }
+
+        function setupSubscriptionRenewalEvents() {
+            document.getElementById('subscriptionRenewalRetry')?.addEventListener('click', () => {
+                ensureSubscriptionRenewalLoaded({ force: true }).catch(error => {
+                    console.warn('Failed to reload renewal options:', error);
+                });
+            });
+
+            document.getElementById('subscriptionRenewalSubmit')?.addEventListener('click', submitSubscriptionRenewal);
+
+            const card = document.getElementById('subscriptionRenewalCard');
+            const header = card?.querySelector('.card-header');
+            if (card && header) {
+                header.addEventListener('click', () => {
+                    if (card.classList.contains('expanded')) {
+                        ensureSubscriptionRenewalLoaded().catch(error => {
+                            console.warn('Failed to load renewal options:', error);
+                        });
+                    }
+                });
+            }
+        }
+
+        async function submitSubscriptionRenewal() {
+            if (subscriptionRenewalSubmitting) {
+                return;
+            }
+
+            const data = subscriptionRenewalData;
+            const period = getSelectedSubscriptionRenewalPeriod(data);
+            if (!data || !period) {
+                const message = t('subscription_renewal.error.selection');
+                showPopup(message && message !== 'subscription_renewal.error.selection'
+                    ? message
+                    : 'Select a renewal period to continue.');
+                return;
+            }
+
+            const currency = data.currency || userData?.balance_currency || 'RUB';
+            const amountLabel = period.priceLabel || (period.priceKopeks !== null
+                ? formatPriceFromKopeks(period.priceKopeks, currency)
+                : '');
+            const periodLabel = formatRenewalPeriodLabel(period);
+
+            const confirmTitleKey = 'subscription_renewal.confirm.title';
+            const confirmTitleValue = t(confirmTitleKey);
+            const title = confirmTitleValue && confirmTitleValue !== confirmTitleKey
+                ? confirmTitleValue
+                : 'Confirm renewal';
+
+            const messageKey = amountLabel && periodLabel
+                ? 'subscription_renewal.confirm.message_period'
+                : 'subscription_renewal.confirm.message';
+            const messageTemplate = t(messageKey);
+            let message = '';
+            if (messageTemplate && messageTemplate !== messageKey) {
+                message = messageTemplate
+                    .replace('{amount}', amountLabel || '')
+                    .replace('{period}', periodLabel || '');
+            } else if (amountLabel && periodLabel) {
+                message = `You will be charged ${amountLabel} for ${periodLabel}.`;
+            } else if (amountLabel) {
+                message = `You will be charged ${amountLabel}.`;
+            }
+
+            const confirmTextKey = 'subscription_renewal.confirm.submit';
+            const confirmTextValue = t(confirmTextKey);
+            const confirmText = confirmTextValue && confirmTextValue !== confirmTextKey
+                ? confirmTextValue
+                : 'Renew';
+
+            const cancelTextKey = 'subscription_renewal.confirm.cancel';
+            const cancelTextValue = t(cancelTextKey);
+            const cancelText = cancelTextValue && cancelTextValue !== cancelTextKey
+                ? cancelTextValue
+                : 'Cancel';
+
+            const confirmed = await showConfirmationPopup({
+                title,
+                message,
+                confirmText,
+                cancelText,
+                destructive: true,
+            });
+            if (!confirmed) {
+                return;
+            }
+
+            const initData = tg.initData || '';
+            if (!initData) {
+                const errorMessage = t('subscription_renewal.error.unauthorized');
+                showPopup(errorMessage && errorMessage !== 'subscription_renewal.error.unauthorized'
+                    ? errorMessage
+                    : 'Authorization failed. Please reopen the mini app from Telegram.');
+                return;
+            }
+
+            subscriptionRenewalSubmitting = true;
+            renderSubscriptionRenewalCard();
+
+            const subscriptionId = data.subscriptionId
+                ?? subscriptionSettingsData?.subscriptionId
+                ?? userData?.subscription_id
+                ?? userData?.subscriptionId
+                ?? null;
+
+            const requestPayload = {
+                initData,
+                period_id: period.id,
+                periodId: period.id,
+            };
+            if (period.days !== null && period.days !== undefined) {
+                requestPayload.period_days = period.days;
+                requestPayload.periodDays = period.days;
+            }
+            if (period.months !== null && period.months !== undefined) {
+                requestPayload.months = period.months;
+            }
+            if (subscriptionId) {
+                requestPayload.subscription_id = subscriptionId;
+                requestPayload.subscriptionId = subscriptionId;
+            }
+
+            try {
+                const response = await fetch('/miniapp/subscription/renewal', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(requestPayload),
+                });
+                const body = await parseJsonSafe(response);
+                if (!response.ok || (body && body.success === false)) {
+                    const message = extractRenewalError(body, response.status);
+                    throw createError('Subscription renewal error', message, response.status);
+                }
+
+                const successKey = 'subscription_renewal.success';
+                const successValue = t(successKey);
+                showPopup(successValue && successValue !== successKey
+                    ? successValue
+                    : 'Subscription renewed successfully.',
+                t('subscription_renewal.title') || 'Renew subscription');
+
+                subscriptionRenewalSubmitting = false;
+                await refreshSubscriptionData({ silent: true });
+            } catch (error) {
+                subscriptionRenewalSubmitting = false;
+                renderSubscriptionRenewalCard();
+                console.error('Failed to renew subscription:', error);
+                showPopup(
+                    resolveRenewalErrorMessage(error),
+                    t('subscription_renewal.title') || 'Renew subscription'
+                );
+                return;
+            }
+
+            ensureSubscriptionRenewalLoaded({ force: true }).catch(err => {
+                console.warn('Failed to refresh renewal options after renewal:', err);
+            });
+        }
+
         function setupSubscriptionSettingsEvents() {
             document.getElementById('subscriptionSettingsRetry')?.addEventListener('click', () => {
                 ensureSubscriptionSettingsLoaded({ force: true }).catch(error => {