-
R
- Моя подписка
+ /
+
+
/tnnl
+ Моя подписка
+
-
+
-
+
-
+
-
-
-
-
-
-
-
- Поддержка
+ Поддержка
-
+ Осталось
- ...
-
+
- subscription
...
+
@@ -414,29 +658,68 @@
+
+
+
+
+ ...
+Ваша ссылка подключения и срок доступа
+
-
Окончание
+ ends_at
...
-
Трафик
+ traffic
...
Оплата подписки
-
+
+
-
+
+
+ Оплата подписки
+ Выберите срок, способ оплаты и создайте платеж.
+ Способ оплаты
-
+
+
+
+
+ 01
+ Срок
+
+
+ 02
+ Метод
+
+
+ 03
+ Платеж
+
+
+
+
+ select_period
+
+
+
+
+
+ select_method
+
+
+
+
+
+
+
payment_status
+
+
+
+
+
+
+
+
@@ -449,12 +732,16 @@
token: localStorage.getItem('rw_webapp_token') || '',
data: null,
selectedPlan: null,
+ selectedMethod: null,
payment: null,
+ paymentFlowOpen: false,
+ paymentStep: 'plan',
+ creatingPayment: false,
authPoll: null
};
- document.documentElement.classList.toggle('theme-dark', !tg || tg.colorScheme !== 'light');
- document.documentElement.style.setProperty('--accent', CFG.primaryColor || '#10b981');
+ const accent = CFG.primaryColor || '#00fe7a';
+ document.documentElement.style.setProperty('--accent', accent);
document.title = CFG.title || 'Моя подписка';
document.getElementById('brand-title').textContent = CFG.title || 'Моя подписка';
if (CFG.logoUrl) {
@@ -470,7 +757,8 @@
try {
tg.ready();
tg.expand();
- tg.setHeaderColor(CFG.primaryColor || '#10b981');
+ tg.setHeaderColor('#05070a');
+ tg.setBackgroundColor('#05070a');
} catch (e) { }
}
@@ -531,10 +819,15 @@
}
async function loadData() {
+ const previousMonths = state.selectedPlan && state.selectedPlan.months;
const data = await api('/me');
if (!data.ok) throw new Error(data.error || 'load failed');
state.data = data;
- state.selectedPlan = data.plans && data.plans.length ? data.plans[0] : null;
+ const plans = data.plans || [];
+ state.selectedPlan = plans.find(plan => plan.months === previousMonths) || plans[0] || null;
+ state.selectedMethod = null;
+ state.payment = null;
+ state.paymentStep = 'plan';
render();
showApp();
}
@@ -546,13 +839,12 @@
function render() {
renderSubscription(state.data.subscription);
- renderPlans(state.data.plans || []);
- renderMethods();
+ renderPaymentFlow();
}
function renderSubscription(sub) {
const badge = document.getElementById('status-badge');
- badge.textContent = sub.active ? 'Активна' : 'Не активна';
+ badge.textContent = sub.active ? 'ACTIVE' : 'INACTIVE';
badge.classList.toggle('off', !sub.active);
document.getElementById('remaining').textContent = sub.remaining_text || 'Нет активной подписки';
document.getElementById('end-date').textContent = sub.end_date_text || 'N/A';
@@ -560,103 +852,201 @@
document.getElementById('connect-actions').classList.toggle('hidden', !sub.connect_url && !sub.config_link);
}
+ function togglePaymentFlow() {
+ if (state.paymentFlowOpen) {
+ closePaymentFlow();
+ return;
+ }
+ state.paymentFlowOpen = true;
+ state.paymentStep = 'plan';
+ state.payment = null;
+ state.selectedMethod = null;
+ renderPaymentFlow();
+ document.getElementById('payment-flow').scrollIntoView({behavior: 'smooth', block: 'start'});
+ }
+
+ function closePaymentFlow() {
+ state.paymentFlowOpen = false;
+ state.paymentStep = 'plan';
+ state.payment = null;
+ state.selectedMethod = null;
+ renderPaymentFlow();
+ }
+
+ function renderPaymentFlow() {
+ const flow = document.getElementById('payment-flow');
+ flow.classList.toggle('hidden', !state.paymentFlowOpen);
+ if (!state.paymentFlowOpen) return;
+
+ renderStepState();
+ renderPlans(state.data.plans || []);
+ renderMethods();
+ renderPaymentResult();
+ }
+
+ function renderStepState() {
+ const order = ['plan', 'method', 'result'];
+ order.forEach((step, index) => {
+ const node = document.getElementById('step-' + step);
+ const currentIndex = order.indexOf(state.paymentStep);
+ node.classList.toggle('active', state.paymentStep === step);
+ node.classList.toggle('done', currentIndex > index);
+ });
+
+ document.getElementById('plan-step').classList.toggle('hidden', state.paymentStep !== 'plan');
+ document.getElementById('method-step').classList.toggle('hidden', state.paymentStep !== 'method');
+ document.getElementById('result-step').classList.toggle('hidden', state.paymentStep !== 'result');
+ }
+
function renderPlans(plans) {
const wrap = document.getElementById('plans');
+ const nextBtn = document.getElementById('to-methods-btn');
if (!plans.length) {
wrap.innerHTML = 'telegram_auth
Вход через Telegram
- Откройте бота и подтвердите вход. После подтверждения эта страница обновится автоматически.
+ Откройте бота и подтвердите вход. После подтверждения страница обновится автоматически.
Открыть Telegram
Тарифы не настроены.
';
- document.getElementById('methods-wrap').classList.add('hidden');
+ nextBtn.disabled = true;
return;
}
+ nextBtn.disabled = !state.selectedPlan;
wrap.innerHTML = plans.map(plan => {
const isActive = state.selectedPlan && state.selectedPlan.months === plan.months;
- const stars = plan.stars_price ? ' · ' + plan.stars_price + ' ⭐' : '';
+ const stars = plan.stars_price ? ' / ' + plan.stars_price + ' Stars' : '';
return `
`;
}).join('');
}
function renderMethods() {
- const wrap = document.getElementById('methods-wrap');
const methods = document.getElementById('methods');
+ const createBtn = document.getElementById('create-payment-btn');
if (!state.selectedPlan) {
- wrap.classList.add('hidden');
+ methods.innerHTML = 'Сначала выберите срок подписки.
';
+ createBtn.disabled = true;
return;
}
- const available = (state.data.payment_methods || []).filter(method => {
- if (method.id === 'stars') return Number.isFinite(Number(state.selectedPlan.stars_price));
- return true;
- });
- wrap.classList.remove('hidden');
+
+ const available = getAvailableMethods();
+ if (state.selectedMethod && !available.some(method => method.id === state.selectedMethod)) {
+ state.selectedMethod = null;
+ }
+
+ createBtn.disabled = !state.selectedMethod || state.creatingPayment;
if (!available.length) {
methods.innerHTML = 'Нет доступных способов оплаты.
';
+ createBtn.disabled = true;
return;
}
+
methods.innerHTML = available.map(method => {
+ const isActive = state.selectedMethod === method.id;
const amount = method.id === 'stars'
- ? state.selectedPlan.stars_price + ' ⭐'
+ ? state.selectedPlan.stars_price + ' Stars'
: formatMoney(state.selectedPlan.price, state.selectedPlan.currency);
return `
-