From 1a4c8eff190668aae4ed5202e89b86ae02ed703e Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Fri, 10 Oct 2025 12:36:39 +0300
Subject: [PATCH] Fix renewal price display when no discount

---
 app/webapi/routes/miniapp.py  |  502 ++++++++++-
 app/webapi/schemas/miniapp.py |   62 ++
 miniapp/index.html            | 1586 +++++++++++++++++++++++++++++++++
 3 files changed, 2147 insertions(+), 3 deletions(-)

diff --git a/app/webapi/routes/miniapp.py b/app/webapi/routes/miniapp.py
index 36df0d25..9af43d8a 100644
--- a/app/webapi/routes/miniapp.py
+++ b/app/webapi/routes/miniapp.py
@@ -25,12 +25,18 @@ from app.database.crud.promo_group import get_auto_assign_promo_groups
 from app.database.crud.rules import get_rules_by_language
 from app.database.crud.promo_offer_template import get_promo_offer_template_by_id
 from app.database.crud.server_squad import (
-    get_available_server_squads,
-    get_server_squad_by_uuid,
     add_user_to_servers,
+    get_available_server_squads,
+    get_server_ids_by_uuids,
+    get_server_squad_by_uuid,
     remove_user_from_servers,
 )
-from app.database.crud.subscription import add_subscription_servers, remove_subscription_servers
+from app.database.crud.subscription import (
+    add_subscription_servers,
+    calculate_subscription_total_cost,
+    extend_subscription,
+    remove_subscription_servers,
+)
 from app.database.crud.transaction import (
     create_transaction,
     get_user_total_spent_kopeks,
@@ -75,9 +81,13 @@ from app.utils.user_utils import (
 )
 from app.utils.pricing_utils import (
     apply_percentage_discount,
+    calculate_months_from_days,
     calculate_prorated_price,
+    format_period_description,
     get_remaining_months,
+    validate_pricing_calculation,
 )
+from app.utils.promo_offer import get_user_active_promo_discount_percent
 
 from ..dependencies import get_db_session
 from ..schemas.miniapp import (
@@ -137,6 +147,11 @@ from ..schemas.miniapp import (
     MiniAppSubscriptionPurchasePreviewResponse,
     MiniAppSubscriptionPurchaseRequest,
     MiniAppSubscriptionPurchaseResponse,
+    MiniAppSubscriptionRenewalOptionsRequest,
+    MiniAppSubscriptionRenewalOptionsResponse,
+    MiniAppSubscriptionRenewalPeriod,
+    MiniAppSubscriptionRenewalRequest,
+    MiniAppSubscriptionRenewalResponse,
 )
 
 
@@ -177,6 +192,9 @@ _PAYMENT_FAILURE_STATUSES = {
 }
 
 
+_PERIOD_ID_PATTERN = re.compile(r"(\d+)")
+
+
 async def _get_usd_to_rub_rate() -> float:
     try:
         rate = await currency_converter.get_usd_to_rub_rate()
@@ -2753,6 +2771,231 @@ def _extract_promo_discounts(group: Optional[PromoGroup]) -> Dict[str, Any]:
     }
 
 
+def _normalize_language_code(user: Optional[User]) -> str:
+    language = getattr(user, "language", None) or settings.DEFAULT_LANGUAGE or "ru"
+    return language.split("-")[0].lower()
+
+
+def _build_renewal_status_message(user: Optional[User]) -> str:
+    language_code = _normalize_language_code(user)
+    if language_code == "ru":
+        return "Стоимость указана с учётом ваших текущих серверов, трафика и устройств."
+    return "Prices already include your current servers, traffic, and devices."
+
+
+def _build_promo_offer_payload(user: Optional[User]) -> Optional[Dict[str, Any]]:
+    percent = get_user_active_promo_discount_percent(user)
+    if percent <= 0:
+        return None
+
+    payload: Dict[str, Any] = {"percent": percent}
+
+    expires_at = getattr(user, "promo_offer_discount_expires_at", None)
+    if expires_at:
+        payload["expires_at"] = expires_at
+
+    language_code = _normalize_language_code(user)
+    if language_code == "ru":
+        payload["message"] = "Дополнительная скидка применяется автоматически."
+    else:
+        payload["message"] = "Extra discount is applied automatically."
+
+    return payload
+
+
+def _build_renewal_period_id(period_days: int) -> str:
+    return f"days:{period_days}"
+
+
+def _parse_period_identifier(identifier: Optional[str]) -> Optional[int]:
+    if not identifier:
+        return None
+
+    match = _PERIOD_ID_PATTERN.search(str(identifier))
+    if not match:
+        return None
+
+    try:
+        return int(match.group(1))
+    except (TypeError, ValueError):
+        return None
+
+
+async def _calculate_subscription_renewal_pricing(
+    db: AsyncSession,
+    user: User,
+    subscription: Subscription,
+    period_days: int,
+) -> Dict[str, Any]:
+    connected_uuids = [str(uuid) for uuid in list(subscription.connected_squads or [])]
+    server_ids: List[int] = []
+    if connected_uuids:
+        server_ids = await get_server_ids_by_uuids(db, connected_uuids)
+
+    traffic_limit = subscription.traffic_limit_gb
+    if traffic_limit is None:
+        traffic_limit = settings.DEFAULT_TRAFFIC_LIMIT_GB
+
+    devices_limit = subscription.device_limit or settings.DEFAULT_DEVICE_LIMIT
+
+    total_cost, details = await calculate_subscription_total_cost(
+        db,
+        period_days,
+        int(traffic_limit or 0),
+        server_ids,
+        int(devices_limit or 0),
+        user=user,
+    )
+
+    months = details.get("months_in_period") or calculate_months_from_days(period_days)
+
+    base_original_total = (
+        details.get("base_price_original", 0)
+        + details.get("traffic_price_per_month", 0) * months
+        + details.get("servers_price_per_month", 0) * months
+        + details.get("devices_price_per_month", 0) * months
+    )
+
+    discounted_total = total_cost
+
+    monthly_additions = 0
+    if months > 0:
+        monthly_additions = (
+            details.get("total_servers_price", 0) // months
+            + details.get("total_devices_price", 0) // months
+            + details.get("total_traffic_price", 0) // months
+        )
+
+    if not validate_pricing_calculation(
+        details.get("base_price", 0),
+        monthly_additions,
+        months,
+        discounted_total,
+    ):
+        logger.warning(
+            "Renewal pricing validation failed for subscription %s (period %s)",
+            subscription.id,
+            period_days,
+        )
+
+    promo_percent = get_user_active_promo_discount_percent(user)
+    final_total = discounted_total
+    promo_discount_value = 0
+    if promo_percent > 0 and discounted_total > 0:
+        final_total, promo_discount_value = apply_percentage_discount(
+            discounted_total,
+            promo_percent,
+        )
+
+    overall_discount_value = max(0, base_original_total - final_total)
+    overall_discount_percent = 0
+    if base_original_total > 0 and overall_discount_value > 0:
+        overall_discount_percent = int(
+            round(overall_discount_value * 100 / base_original_total)
+        )
+
+    per_month = final_total // months if months else final_total
+
+    pricing_payload: Dict[str, Any] = {
+        "period_id": _build_renewal_period_id(period_days),
+        "period_days": period_days,
+        "months": months,
+        "base_original_total": base_original_total,
+        "discounted_total": discounted_total,
+        "final_total": final_total,
+        "promo_discount_value": promo_discount_value,
+        "promo_discount_percent": promo_percent if promo_discount_value else 0,
+        "overall_discount_percent": overall_discount_percent,
+        "per_month": per_month,
+        "server_ids": list(server_ids),
+        "details": details,
+    }
+
+    return pricing_payload
+
+
+async def _prepare_subscription_renewal_options(
+    db: AsyncSession,
+    user: User,
+    subscription: Subscription,
+) -> Tuple[List[MiniAppSubscriptionRenewalPeriod], Dict[Union[str, int], Dict[str, Any]], Optional[str]]:
+    available_periods = [
+        period for period in settings.get_available_renewal_periods() if period > 0
+    ]
+
+    option_payloads: List[Tuple[MiniAppSubscriptionRenewalPeriod, Dict[str, Any]]] = []
+
+    for period_days in available_periods:
+        try:
+            pricing = await _calculate_subscription_renewal_pricing(
+                db,
+                user,
+                subscription,
+                period_days,
+            )
+        except Exception as error:  # pragma: no cover - defensive logging
+            logger.warning(
+                "Failed to calculate renewal pricing for subscription %s (period %s): %s",
+                subscription.id,
+                period_days,
+                error,
+            )
+            continue
+
+        label = format_period_description(
+            period_days,
+            getattr(user, "language", settings.DEFAULT_LANGUAGE),
+        )
+
+        price_label = settings.format_price(pricing["final_total"])
+        original_label = None
+        if pricing["base_original_total"] and pricing["base_original_total"] != pricing["final_total"]:
+            original_label = settings.format_price(pricing["base_original_total"])
+
+        per_month_label = settings.format_price(pricing["per_month"])
+
+        option_model = MiniAppSubscriptionRenewalPeriod(
+            id=pricing["period_id"],
+            days=period_days,
+            months=pricing["months"],
+            price_kopeks=pricing["final_total"],
+            price_label=price_label,
+            original_price_kopeks=pricing["base_original_total"],
+            original_price_label=original_label,
+            discount_percent=pricing["overall_discount_percent"],
+            price_per_month_kopeks=pricing["per_month"],
+            price_per_month_label=per_month_label,
+            title=label,
+        )
+
+        option_payloads.append((option_model, pricing))
+
+    if not option_payloads:
+        return [], {}, None
+
+    option_payloads.sort(key=lambda item: item[0].days or 0)
+
+    recommended_option = max(
+        option_payloads,
+        key=lambda item: (
+            item[1]["overall_discount_percent"],
+            item[0].months or 0,
+            -(item[1]["final_total"] or 0),
+        ),
+    )
+    recommended_option[0].is_recommended = True
+
+    pricing_map: Dict[Union[str, int], Dict[str, Any]] = {}
+    for option_model, pricing in option_payloads:
+        pricing_map[option_model.id] = pricing
+        pricing_map[pricing["period_days"]] = pricing
+        pricing_map[str(pricing["period_days"])] = pricing
+
+    periods = [item[0] for item in option_payloads]
+
+    return periods, pricing_map, recommended_option[0].id
+
+
 def _get_addon_discount_percent_for_user(
     user: Optional[User],
     category: str,
@@ -3144,6 +3387,259 @@ async def _build_subscription_settings(
     return settings_payload
 
 
+@router.post(
+    "/subscription/renewal/options",
+    response_model=MiniAppSubscriptionRenewalOptionsResponse,
+)
+async def get_subscription_renewal_options_endpoint(
+    payload: MiniAppSubscriptionRenewalOptionsRequest,
+    db: AsyncSession = Depends(get_db_session),
+) -> MiniAppSubscriptionRenewalOptionsResponse:
+    user = await _authorize_miniapp_user(payload.init_data, db)
+    subscription = _ensure_paid_subscription(user)
+    _validate_subscription_id(payload.subscription_id, subscription)
+
+    periods, pricing_map, default_period_id = await _prepare_subscription_renewal_options(
+        db,
+        user,
+        subscription,
+    )
+
+    balance_kopeks = getattr(user, "balance_kopeks", 0)
+    currency = (getattr(user, "balance_currency", None) or "RUB").upper()
+
+    promo_group = getattr(user, "promo_group", None)
+    promo_group_model = (
+        MiniAppPromoGroup(
+            id=promo_group.id,
+            name=promo_group.name,
+            **_extract_promo_discounts(promo_group),
+        )
+        if promo_group
+        else None
+    )
+
+    promo_offer_payload = _build_promo_offer_payload(user)
+
+    missing_amount = None
+    if default_period_id and default_period_id in pricing_map:
+        selected_pricing = pricing_map[default_period_id]
+        final_total = selected_pricing.get("final_total")
+        if isinstance(final_total, int) and balance_kopeks < final_total:
+            missing_amount = final_total - balance_kopeks
+
+    return MiniAppSubscriptionRenewalOptionsResponse(
+        subscription_id=subscription.id,
+        currency=currency,
+        balance_kopeks=balance_kopeks,
+        balance_label=settings.format_price(balance_kopeks),
+        promo_group=promo_group_model,
+        promo_offer=promo_offer_payload,
+        periods=periods,
+        default_period_id=default_period_id,
+        missing_amount_kopeks=missing_amount,
+        status_message=_build_renewal_status_message(user),
+    )
+
+
+@router.post(
+    "/subscription/renewal",
+    response_model=MiniAppSubscriptionRenewalResponse,
+)
+async def submit_subscription_renewal_endpoint(
+    payload: MiniAppSubscriptionRenewalRequest,
+    db: AsyncSession = Depends(get_db_session),
+) -> MiniAppSubscriptionRenewalResponse:
+    user = await _authorize_miniapp_user(payload.init_data, db)
+    subscription = _ensure_paid_subscription(user)
+    _validate_subscription_id(payload.subscription_id, subscription)
+
+    period_days: Optional[int] = None
+    if payload.period_days is not None:
+        try:
+            period_days = int(payload.period_days)
+        except (TypeError, ValueError) as error:
+            raise HTTPException(
+                status.HTTP_400_BAD_REQUEST,
+                detail={"code": "invalid_period", "message": "Invalid renewal period"},
+            ) from error
+
+    if period_days is None:
+        period_days = _parse_period_identifier(payload.period_id)
+
+    if period_days is None or period_days <= 0:
+        raise HTTPException(
+            status.HTTP_400_BAD_REQUEST,
+            detail={"code": "invalid_period", "message": "Invalid renewal period"},
+        )
+
+    available_periods = [
+        period for period in settings.get_available_renewal_periods() if period > 0
+    ]
+    if period_days not in available_periods:
+        raise HTTPException(
+            status.HTTP_400_BAD_REQUEST,
+            detail={"code": "period_unavailable", "message": "Selected renewal period is not available"},
+        )
+
+    try:
+        pricing = await _calculate_subscription_renewal_pricing(
+            db,
+            user,
+            subscription,
+            period_days,
+        )
+    except HTTPException:
+        raise
+    except Exception as error:
+        logger.error(
+            "Failed to calculate renewal pricing for subscription %s (period %s): %s",
+            subscription.id,
+            period_days,
+            error,
+        )
+        raise HTTPException(
+            status.HTTP_502_BAD_GATEWAY,
+            detail={"code": "pricing_failed", "message": "Failed to calculate renewal pricing"},
+        ) from error
+
+    final_total = int(pricing.get("final_total") or 0)
+    balance_kopeks = getattr(user, "balance_kopeks", 0)
+
+    if final_total > 0 and balance_kopeks < final_total:
+        missing = final_total - balance_kopeks
+        raise HTTPException(
+            status.HTTP_402_PAYMENT_REQUIRED,
+            detail={
+                "code": "insufficient_funds",
+                "message": "Not enough funds to renew the subscription",
+                "missing_amount_kopeks": missing,
+            },
+        )
+
+    consume_promo_offer = bool(pricing.get("promo_discount_value"))
+    description = f"Продление подписки на {period_days} дней"
+
+    if final_total > 0:
+        success = await subtract_user_balance(
+            db,
+            user,
+            final_total,
+            description,
+            consume_promo_offer=consume_promo_offer,
+        )
+        if not success:
+            raise HTTPException(
+                status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail={"code": "charge_failed", "message": "Failed to charge balance"},
+            )
+        await db.refresh(user)
+
+    subscription = await extend_subscription(db, subscription, period_days)
+
+    server_ids = pricing.get("server_ids") or []
+    server_prices_for_period = pricing.get("details", {}).get(
+        "servers_individual_prices",
+        [],
+    )
+    if server_ids:
+        try:
+            await add_subscription_servers(
+                db,
+                subscription,
+                server_ids,
+                server_prices_for_period,
+            )
+        except Exception as error:  # pragma: no cover - defensive logging
+            logger.warning(
+                "Failed to record renewal server prices for subscription %s: %s",
+                subscription.id,
+                error,
+            )
+
+    subscription_service = SubscriptionService()
+    try:
+        await subscription_service.update_remnawave_user(
+            db,
+            subscription,
+            reset_traffic=settings.RESET_TRAFFIC_ON_PAYMENT,
+            reset_reason="subscription renewal",
+        )
+    except RemnaWaveConfigurationError as error:  # pragma: no cover - configuration issues
+        logger.warning("RemnaWave update skipped: %s", error)
+    except Exception as error:  # pragma: no cover - defensive logging
+        logger.error(
+            "Failed to update RemnaWave user for subscription %s: %s",
+            subscription.id,
+            error,
+        )
+
+    try:
+        await create_transaction(
+            db=db,
+            user_id=user.id,
+            type=TransactionType.SUBSCRIPTION_PAYMENT,
+            amount_kopeks=final_total,
+            description=description,
+        )
+    except Exception as error:  # pragma: no cover - defensive logging
+        logger.warning(
+            "Failed to create renewal transaction for subscription %s: %s",
+            subscription.id,
+            error,
+        )
+
+    await db.refresh(user)
+    await db.refresh(subscription)
+
+    language_code = _normalize_language_code(user)
+    amount_label = settings.format_price(final_total)
+    date_label = (
+        subscription.end_date.strftime("%d.%m.%Y %H:%M")
+        if subscription.end_date
+        else ""
+    )
+
+    if language_code == "ru":
+        if final_total > 0:
+            message = (
+                f"Подписка продлена до {date_label}. " if date_label else "Подписка продлена. "
+            ) + f"Списано {amount_label}."
+        else:
+            message = (
+                f"Подписка продлена до {date_label}."
+                if date_label
+                else "Подписка успешно продлена."
+            )
+    else:
+        if final_total > 0:
+            message = (
+                f"Subscription renewed until {date_label}. " if date_label else "Subscription renewed. "
+            ) + f"Charged {amount_label}."
+        else:
+            message = (
+                f"Subscription renewed until {date_label}."
+                if date_label
+                else "Subscription renewed successfully."
+            )
+
+    promo_discount_value = pricing.get("promo_discount_value") or 0
+    if consume_promo_offer and promo_discount_value > 0:
+        discount_label = settings.format_price(promo_discount_value)
+        if language_code == "ru":
+            message += f" Применена дополнительная скидка {discount_label}."
+        else:
+            message += f" Promo discount applied: {discount_label}."
+
+    return MiniAppSubscriptionRenewalResponse(
+        message=message,
+        balance_kopeks=user.balance_kopeks,
+        balance_label=settings.format_price(user.balance_kopeks),
+        subscription_id=subscription.id,
+        renewed_until=subscription.end_date,
+    )
+
+
 @router.post(
     "/subscription/purchase/options",
     response_model=MiniAppSubscriptionPurchaseOptionsResponse,
diff --git a/app/webapi/schemas/miniapp.py b/app/webapi/schemas/miniapp.py
index c0a72461..243a2fae 100644
--- a/app/webapi/schemas/miniapp.py
+++ b/app/webapi/schemas/miniapp.py
@@ -134,6 +134,68 @@ class MiniAppPromoOfferClaimResponse(BaseModel):
     code: Optional[str] = None
 
 
+class MiniAppSubscriptionRenewalPeriod(BaseModel):
+    id: str
+    days: Optional[int] = None
+    months: Optional[int] = None
+    price_kopeks: Optional[int] = Field(default=None, alias="priceKopeks")
+    price_label: Optional[str] = Field(default=None, alias="priceLabel")
+    original_price_kopeks: Optional[int] = Field(default=None, alias="originalPriceKopeks")
+    original_price_label: Optional[str] = Field(default=None, alias="originalPriceLabel")
+    discount_percent: int = Field(default=0, alias="discountPercent")
+    price_per_month_kopeks: Optional[int] = Field(default=None, alias="pricePerMonthKopeks")
+    price_per_month_label: Optional[str] = Field(default=None, alias="pricePerMonthLabel")
+    is_recommended: bool = Field(default=False, alias="isRecommended")
+    description: Optional[str] = None
+    badge: Optional[str] = None
+    title: Optional[str] = None
+
+    model_config = ConfigDict(populate_by_name=True)
+
+
+class MiniAppSubscriptionRenewalOptionsRequest(BaseModel):
+    init_data: str = Field(..., alias="initData")
+    subscription_id: Optional[int] = Field(default=None, alias="subscriptionId")
+
+    model_config = ConfigDict(populate_by_name=True)
+
+
+class MiniAppSubscriptionRenewalOptionsResponse(BaseModel):
+    success: bool = True
+    subscription_id: Optional[int] = Field(default=None, alias="subscriptionId")
+    currency: str
+    balance_kopeks: Optional[int] = Field(default=None, alias="balanceKopeks")
+    balance_label: Optional[str] = Field(default=None, alias="balanceLabel")
+    promo_group: Optional[MiniAppPromoGroup] = Field(default=None, alias="promoGroup")
+    promo_offer: Optional[Dict[str, Any]] = Field(default=None, alias="promoOffer")
+    periods: List[MiniAppSubscriptionRenewalPeriod] = Field(default_factory=list)
+    default_period_id: Optional[str] = Field(default=None, alias="defaultPeriodId")
+    missing_amount_kopeks: Optional[int] = Field(default=None, alias="missingAmountKopeks")
+    status_message: Optional[str] = Field(default=None, alias="statusMessage")
+
+    model_config = ConfigDict(populate_by_name=True)
+
+
+class MiniAppSubscriptionRenewalRequest(BaseModel):
+    init_data: str = Field(..., alias="initData")
+    subscription_id: Optional[int] = Field(default=None, alias="subscriptionId")
+    period_id: Optional[str] = Field(default=None, alias="periodId")
+    period_days: Optional[int] = Field(default=None, alias="periodDays")
+
+    model_config = ConfigDict(populate_by_name=True)
+
+
+class MiniAppSubscriptionRenewalResponse(BaseModel):
+    success: bool = True
+    message: Optional[str] = None
+    balance_kopeks: Optional[int] = Field(default=None, alias="balanceKopeks")
+    balance_label: Optional[str] = Field(default=None, alias="balanceLabel")
+    subscription_id: Optional[int] = Field(default=None, alias="subscriptionId")
+    renewed_until: Optional[datetime] = Field(default=None, alias="renewedUntil")
+
+    model_config = ConfigDict(populate_by_name=True)
+
+
 class MiniAppPromoCode(BaseModel):
     code: str
     type: Optional[str] = None
diff --git a/miniapp/index.html b/miniapp/index.html
index 2da7b218..dbace41f 100644
--- a/miniapp/index.html
+++ b/miniapp/index.html
@@ -952,6 +952,267 @@
             background: rgba(var(--danger-rgb), 0.16);
         }
 
+        .subscription-renewal-card .card-title {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .subscription-renewal-card .card-title svg {
+            width: 20px;
+            height: 20px;
+            opacity: 0.8;
+        }
+
+        .subscription-renewal-summary-chip {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin-left: auto;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 10px;
+            border-radius: 999px;
+            background: var(--bg-secondary);
+            color: var(--text-secondary);
+            font-weight: 600;
+        }
+
+        .subscription-renewal-content {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .subscription-renewal-body {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .subscription-renewal-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            margin-top: 12px;
+        }
+
+        .subscription-renewal-meta-block {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            padding: 12px;
+            border-radius: var(--radius-lg);
+            background: rgba(var(--primary-rgb), 0.06);
+        }
+
+        .subscription-renewal-meta-title {
+            font-size: 12px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-meta-body {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .subscription-renewal-meta-empty {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-offer {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .subscription-renewal-offer-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            border-radius: 999px;
+            background: rgba(var(--primary-rgb), 0.12);
+            color: var(--primary);
+            font-size: 12px;
+            font-weight: 700;
+        }
+
+        .subscription-renewal-offer-note {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-options {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .subscription-renewal-section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .subscription-renewal-section-title {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .subscription-renewal-option .subscription-settings-toggle-label {
+            gap: 8px;
+        }
+
+        .subscription-renewal-option-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 10px;
+            border-radius: 999px;
+            background: rgba(var(--primary-rgb), 0.16);
+            color: var(--primary);
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            font-weight: 700;
+        }
+
+        .subscription-settings-toggle.active .subscription-renewal-option-badge {
+            background: var(--primary);
+            color: var(--tg-theme-button-text-color);
+        }
+
+        .subscription-renewal-option-price {
+            display: flex;
+            align-items: baseline;
+            gap: 8px;
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .subscription-renewal-option-price-current {
+            color: var(--primary);
+        }
+
+        .subscription-renewal-option-price-original {
+            font-size: 12px;
+            text-decoration: line-through;
+            color: var(--text-secondary);
+            font-weight: 600;
+        }
+
+        .subscription-renewal-option-discount {
+            font-size: 12px;
+            font-weight: 700;
+            color: var(--success);
+        }
+
+        .subscription-renewal-option-note {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .subscription-renewal-option-description {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-top: 6px;
+        }
+
+        .subscription-renewal-summary {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 16px;
+            border-radius: var(--radius-lg);
+            background: var(--bg-secondary);
+            box-shadow: var(--shadow-sm);
+        }
+
+        .subscription-renewal-summary-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            gap: 12px;
+        }
+
+        .subscription-renewal-summary-prices {
+            display: flex;
+            align-items: baseline;
+            gap: 8px;
+        }
+
+        .subscription-renewal-summary-label {
+            font-size: 12px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-price-current {
+            font-size: 22px;
+            font-weight: 800;
+            color: var(--text-primary);
+        }
+
+        .subscription-renewal-price-original {
+            font-size: 14px;
+            text-decoration: line-through;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-price-discount {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--success);
+        }
+
+        .subscription-renewal-price-note {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-balance-warning {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--danger);
+        }
+
+        .subscription-renewal-status-text {
+            font-size: 13px;
+            color: var(--text-secondary);
+        }
+
+        .subscription-renewal-actions {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        :root[data-theme="dark"] .subscription-renewal-meta-block {
+            background: rgba(var(--primary-rgb), 0.12);
+        }
+
+        :root[data-theme="dark"] .subscription-renewal-summary {
+            background: rgba(15, 23, 42, 0.65);
+        }
+
         .promo-offers {
             display: flex;
             flex-direction: column;
@@ -3749,6 +4010,67 @@
                 </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 8c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0-6a1 1 0 011 1v1.07a7.002 7.002 0 015.657 5.657H20a1 1 0 110 2h-1.07a7.002 7.002 0 01-5.657 5.657V20a1 1 0 11-2 0v-1.07a7.002 7.002 0 01-5.657-5.657H4a1 1 0 110-2h1.07A7.002 7.002 0 0111 4.07V3a1 1 0 011-1z"/>
+                        </svg>
+                        <span data-i18n="subscription_renewal.title">Продление подписки</span>
+                    </div>
+                    <div class="subscription-renewal-summary-chip" id="subscriptionRenewalSummaryChip"></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-content">
+                        <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-status-text hidden" id="subscriptionRenewalStatus" data-i18n="subscription_renewal.status.loading">Загружаем доступные периоды...</div>
+                        <div class="subscription-settings-error hidden" id="subscriptionRenewalError">
+                            <div id="subscriptionRenewalErrorText" data-i18n="subscription_renewal.error.generic">Не удалось загрузить параметры продления. Попробуйте позже.</div>
+                            <button class="subscription-settings-retry" id="subscriptionRenewalRetry" type="button" data-i18n="subscription_renewal.action.retry">Повторить</button>
+                        </div>
+                        <div class="subscription-renewal-body hidden" id="subscriptionRenewalBody">
+                            <div class="subscription-renewal-meta">
+                                <div class="subscription-renewal-meta-block hidden" id="subscriptionRenewalPromoGroupBlock">
+                                    <div class="subscription-renewal-meta-title" data-i18n="subscription_renewal.meta.promo_group.title">Скидки промогруппы</div>
+                                    <div class="subscription-renewal-meta-body" id="subscriptionRenewalPromoGroup"></div>
+                                </div>
+                                <div class="subscription-renewal-meta-block hidden" id="subscriptionRenewalOfferBlock">
+                                    <div class="subscription-renewal-meta-title" data-i18n="subscription_renewal.meta.promo_offer.title">Промопредложение</div>
+                                    <div class="subscription-renewal-meta-body subscription-renewal-offer" id="subscriptionRenewalOffer"></div>
+                                </div>
+                            </div>
+                            <div class="subscription-renewal-section">
+                                <div class="subscription-renewal-section-title" data-i18n="subscription_renewal.subtitle">Выберите период продления.</div>
+                                <div class="subscription-renewal-options" id="subscriptionRenewalOptions"></div>
+                            </div>
+                            <div class="subscription-renewal-summary" id="subscriptionRenewalSummary">
+                                <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-discount hidden" id="subscriptionRenewalPriceDiscount"></div>
+                                <div class="subscription-renewal-price-note hidden" id="subscriptionRenewalPriceNote"></div>
+                                <div class="subscription-renewal-balance-warning hidden" id="subscriptionRenewalBalanceWarning"></div>
+                            </div>
+                            <div class="subscription-renewal-actions">
+                                <button class="btn btn-primary" id="subscriptionRenewalSubmit" type="button" data-i18n="subscription_renewal.submit">Продлить</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Subscription Settings -->
             <div class="card expandable subscription-settings-card hidden" id="subscriptionSettingsCard">
                 <div class="card-header">
@@ -4157,6 +4479,7 @@
 
         setupSubscriptionSettingsEvents();
         setupSubscriptionPurchaseEvents();
+        setupSubscriptionRenewalEvents();
 
         const themeToggle = document.getElementById('themeToggle');
         const THEME_STORAGE_KEY = 'remnawave-miniapp-theme';
@@ -4432,6 +4755,35 @@
                 'subscription_settings.confirm.devices.decrease': 'Device limit will change to {value}. No charges apply.',
                 'subscription_settings.confirm.months.one': '{count} month',
                 'subscription_settings.confirm.months.other': '{count} months',
+                'subscription_renewal.title': 'Renew subscription',
+                'subscription_renewal.subtitle': 'Choose how long you want to extend access.',
+                'subscription_renewal.status.loading': 'Loading renewal options…',
+                'subscription_renewal.status.empty': 'No renewal options are currently available.',
+                'subscription_renewal.error.generic': 'Unable to load renewal options. Please try again later.',
+                'subscription_renewal.error.unauthorized': 'Authorization required. Please reopen the mini app from Telegram.',
+                'subscription_renewal.error.validation': 'Please select a renewal period.',
+                'subscription_renewal.action.retry': 'Try again',
+                'subscription_renewal.summary.total': 'Total',
+                'subscription_renewal.summary.per_month': '{amount} per month',
+                'subscription_renewal.summary.discount': 'You save {percent}%',
+                'subscription_renewal.summary.insufficient': 'Not enough balance — missing {missing}.',
+                'subscription_renewal.submit': 'Renew',
+                'subscription_renewal.submit.loading': 'Processing…',
+                'subscription_renewal.confirm.title': 'Confirm renewal',
+                'subscription_renewal.confirm.message': 'Renew the subscription for {period} and pay {amount}?',
+                'subscription_renewal.confirm.balance': 'Current balance: {balance}',
+                'subscription_renewal.confirm.accept': 'Pay',
+                'subscription_renewal.confirm.cancel': 'Cancel',
+                'subscription_renewal.success': 'Subscription renewed successfully.',
+                'subscription_renewal.badge.recommended': 'Recommended',
+                'subscription_renewal.period.days': '{count} days',
+                'subscription_renewal.period.month_one': '{count} month',
+                'subscription_renewal.period.month_other': '{count} months',
+                'subscription_renewal.meta.promo_group.title': 'Promo group discounts',
+                'subscription_renewal.meta.promo_group.empty': 'No extra discounts',
+                'subscription_renewal.meta.promo_offer.title': 'Promo offer',
+                'subscription_renewal.meta.promo_offer.active': 'Extra discount {percent}%',
+                'subscription_renewal.meta.promo_offer.until': 'Valid until {date}',
                 'promo_code.title': 'Activate promo code',
                 'promo_code.subtitle': 'Enter a promo code to unlock rewards instantly.',
                 'promo_code.placeholder': 'Enter promo code',
@@ -4758,6 +5110,35 @@
                 'subscription_settings.confirm.devices.decrease': 'Лимит устройств изменится на {value}. Дополнительная оплата не требуется.',
                 'subscription_settings.confirm.months.one': '{count} месяц',
                 'subscription_settings.confirm.months.other': '{count} месяцев',
+                'subscription_renewal.title': 'Продление подписки',
+                'subscription_renewal.subtitle': 'Выберите период продления.',
+                'subscription_renewal.status.loading': 'Загружаем доступные периоды…',
+                'subscription_renewal.status.empty': 'Доступных периодов продления нет.',
+                'subscription_renewal.error.generic': 'Не удалось загрузить параметры продления. Попробуйте позже.',
+                'subscription_renewal.error.unauthorized': 'Требуется авторизация. Откройте мини-приложение из Telegram.',
+                'subscription_renewal.error.validation': 'Выберите период продления.',
+                'subscription_renewal.action.retry': 'Повторить',
+                'subscription_renewal.summary.total': 'Итого',
+                'subscription_renewal.summary.per_month': '{amount} в месяц',
+                'subscription_renewal.summary.discount': 'Выгода {percent}%',
+                'subscription_renewal.summary.insufficient': 'Недостаточно средств — не хватает {missing}.',
+                'subscription_renewal.submit': 'Продлить',
+                'subscription_renewal.submit.loading': 'Продление…',
+                'subscription_renewal.confirm.title': 'Подтвердите продление',
+                'subscription_renewal.confirm.message': 'Продлить подписку на {period} и списать {amount}?',
+                'subscription_renewal.confirm.balance': 'Текущий баланс: {balance}',
+                'subscription_renewal.confirm.accept': 'Оплатить',
+                'subscription_renewal.confirm.cancel': 'Отмена',
+                'subscription_renewal.success': 'Подписка успешно продлена.',
+                'subscription_renewal.badge.recommended': 'Рекомендуем',
+                'subscription_renewal.period.days': '{count} дней',
+                'subscription_renewal.period.month_one': '{count} месяц',
+                'subscription_renewal.period.month_other': '{count} месяцев',
+                'subscription_renewal.meta.promo_group.title': 'Скидки промогруппы',
+                'subscription_renewal.meta.promo_group.empty': 'Дополнительных скидок нет',
+                'subscription_renewal.meta.promo_offer.title': 'Промопредложение',
+                'subscription_renewal.meta.promo_offer.active': 'Дополнительная скидка {percent}%',
+                'subscription_renewal.meta.promo_offer.until': 'Действует до {date}',
                 'promo_code.title': 'Активировать промокод',
                 'promo_code.subtitle': 'Введите промокод и сразу получите бонусы.',
                 'promo_code.placeholder': 'Введите промокод',
@@ -5068,6 +5449,15 @@
             devices: null,
         };
 
+        let subscriptionRenewalData = null;
+        let subscriptionRenewalPromise = null;
+        let subscriptionRenewalError = null;
+        let subscriptionRenewalLoading = false;
+        let subscriptionRenewalSubmitting = false;
+        const subscriptionRenewalSelection = {
+            periodId: null,
+        };
+
         const PAYMENT_STATUS_INITIAL_DELAY_MS = 2000;
         const PAYMENT_STATUS_POLL_INTERVAL_MS = 5000;
         const PAYMENT_STATUS_TIMEOUT_MS = 180000;
@@ -5904,6 +6294,9 @@
             userData.subscriptionCryptoLink = userData.subscription_crypto_link || null;
             userData.referral = userData.referral || null;
 
+            resetSubscriptionRenewalState(null);
+            prepareSubscriptionRenewalFromUserData();
+
             const normalizedPurchaseUrl = normalizeUrl(
                 userData.subscription_purchase_url
                 || userData.subscriptionPurchaseUrl
@@ -6111,6 +6504,7 @@
             }
 
             renderSubscriptionPurchaseCard();
+            renderSubscriptionRenewalCard();
             renderSubscriptionSettingsCard();
             renderPromoOffers();
             renderPromoSection();
@@ -7291,6 +7685,132 @@
             return formatCurrency(normalized / 100, currencyCode);
         }
 
+        function extractPriceNumberFromLabel(label) {
+            if (label === null || label === undefined) {
+                return null;
+            }
+
+            const raw = String(label).trim();
+            if (!raw) {
+                return null;
+            }
+
+            const sanitized = raw
+                .replace(/\u00a0/g, '')
+                .replace(/\u202f/g, '')
+                .replace(/\s+/g, '')
+                .replace(/[^0-9.,-]/g, '');
+
+            if (!sanitized) {
+                return null;
+            }
+
+            const lastDot = sanitized.lastIndexOf('.');
+            const lastComma = sanitized.lastIndexOf(',');
+            let normalized = sanitized;
+
+            if (lastDot !== -1 || lastComma !== -1) {
+                const separatorIndex = Math.max(lastDot, lastComma);
+                const separator = sanitized[separatorIndex];
+
+                if (separator === ',') {
+                    normalized = sanitized.replace(/\./g, '').replace(/,/g, '.');
+                } else {
+                    normalized = sanitized.replace(/,/g, '');
+                }
+            } else {
+                normalized = sanitized.replace(/[.,]/g, '');
+            }
+
+            const numeric = Number.parseFloat(normalized);
+            return Number.isFinite(numeric) ? numeric : null;
+        }
+
+        function formatPercentValue(percent) {
+            if (percent === null || percent === undefined) {
+                return '';
+            }
+
+            if (typeof percent === 'number') {
+                if (!Number.isFinite(percent)) {
+                    return '';
+                }
+                return String(percent).replace(/\.0+$/, '').replace(/(\.\d*?[1-9])0+$/, '$1');
+            }
+
+            const raw = String(percent).trim();
+            if (!raw) {
+                return '';
+            }
+
+            const normalized = raw.replace(',', '.').replace(/%+$/, '');
+            const numeric = Number.parseFloat(normalized);
+            if (Number.isFinite(numeric)) {
+                return String(numeric).replace(/\.0+$/, '').replace(/(\.\d*?[1-9])0+$/, '$1');
+            }
+
+            return normalized;
+        }
+
+        function hasActivePriceDiscount(option) {
+            if (!option || typeof option !== 'object') {
+                return false;
+            }
+
+            const percent = coercePositiveInt(
+                option.discountPercent
+                    ?? option.discount_percent
+                    ?? option.discount
+                    ?? null,
+                null,
+            );
+            if (percent !== null && percent > 0) {
+                return true;
+            }
+
+            const priceKopeks = coercePositiveInt(
+                option.priceKopeks
+                    ?? option.price_kopeks
+                    ?? option.price
+                    ?? option.amount_kopeks
+                    ?? option.amountKopeks
+                    ?? null,
+                null,
+            );
+            const originalPriceKopeks = coercePositiveInt(
+                option.originalPriceKopeks
+                    ?? option.original_price_kopeks
+                    ?? option.original_price
+                    ?? option.base_price_kopeks
+                    ?? option.basePriceKopeks
+                    ?? null,
+                null,
+            );
+            const priceLabel = option.priceLabel ?? option.price_label ?? null;
+            const originalLabel = option.originalPriceLabel
+                ?? option.original_price_label
+                ?? option.base_price_label
+                ?? option.basePriceLabel
+                ?? null;
+
+            const priceValue = priceKopeks !== null
+                ? priceKopeks / 100
+                : extractPriceNumberFromLabel(priceLabel);
+            const originalValue = originalPriceKopeks !== null
+                ? originalPriceKopeks / 100
+                : extractPriceNumberFromLabel(originalLabel);
+
+            if (priceValue !== null && originalValue !== null) {
+                return originalValue > priceValue;
+            }
+
+            if (priceKopeks !== null && originalPriceKopeks !== null) {
+                return originalPriceKopeks > priceKopeks;
+            }
+
+            return false;
+        }
+
         function formatDeviceCountLabel(count) {
             const normalized = coercePositiveInt(count, null);
             if (normalized === null) {
@@ -10049,6 +10569,1072 @@
             };
         }
 
+        function resetSubscriptionRenewalSelection(data) {
+            if (!data || !Array.isArray(data.periods)) {
+                subscriptionRenewalSelection.periodId = null;
+                return;
+            }
+
+            const defaultId = data.defaultPeriodId ? String(data.defaultPeriodId) : null;
+            if (defaultId && data.periods.some(option => option?.id === defaultId)) {
+                subscriptionRenewalSelection.periodId = defaultId;
+                return;
+            }
+
+            const first = data.periods.find(option => option && option.id);
+            subscriptionRenewalSelection.periodId = first ? String(first.id) : null;
+        }
+
+        function resetSubscriptionRenewalState(data = null) {
+            subscriptionRenewalData = data;
+            subscriptionRenewalPromise = null;
+            subscriptionRenewalError = null;
+            subscriptionRenewalLoading = false;
+            subscriptionRenewalSubmitting = false;
+            if (data) {
+                resetSubscriptionRenewalSelection(data);
+            } else {
+                subscriptionRenewalSelection.periodId = null;
+            }
+        }
+
+        function normalizeRenewalPromoOffer(source) {
+            if (source && typeof source === 'object') {
+                const percent = coercePositiveInt(
+                    source.percent
+                        ?? source.discount_percent
+                        ?? source.discountPercent
+                        ?? source.value,
+                    null,
+                );
+                if (percent !== null) {
+                    const rawExpires = source.expires_at
+                        ?? source.expiresAt
+                        ?? source.valid_until
+                        ?? source.validUntil
+                        ?? null;
+                    const expiresAt = parseDate(rawExpires);
+                    return {
+                        percent,
+                        expiresAt,
+                        title: source.title || null,
+                        message: source.message || source.subtitle || null,
+                    };
+                }
+            }
+
+            const percent = coercePositiveInt(
+                userData?.user?.promo_offer_discount_percent
+                    ?? userData?.promo_offer_discount_percent,
+                null,
+            );
+            if (percent === null) {
+                return null;
+            }
+
+            const expiresAt = parseDate(
+                userData?.user?.promo_offer_discount_expires_at
+                    ?? userData?.promo_offer_discount_expires_at
+                    ?? null,
+            );
+
+            return {
+                percent,
+                expiresAt,
+            };
+        }
+
+        function normalizeRenewalOption(option, context = {}) {
+            if (!option || typeof option !== 'object') {
+                return null;
+            }
+
+            const currency = (context.currency || userData?.balance_currency || 'RUB').toString().toUpperCase();
+            const idCandidate = option.id
+                ?? option.period_id
+                ?? option.periodId
+                ?? option.key
+                ?? option.code
+                ?? null;
+            const days = coercePositiveInt(
+                option.days
+                    ?? option.period_days
+                    ?? option.periodDays
+                    ?? option.duration_days
+                    ?? option.durationDays,
+                null,
+            );
+            const months = coercePositiveInt(
+                option.months
+                    ?? option.period_months
+                    ?? option.periodMonths,
+                null,
+            );
+            const priceKopeks = coercePositiveInt(
+                option.price_kopeks
+                    ?? option.priceKopeks
+                    ?? option.price
+                    ?? option.amount_kopeks
+                    ?? option.amountKopeks,
+                null,
+            );
+            const originalPriceKopeks = coercePositiveInt(
+                option.original_price_kopeks
+                    ?? option.originalPriceKopeks
+                    ?? option.original_price
+                    ?? option.base_price_kopeks
+                    ?? option.basePriceKopeks,
+                null,
+            );
+            const priceLabel = option.price_label ?? option.priceLabel ?? null;
+            const originalPriceLabel = option.original_price_label
+                ?? option.originalPriceLabel
+                ?? option.base_price_label
+                ?? option.basePriceLabel
+                ?? null;
+            const discountPercent = coercePositiveInt(
+                option.discount_percent ?? option.discountPercent ?? option.discount ?? null,
+                null,
+            );
+            const perMonthKopeks = coercePositiveInt(
+                option.per_month_kopeks
+                    ?? option.perMonthKopeks
+                    ?? option.price_per_month_kopeks
+                    ?? null,
+                null,
+            );
+            const perMonthLabel = option.per_month_label
+                ?? option.perMonthLabel
+                ?? option.price_per_month_label
+                ?? null;
+            const isRecommended = coerceBoolean(
+                option.is_recommended ?? option.isRecommended ?? option.recommended,
+                false,
+            );
+            const description = option.description ?? option.subtitle ?? null;
+            const badge = option.badge || null;
+            const title = option.title ?? option.label ?? null;
+
+            const id = idCandidate != null
+                ? String(idCandidate)
+                : (days !== null ? `days:${days}` : null);
+            if (!id) {
+                return null;
+            }
+
+            let resolvedPriceLabel = priceLabel;
+            if (!resolvedPriceLabel && priceKopeks !== null) {
+                resolvedPriceLabel = formatPriceFromKopeks(priceKopeks, currency);
+            }
+
+            let resolvedOriginalLabel = originalPriceLabel;
+            if (!resolvedOriginalLabel && originalPriceKopeks !== null) {
+                resolvedOriginalLabel = formatPriceFromKopeks(originalPriceKopeks, currency);
+            }
+
+            let resolvedPerMonthLabel = perMonthLabel;
+            if (!resolvedPerMonthLabel && perMonthKopeks !== null) {
+                resolvedPerMonthLabel = formatPriceFromKopeks(perMonthKopeks, currency);
+            }
+
+            return {
+                id,
+                days,
+                months: months ?? (days ? Math.round(days / 30) : null),
+                priceKopeks,
+                priceLabel: resolvedPriceLabel,
+                originalPriceKopeks,
+                originalPriceLabel: resolvedOriginalLabel,
+                discountPercent,
+                pricePerMonthKopeks: perMonthKopeks,
+                pricePerMonthLabel: resolvedPerMonthLabel,
+                isRecommended,
+                description,
+                badge,
+                title,
+            };
+        }
+
+        function normalizeSubscriptionRenewal(payload) {
+            if (!payload || typeof payload !== 'object') {
+                return null;
+            }
+
+            const root = payload.renewal
+                || payload.data
+                || payload.options
+                || payload;
+            if (!root || typeof root !== 'object') {
+                return null;
+            }
+
+            const currency = (root.currency
+                ?? payload.currency
+                ?? userData?.balance_currency
+                ?? 'RUB').toString().toUpperCase();
+
+            const subscriptionId = coercePositiveInt(
+                root.subscription_id
+                    ?? root.subscriptionId
+                    ?? payload.subscription_id
+                    ?? payload.subscriptionId
+                    ?? userData?.subscription_id
+                    ?? userData?.subscriptionId,
+                null,
+            );
+
+            const balanceKopeks = coercePositiveInt(
+                root.balance_kopeks
+                    ?? root.balanceKopeks
+                    ?? payload.balance_kopeks
+                    ?? payload.balanceKopeks
+                    ?? userData?.balance_kopeks,
+                null,
+            );
+            const balanceLabel = root.balance_label
+                ?? root.balanceLabel
+                ?? payload.balance_label
+                ?? payload.balanceLabel
+                ?? (balanceKopeks !== null ? formatPriceFromKopeks(balanceKopeks, currency) : '');
+
+            const periodsRaw = ensureArray(
+                root.periods
+                    ?? root.options
+                    ?? root.available
+                    ?? root.renewal_options
+                    ?? root.renewalOptions
+                    ?? [],
+            );
+            const periods = periodsRaw
+                .map(option => normalizeRenewalOption(option, { currency }))
+                .filter(Boolean);
+
+            const defaultPeriodIdRaw = root.default_period_id
+                ?? root.defaultPeriodId
+                ?? root.default_option_id
+                ?? root.defaultOptionId
+                ?? null;
+            const defaultPeriodId = defaultPeriodIdRaw != null ? String(defaultPeriodIdRaw) : null;
+
+            const missingAmountKopeks = coercePositiveInt(
+                root.missing_amount_kopeks
+                    ?? root.missingAmountKopeks
+                    ?? null,
+                null,
+            );
+
+            const statusMessage = root.status_message
+                ?? root.statusMessage
+                ?? root.message
+                ?? null;
+
+            const promoGroup = root.promo_group
+                ?? root.promoGroup
+                ?? userData?.promo_group
+                ?? null;
+
+            const promoOffer = normalizeRenewalPromoOffer(root.promo_offer ?? root.promoOffer);
+
+            return {
+                subscriptionId,
+                currency,
+                balanceKopeks,
+                balanceLabel,
+                periods,
+                defaultPeriodId: defaultPeriodId || (periods.length ? periods[0].id : null),
+                promoGroup,
+                promoOffer,
+                missingAmountKopeks,
+                statusMessage,
+            };
+        }
+
+        function prepareSubscriptionRenewalFromUserData() {
+            const candidates = [
+                userData?.subscription_renewal,
+                userData?.subscriptionRenewal,
+                userData?.renewal,
+                userData?.renewal_options,
+                userData?.renewalOptions,
+            ];
+
+            for (const candidate of candidates) {
+                const normalized = normalizeSubscriptionRenewal(candidate);
+                if (normalized && Array.isArray(normalized.periods) && normalized.periods.length) {
+                    subscriptionRenewalData = normalized;
+                    resetSubscriptionRenewalSelection(normalized);
+                    return;
+                }
+            }
+
+            resetSubscriptionRenewalSelection(null);
+        }
+
+        function extractRenewalError(payload, status) {
+            if (status === 401) {
+                return t('subscription_renewal.error.unauthorized');
+            }
+            if (!payload || typeof payload !== 'object') {
+                return t('subscription_renewal.error.generic');
+            }
+            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;
+            }
+            return t('subscription_renewal.error.generic');
+        }
+
+        function resolveRenewalErrorMessage(error, fallbackKey = 'subscription_renewal.error.generic') {
+            if (!error) {
+                return t(fallbackKey);
+            }
+            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) {
+                return t('subscription_renewal.error.unauthorized');
+            }
+            return t(fallbackKey);
+        }
+
+        function ensureSubscriptionRenewalData(options = {}) {
+            const { force = false } = options;
+
+            if (!hasPaidSubscription()) {
+                resetSubscriptionRenewalState(null);
+                renderSubscriptionRenewalCard();
+                return Promise.resolve(null);
+            }
+
+            if (!force) {
+                if (subscriptionRenewalPromise) {
+                    return subscriptionRenewalPromise;
+                }
+                if (subscriptionRenewalData && !subscriptionRenewalError) {
+                    return Promise.resolve(subscriptionRenewalData);
+                }
+            }
+
+            const inlineNormalized = options.inline ? normalizeSubscriptionRenewal(options.inline) : null;
+            if (!force && inlineNormalized && inlineNormalized.periods.length) {
+                subscriptionRenewalData = inlineNormalized;
+                subscriptionRenewalError = null;
+                subscriptionRenewalLoading = false;
+                resetSubscriptionRenewalSelection(inlineNormalized);
+                renderSubscriptionRenewalCard();
+                return Promise.resolve(inlineNormalized);
+            }
+
+            const initData = tg.initData || '';
+            if (!initData) {
+                const error = createError('Authorization Error', t('subscription_renewal.error.unauthorized'));
+                subscriptionRenewalError = error;
+                subscriptionRenewalLoading = false;
+                renderSubscriptionRenewalCard();
+                return Promise.reject(error);
+            }
+
+            subscriptionRenewalLoading = true;
+            subscriptionRenewalError = null;
+            renderSubscriptionRenewalCard();
+
+            const payload = {
+                initData,
+                subscription_id: userData?.subscription_id ?? userData?.subscriptionId ?? null,
+                subscriptionId: userData?.subscription_id ?? userData?.subscriptionId ?? null,
+            };
+
+            const request = fetch('/miniapp/subscription/renewal/options', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            }).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 = normalizeSubscriptionRenewal(body);
+                subscriptionRenewalData = normalized;
+                subscriptionRenewalError = null;
+                subscriptionRenewalLoading = false;
+                subscriptionRenewalPromise = null;
+                resetSubscriptionRenewalSelection(normalized);
+                renderSubscriptionRenewalCard();
+                return normalized;
+            }).catch(error => {
+                subscriptionRenewalError = error;
+                subscriptionRenewalLoading = false;
+                subscriptionRenewalPromise = null;
+                renderSubscriptionRenewalCard();
+                throw error;
+            });
+
+            subscriptionRenewalPromise = request;
+            return request;
+        }
+
+        function buildRenewalPeriodLabel(option) {
+            if (!option) {
+                return '';
+            }
+            if (option.title) {
+                return option.title;
+            }
+
+            const months = coercePositiveInt(option.months, null);
+            if (months && months > 0) {
+                const key = months === 1
+                    ? 'subscription_renewal.period.month_one'
+                    : 'subscription_renewal.period.month_other';
+                const template = t(key);
+                if (template && template !== key && template.includes('{count}')) {
+                    return template.replace('{count}', String(months));
+                }
+                return `${months} mo`;
+            }
+
+            const days = coercePositiveInt(option.days, null);
+            if (days && days > 0) {
+                const template = t('subscription_renewal.period.days');
+                if (template && template !== 'subscription_renewal.period.days' && template.includes('{count}')) {
+                    return template.replace('{count}', String(days));
+                }
+                return `${days} days`;
+            }
+
+            return option.id || '';
+        }
+
+        function renderSubscriptionRenewalSummaryChip(data) {
+            const container = document.getElementById('subscriptionRenewalSummaryChip');
+            if (!container) {
+                return;
+            }
+            container.innerHTML = '';
+
+            if (!data) {
+                container.classList.add('hidden');
+                return;
+            }
+
+            const option = data.periods?.find(entry => entry?.id === subscriptionRenewalSelection.periodId) || null;
+            if (!option) {
+                container.classList.add('hidden');
+                return;
+            }
+
+            const periodLabel = buildRenewalPeriodLabel(option);
+            const amountLabel = option.priceLabel
+                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : null);
+
+            if (periodLabel) {
+                const chip = document.createElement('div');
+                chip.className = 'subscription-renewal-chip';
+                chip.textContent = periodLabel;
+                container.appendChild(chip);
+            }
+
+            if (amountLabel) {
+                const chip = document.createElement('div');
+                chip.className = 'subscription-renewal-chip';
+                chip.textContent = amountLabel;
+                container.appendChild(chip);
+            }
+
+            container.classList.toggle('hidden', container.children.length === 0);
+        }
+
+        function renderSubscriptionRenewalMeta(data) {
+            const promoBlock = document.getElementById('subscriptionRenewalPromoGroupBlock');
+            const promoContainer = document.getElementById('subscriptionRenewalPromoGroup');
+            if (promoBlock && promoContainer) {
+                promoContainer.innerHTML = '';
+                const hasDiscounts = populatePromoDiscounts(promoContainer, data?.promoGroup, { showEmptyMessage: false });
+                if (!hasDiscounts) {
+                    const template = t('subscription_renewal.meta.promo_group.empty');
+                    if (template && template !== 'subscription_renewal.meta.promo_group.empty') {
+                        const empty = document.createElement('span');
+                        empty.className = 'subscription-renewal-meta-empty';
+                        empty.textContent = template;
+                        promoContainer.appendChild(empty);
+                        promoBlock.classList.remove('hidden');
+                    } else {
+                        promoBlock.classList.add('hidden');
+                    }
+                } else {
+                    promoBlock.classList.remove('hidden');
+                }
+            }
+
+            const offerBlock = document.getElementById('subscriptionRenewalOfferBlock');
+            const offerContainer = document.getElementById('subscriptionRenewalOffer');
+            if (offerBlock && offerContainer) {
+                offerContainer.innerHTML = '';
+                const offer = data?.promoOffer || null;
+                const offerPercent = offer
+                    ? coercePositiveInt(offer.percent ?? offer.discount_percent ?? offer.discount, null)
+                    : null;
+                if (offer && offerPercent !== null && offerPercent > 0) {
+                    const badge = document.createElement('div');
+                    badge.className = 'subscription-renewal-offer-badge';
+                    const template = t('subscription_renewal.meta.promo_offer.active');
+                    const percentLabel = formatPercentValue(offerPercent);
+                    badge.textContent = template && template !== 'subscription_renewal.meta.promo_offer.active'
+                        ? template.replace('{percent}', percentLabel)
+                        : `Extra discount ${percentLabel}%`;
+                    offerContainer.appendChild(badge);
+
+                    if (offer.message) {
+                        const message = document.createElement('div');
+                        message.className = 'subscription-renewal-offer-note';
+                        message.textContent = offer.message;
+                        offerContainer.appendChild(message);
+                    }
+
+                    if (offer.expiresAt) {
+                        const formatted = formatDateTime(offer.expiresAt) || formatDate(offer.expiresAt);
+                        if (formatted) {
+                            const expiresTemplate = t('subscription_renewal.meta.promo_offer.until');
+                            const expiresText = expiresTemplate && expiresTemplate !== 'subscription_renewal.meta.promo_offer.until'
+                                ? expiresTemplate.replace('{date}', formatted)
+                                : `Valid until ${formatted}`;
+                            const note = document.createElement('div');
+                            note.className = 'subscription-renewal-offer-note';
+                            note.textContent = expiresText;
+                            offerContainer.appendChild(note);
+                        }
+                    }
+
+                    offerBlock.classList.remove('hidden');
+                } else {
+                    offerBlock.classList.add('hidden');
+                }
+            }
+        }
+
+        function renderSubscriptionRenewalOptions(data) {
+            const container = document.getElementById('subscriptionRenewalOptions');
+            if (!container) {
+                return;
+            }
+            container.innerHTML = '';
+
+            const options = ensureArray(data?.periods);
+            if (!options.length) {
+                const statusText = document.getElementById('subscriptionRenewalStatus');
+                if (statusText) {
+                    const template = t('subscription_renewal.status.empty');
+                    statusText.textContent = template && template !== 'subscription_renewal.status.empty'
+                        ? template
+                        : 'No renewal options are currently available.';
+                    statusText.classList.remove('hidden');
+                }
+                renderSubscriptionRenewalSummary(data);
+                renderSubscriptionRenewalSummaryChip(data);
+                return;
+            }
+
+            const statusText = document.getElementById('subscriptionRenewalStatus');
+            statusText?.classList.add('hidden');
+
+            const selectedId = subscriptionRenewalSelection.periodId;
+
+            options.forEach(option => {
+                if (!option) {
+                    return;
+                }
+
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'subscription-settings-toggle subscription-renewal-option';
+                if (option.id === selectedId) {
+                    button.classList.add('active');
+                }
+                if (subscriptionRenewalSubmitting) {
+                    button.disabled = true;
+                }
+
+                const label = document.createElement('div');
+                label.className = 'subscription-settings-toggle-label';
+
+                if (option.isRecommended || option.badge) {
+                    const badge = document.createElement('div');
+                    badge.className = 'subscription-renewal-option-badge';
+                    if (option.badge && typeof option.badge === 'string') {
+                        badge.textContent = option.badge;
+                    } else {
+                        const template = t('subscription_renewal.badge.recommended');
+                        badge.textContent = template && template !== 'subscription_renewal.badge.recommended'
+                            ? template
+                            : 'Recommended';
+                    }
+                    label.appendChild(badge);
+                }
+
+                const title = document.createElement('div');
+                title.className = 'subscription-settings-toggle-title';
+                title.textContent = buildRenewalPeriodLabel(option);
+                label.appendChild(title);
+
+                if (option.description) {
+                    const description = document.createElement('div');
+                    description.className = 'subscription-renewal-option-description';
+                    description.textContent = option.description;
+                    label.appendChild(description);
+                }
+
+                const meta = document.createElement('div');
+                meta.className = 'subscription-settings-toggle-meta';
+
+                const priceRow = document.createElement('div');
+                priceRow.className = 'subscription-renewal-option-price';
+
+                if (option.priceLabel) {
+                    const current = document.createElement('span');
+                    current.className = 'subscription-renewal-option-price-current';
+                    current.textContent = option.priceLabel;
+                    priceRow.appendChild(current);
+                } else if (option.priceKopeks !== null) {
+                    const current = document.createElement('span');
+                    current.className = 'subscription-renewal-option-price-current';
+                    current.textContent = formatPriceFromKopeks(option.priceKopeks, data.currency);
+                    priceRow.appendChild(current);
+                }
+
+                const showOriginal = hasActivePriceDiscount(option)
+                    && (
+                        Boolean(option.originalPriceLabel)
+                        || (
+                            option.originalPriceKopeks !== null
+                            && option.priceKopeks !== null
+                        )
+                    );
+                if (showOriginal) {
+                    const original = document.createElement('span');
+                    original.className = 'subscription-renewal-option-price-original';
+                    original.textContent = option.originalPriceLabel
+                        || formatPriceFromKopeks(option.originalPriceKopeks, data.currency);
+                    priceRow.appendChild(original);
+                }
+
+                const optionDiscountPercent = coercePositiveInt(option.discountPercent, null);
+                if (optionDiscountPercent !== null && optionDiscountPercent > 0) {
+                    const discount = document.createElement('span');
+                    discount.className = 'subscription-renewal-option-discount';
+                    const discountLabel = formatPercentValue(optionDiscountPercent);
+                    discount.textContent = `-${discountLabel}%`;
+                    priceRow.appendChild(discount);
+                }
+
+                meta.appendChild(priceRow);
+
+                if (option.pricePerMonthLabel) {
+                    const note = document.createElement('div');
+                    note.className = 'subscription-renewal-option-note';
+                    const template = t('subscription_renewal.summary.per_month');
+                    note.textContent = template && template !== 'subscription_renewal.summary.per_month'
+                        ? template.replace('{amount}', option.pricePerMonthLabel)
+                        : `${option.pricePerMonthLabel} per month`;
+                    meta.appendChild(note);
+                } else if (option.pricePerMonthKopeks !== null) {
+                    const perMonthLabel = formatPriceFromKopeks(option.pricePerMonthKopeks, data.currency);
+                    const template = t('subscription_renewal.summary.per_month');
+                    const text = template && template !== 'subscription_renewal.summary.per_month'
+                        ? template.replace('{amount}', perMonthLabel)
+                        : `${perMonthLabel} per month`;
+                    const note = document.createElement('div');
+                    note.className = 'subscription-renewal-option-note';
+                    note.textContent = text;
+                    meta.appendChild(note);
+                }
+
+                label.appendChild(meta);
+                button.appendChild(label);
+
+                button.addEventListener('click', () => {
+                    if (subscriptionRenewalSubmitting) {
+                        return;
+                    }
+                    subscriptionRenewalSelection.periodId = option.id;
+                    renderSubscriptionRenewalOptions(data);
+                    renderSubscriptionRenewalSummary(data);
+                    renderSubscriptionRenewalSummaryChip(data);
+                });
+
+                container.appendChild(button);
+            });
+
+            if (!subscriptionRenewalSelection.periodId && options.length) {
+                subscriptionRenewalSelection.periodId = options[0].id;
+            }
+
+            renderSubscriptionRenewalSummary(data);
+        }
+
+        function renderSubscriptionRenewalSummary(data) {
+            const summary = document.getElementById('subscriptionRenewalSummary');
+            const priceCurrent = document.getElementById('subscriptionRenewalPriceCurrent');
+            const priceOriginal = document.getElementById('subscriptionRenewalPriceOriginal');
+            const priceDiscount = document.getElementById('subscriptionRenewalPriceDiscount');
+            const priceNote = document.getElementById('subscriptionRenewalPriceNote');
+            const balanceWarning = document.getElementById('subscriptionRenewalBalanceWarning');
+            const submitButton = document.getElementById('subscriptionRenewalSubmit');
+
+            if (!summary || !priceCurrent || !submitButton) {
+                return;
+            }
+
+            const option = data?.periods?.find(entry => entry?.id === subscriptionRenewalSelection.periodId) || null;
+
+            if (!option) {
+                priceCurrent.textContent = '—';
+                if (priceOriginal) {
+                    priceOriginal.textContent = '';
+                    priceOriginal.classList.add('hidden');
+                }
+                if (priceDiscount) {
+                    priceDiscount.textContent = '';
+                    priceDiscount.classList.add('hidden');
+                }
+                if (priceNote) {
+                    priceNote.textContent = '';
+                    priceNote.classList.add('hidden');
+                }
+                if (balanceWarning) {
+                    balanceWarning.textContent = '';
+                    balanceWarning.classList.add('hidden');
+                }
+                submitButton.disabled = true;
+                const submitLabel = t('subscription_renewal.submit');
+                submitButton.textContent = submitLabel === 'subscription_renewal.submit' ? 'Renew' : submitLabel;
+                renderSubscriptionRenewalSummaryChip(data);
+                return;
+            }
+
+            const amountLabel = option.priceLabel
+                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : null);
+            priceCurrent.textContent = amountLabel || '—';
+
+            const discountPercentValue = coercePositiveInt(option.discountPercent, null);
+            const showOriginal = hasActivePriceDiscount(option)
+                && (
+                    Boolean(option.originalPriceLabel)
+                    || (
+                        option.originalPriceKopeks !== null
+                        && option.priceKopeks !== null
+                    )
+                );
+            if (priceOriginal) {
+                if (showOriginal) {
+                    const label = option.originalPriceLabel
+                        || formatPriceFromKopeks(option.originalPriceKopeks, data.currency);
+                    priceOriginal.textContent = label;
+                    priceOriginal.classList.remove('hidden');
+                } else {
+                    priceOriginal.textContent = '';
+                    priceOriginal.classList.add('hidden');
+                }
+            }
+
+            if (priceDiscount) {
+                if (discountPercentValue !== null && discountPercentValue > 0) {
+                    const template = t('subscription_renewal.summary.discount');
+                    const discountLabel = formatPercentValue(discountPercentValue);
+                    priceDiscount.textContent = template && template !== 'subscription_renewal.summary.discount'
+                        ? template.replace('{percent}', discountLabel)
+                        : `You save ${discountLabel}%`;
+                    priceDiscount.classList.remove('hidden');
+                } else {
+                    priceDiscount.textContent = '';
+                    priceDiscount.classList.add('hidden');
+                }
+            }
+
+            if (priceNote) {
+                if (option.pricePerMonthLabel) {
+                    const template = t('subscription_renewal.summary.per_month');
+                    priceNote.textContent = template && template !== 'subscription_renewal.summary.per_month'
+                        ? template.replace('{amount}', option.pricePerMonthLabel)
+                        : `${option.pricePerMonthLabel} per month`;
+                    priceNote.classList.remove('hidden');
+                } else if (option.pricePerMonthKopeks !== null) {
+                    const perMonthLabel = formatPriceFromKopeks(option.pricePerMonthKopeks, data.currency);
+                    const template = t('subscription_renewal.summary.per_month');
+                    priceNote.textContent = template && template !== 'subscription_renewal.summary.per_month'
+                        ? template.replace('{amount}', perMonthLabel)
+                        : `${perMonthLabel} per month`;
+                    priceNote.classList.remove('hidden');
+                } else {
+                    priceNote.textContent = '';
+                    priceNote.classList.add('hidden');
+                }
+            }
+
+            const balanceKopeks = data?.balanceKopeks ?? coercePositiveInt(userData?.balance_kopeks, null);
+            const priceKopeks = option.priceKopeks;
+            let missing = data?.missingAmountKopeks ?? null;
+            if (missing === null && balanceKopeks !== null && priceKopeks !== null && balanceKopeks < priceKopeks) {
+                missing = priceKopeks - balanceKopeks;
+            }
+            if (balanceWarning) {
+                if (missing !== null && missing > 0) {
+                    const missingLabel = formatPriceFromKopeks(missing, data.currency);
+                    const template = t('subscription_renewal.summary.insufficient');
+                    balanceWarning.textContent = template && template !== 'subscription_renewal.summary.insufficient'
+                        ? template.replace('{missing}', missingLabel)
+                        : `Not enough balance — missing ${missingLabel}.`;
+                    balanceWarning.classList.remove('hidden');
+                } else {
+                    balanceWarning.textContent = '';
+                    balanceWarning.classList.add('hidden');
+                }
+            }
+
+            submitButton.disabled = subscriptionRenewalSubmitting || option.priceKopeks === null;
+            const submitKey = subscriptionRenewalSubmitting
+                ? 'subscription_renewal.submit.loading'
+                : 'subscription_renewal.submit';
+            const submitLabel = t(submitKey);
+            submitButton.textContent = submitLabel === submitKey
+                ? (subscriptionRenewalSubmitting ? 'Processing…' : 'Renew')
+                : submitLabel;
+
+            renderSubscriptionRenewalSummaryChip(data);
+        }
+
+        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 body = document.getElementById('subscriptionRenewalBody');
+            const statusText = document.getElementById('subscriptionRenewalStatus');
+
+            if (subscriptionRenewalLoading) {
+                loadingBlock?.classList.remove('hidden');
+                errorBlock?.classList.add('hidden');
+                body?.classList.add('hidden');
+                if (statusText) {
+                    const template = t('subscription_renewal.status.loading');
+                    statusText.textContent = template && template !== 'subscription_renewal.status.loading'
+                        ? template
+                        : 'Loading renewal options…';
+                    statusText.classList.remove('hidden');
+                }
+                return;
+            }
+
+            loadingBlock?.classList.add('hidden');
+
+            if (subscriptionRenewalError) {
+                body?.classList.add('hidden');
+                if (errorBlock) {
+                    const errorText = document.getElementById('subscriptionRenewalErrorText');
+                    if (errorText) {
+                        errorText.textContent = resolveRenewalErrorMessage(subscriptionRenewalError);
+                    }
+                    errorBlock.classList.remove('hidden');
+                }
+                statusText?.classList.add('hidden');
+                return;
+            }
+
+            errorBlock?.classList.add('hidden');
+
+            if (!subscriptionRenewalData) {
+                body?.classList.add('hidden');
+                statusText?.classList.add('hidden');
+                ensureSubscriptionRenewalData().catch(error => {
+                    console.warn('Failed to load subscription renewal options:', error);
+                });
+                return;
+            }
+
+            body?.classList.remove('hidden');
+
+            if (subscriptionRenewalData.statusMessage && statusText) {
+                statusText.textContent = subscriptionRenewalData.statusMessage;
+                statusText.classList.remove('hidden');
+            } else if (statusText) {
+                statusText.classList.add('hidden');
+            }
+
+            renderSubscriptionRenewalMeta(subscriptionRenewalData);
+            renderSubscriptionRenewalOptions(subscriptionRenewalData);
+            renderSubscriptionRenewalSummary(subscriptionRenewalData);
+        }
+
+        async function confirmSubscriptionRenewal(option, data) {
+            const amountLabel = option.priceLabel
+                || (option.priceKopeks !== null ? formatPriceFromKopeks(option.priceKopeks, data.currency) : '');
+            const periodLabel = buildRenewalPeriodLabel(option);
+
+            const messageTemplate = t('subscription_renewal.confirm.message');
+            const message = messageTemplate && messageTemplate !== 'subscription_renewal.confirm.message'
+                ? messageTemplate.replace('{period}', periodLabel).replace('{amount}', amountLabel)
+                : `Renew the subscription for ${periodLabel} and pay ${amountLabel}?`;
+
+            const balanceLabel = data?.balanceLabel
+                || (data.balanceKopeks !== null ? formatPriceFromKopeks(data.balanceKopeks, data.currency) : null);
+
+            let finalMessage = message;
+            if (balanceLabel) {
+                const balanceTemplate = t('subscription_renewal.confirm.balance');
+                const balanceText = balanceTemplate && balanceTemplate !== 'subscription_renewal.confirm.balance'
+                    ? balanceTemplate.replace('{balance}', balanceLabel)
+                    : `Current balance: ${balanceLabel}`;
+                finalMessage = `${message}\n${balanceText}`;
+            }
+
+            const titleKey = 'subscription_renewal.confirm.title';
+            const confirmKey = 'subscription_renewal.confirm.accept';
+            const cancelKey = 'subscription_renewal.confirm.cancel';
+
+            const title = t(titleKey);
+            const confirmText = t(confirmKey);
+            const cancelText = t(cancelKey);
+
+            return showConfirmationPopup({
+                title: title === titleKey ? 'Confirm renewal' : title,
+                message: finalMessage,
+                confirmText: confirmText === confirmKey ? 'Pay' : confirmText,
+                cancelText: cancelText === cancelKey ? 'Cancel' : cancelText,
+                destructive: true,
+            });
+        }
+
+        function handleSubscriptionRenewalError(error) {
+            const message = resolveRenewalErrorMessage(error);
+            const titleKey = 'subscription_renewal.title';
+            const title = t(titleKey);
+            showPopup(message, title === titleKey ? 'Subscription renewal' : title);
+        }
+
+        async function submitSubscriptionRenewal() {
+            if (subscriptionRenewalSubmitting || subscriptionRenewalLoading) {
+                return;
+            }
+
+            if (!hasPaidSubscription()) {
+                handleSubscriptionRenewalError(createError('Subscription renewal', t('subscription_renewal.error.validation')));
+                return;
+            }
+
+            const data = subscriptionRenewalData;
+            const option = data?.periods?.find(entry => entry?.id === subscriptionRenewalSelection.periodId) || null;
+            if (!option) {
+                handleSubscriptionRenewalError(createError('Validation', t('subscription_renewal.error.validation')));
+                return;
+            }
+
+            const initData = tg.initData || '';
+            if (!initData) {
+                handleSubscriptionRenewalError(createError('Authorization Error', t('subscription_renewal.error.unauthorized')));
+                return;
+            }
+
+            const confirmed = await confirmSubscriptionRenewal(option, data);
+            if (!confirmed) {
+                return;
+            }
+
+            const submitButton = document.getElementById('subscriptionRenewalSubmit');
+            subscriptionRenewalSubmitting = true;
+            if (submitButton) {
+                submitButton.disabled = true;
+                const label = t('subscription_renewal.submit.loading');
+                submitButton.textContent = label === 'subscription_renewal.submit.loading'
+                    ? 'Processing…'
+                    : label;
+            }
+
+            renderSubscriptionRenewalCard();
+
+            try {
+                const payload = {
+                    initData,
+                    subscription_id: data?.subscriptionId ?? userData?.subscription_id ?? userData?.subscriptionId ?? null,
+                    subscriptionId: data?.subscriptionId ?? userData?.subscription_id ?? userData?.subscriptionId ?? null,
+                    period_id: option.id,
+                    periodId: option.id,
+                    period_days: option.days ?? null,
+                    periodDays: option.days ?? null,
+                };
+
+                const response = await fetch('/miniapp/subscription/renewal', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                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 successMessage = t(successKey);
+                const titleKey = 'subscription_renewal.title';
+                const title = t(titleKey);
+                showPopup(
+                    successMessage === successKey ? 'Subscription renewed successfully.' : successMessage,
+                    title === titleKey ? 'Subscription renewal' : title,
+                );
+
+                await refreshSubscriptionData({ silent: true });
+                await ensureSubscriptionRenewalData({ force: true });
+            } catch (error) {
+                console.error('Failed to renew subscription:', error);
+                handleSubscriptionRenewalError(error);
+            } finally {
+                subscriptionRenewalSubmitting = false;
+                renderSubscriptionRenewalCard();
+            }
+        }
+
+        function setupSubscriptionRenewalEvents() {
+            document.getElementById('subscriptionRenewalRetry')?.addEventListener('click', () => {
+                ensureSubscriptionRenewalData({ force: true }).catch(error => {
+                    console.warn('Failed to reload renewal options:', error);
+                });
+            });
+            document.getElementById('subscriptionRenewalSubmit')?.addEventListener('click', submitSubscriptionRenewal);
+        }
+
         function extractSettingsError(payload, status) {
             if (status === 401) {
                 return t('subscription_settings.error.unauthorized');