Design System v4 · VIP & Bonus
env: prodCountdownTimer — таймер обратного отсчёта
Компонент components/ui/CountdownTimer.html.twig, класс .yc-countdown. Значения считает сервер (правильны без JS), каждую секунду подкручивает assets/new/js/ui/countdown.ts. Props: ends_at (unix), label, size sm/md/lg, variant promo/plain, show_seconds, expired_text. Сегмент дней прячется сам, когда дней не осталось.
VipBoostBanner — промо-блок акции «×2 VIP-дней»
Компонент components/promo/VipBoostBanner.html.twig. Один и тот же блок стоит на главной, /user/vip и /balance; внутри — тот же CountdownTimer. Причина campaign — общее окно акции, newcomer — личные 30 дней новичка.
Промо-кнопки — золотая VIP-CTA
Премиум-кнопка для «денежных» призывов (VIP, повышение в лиге). Компонент components/ui/PromoButton.html.twig, класс .yc-promo-btn. Размеры sm / md / lg, вариант danger, режим block (на всю ширину), рендер как span для вложения в ссылку.
PromoButton в VIP-гейте лиги
Как это выглядит на главной: щит-иконка (/img/league/vip-gate.png) со свечением через .yc-vip-gate-ico + текст + PromoButton. На мобиле блок стекается, кнопка на всю ширину.
VipGate — заглушка платной функции
Компонент components/ui/VipGate.html.twig. Стоит вместо содержимого там, где функция доступна только с VIP (списки друзей и игнора). Props: title, desc, cta, href (default /user/vip), icon (default lock-closed).
С VIP-статусом можно собирать список друзей, видеть, кто из них сейчас в сети, и убирать неприятных соперников в игнор.
Стать VIPBonusDays — «+N дней VIP»
Живой порт картинки /img/pic/vip/{N}daysgift.png. Число дней + статус на градиентном фоне. Размеры sm / md.
BonusDays — Gold (чуть по-другому)
kind="gold" — другая подпись (Gold) и насыщенный золотой градиент по умолчанию.
BonusDays — варианты фона (variant)
Единственный «параметр стиля» — variant — меняет градиент фона.
BonusGift — бонусы «фишка с ленточкой»
Порт v1 /img/pic/chips_bonus.png — фишка с подарочным бантом + «+N в подарок». Размеры sm / md.
В контексте карточки пакета
Как это выглядит в пакетах пополнения на /balance и /user/vip.