${escapeHtml(t('purchase.empty'))}
`;
- return;
- }
-
- const currency = getPurchaseCurrency();
- const selectedId = subscriptionPurchaseSelections.period;
-
- periods.forEach(period => {
- const periodId = getPurchasePeriodId(period);
- const button = document.createElement('button');
- button.type = 'button';
- button.className = 'purchase-option';
- if (periodId === selectedId) {
- button.classList.add('active');
- }
-
- const label = getPurchasePeriodLabel(period);
- const price = getOptionPriceKopeks(period);
- const original = getOptionOriginalPriceKopeks(period);
- const priceLabel = formatPriceFromKopeks(price, currency);
- const originalHtml = Number.isFinite(original) && original !== null && original > price
- ? `${escapeHtml(label)}
-
- ${escapeHtml(priceLabel)}
- ${originalHtml}
-
- ${discount > 0 ? `-${escapeHtml(String(discount))}%
` : ''}
- ${description ? `${escapeHtml(description)}
` : ''}
- `;
-
- button.addEventListener('click', () => {
- subscriptionPurchaseSelections.period = periodId;
- renderSubscriptionPurchaseSections();
- });
-
- container.appendChild(button);
- });
- }
-
- function renderSubscriptionPurchaseTraffic() {
- const container = document.getElementById('subscriptionPurchaseTrafficOptions');
- const meta = document.getElementById('subscriptionPurchaseTrafficMeta');
- const note = document.getElementById('subscriptionPurchaseTrafficNote');
- if (!container) {
- return;
- }
- container.innerHTML = '';
- if (meta) {
- meta.textContent = '';
- }
- if (note) {
- note.classList.add('hidden');
- note.textContent = '';
- }
-
- const trafficConfig = getPurchaseTrafficConfig();
- if (!trafficConfig) {
- container.innerHTML = `${escapeHtml(t('purchase.empty'))}
`;
- return;
- }
-
- const options = getPurchaseTrafficOptions();
- const currency = getPurchaseCurrency();
- if (!options.length) {
- const limitRaw = getFirstDefined(trafficConfig, ['label', 'limit_label', 'limitLabel']);
- let amountLabel = '';
- if (typeof limitRaw === 'string' && limitRaw.trim()) {
- amountLabel = limitRaw.trim();
- } else {
- const limitValue = getFirstDefined(trafficConfig, ['gb', 'traffic_gb', 'trafficGb', 'limit_gb', 'limitGb']);
- if (limitValue !== undefined) {
- const numeric = Number(limitValue);
- if (Number.isFinite(numeric)) {
- amountLabel = formatTraffic(Math.max(numeric, 0));
- }
- }
- }
- if (note && amountLabel) {
- const template = t('purchase.traffic.fixed');
- note.textContent = template === 'purchase.traffic.fixed'
- ? `Monthly traffic: ${amountLabel}`
- : template.replace('{amount}', amountLabel);
- note.classList.remove('hidden');
- }
- return;
- }
-
- const selectedId = subscriptionPurchaseSelections.traffic;
-
- options.forEach(option => {
- const optionId = getTrafficId(option);
- const button = document.createElement('button');
- button.type = 'button';
- button.className = 'purchase-option';
- if (optionId === selectedId) {
- button.classList.add('active');
- }
-
- const label = getTrafficLabel(option) || t('purchase.traffic.title');
- const price = getOptionPriceKopeks(option);
- const original = getOptionOriginalPriceKopeks(option);
- const priceLabel = formatPriceFromKopeks(price, currency);
- const originalHtml = Number.isFinite(original) && original !== null && original > price
- ? `${escapeHtml(label)}
-
- ${escapeHtml(priceLabel)}
- ${originalHtml}
-
- ${description ? `${escapeHtml(description)}
` : ''}
- `;
-
- button.addEventListener('click', () => {
- subscriptionPurchaseSelections.traffic = optionId;
- renderSubscriptionPurchaseSections();
- });
-
- container.appendChild(button);
- });
- }
-
- function renderSubscriptionPurchaseServers() {
- const container = document.getElementById('subscriptionPurchaseServersChips');
- const meta = document.getElementById('subscriptionPurchaseServersMeta');
- const note = document.getElementById('subscriptionPurchaseServersNote');
- if (!container) {
- return;
- }
- container.innerHTML = '';
- if (meta) {
- meta.textContent = '';
- }
- if (note) {
- note.classList.add('hidden');
- note.textContent = '';
- }
-
- const options = getPurchaseServerOptions().filter(option => option?.is_available !== false);
- const selectable = getFirstDefined(getPurchaseServersConfig(), ['selectable', 'mode']) !== 'fixed';
- if (!options.length) {
- container.innerHTML = `${escapeHtml(t('purchase.empty'))}
`;
- return;
- }
-
- if (!selectable || options.length === 1) {
- const option = options[0];
- const label = getServerLabel(option);
- if (note) {
- const template = t('purchase.servers.single');
- note.textContent = template === 'purchase.servers.single'
- ? `Server: ${label}`
- : template.replace('{name}', label);
- note.classList.remove('hidden');
- }
- subscriptionPurchaseSelections.servers = new Set();
- const id = getServerId(option);
- if (id) {
- subscriptionPurchaseSelections.servers.add(id);
- }
- return;
- }
-
- const max = getPurchaseServersMax();
- const min = getPurchaseServersMin();
- const currency = getPurchaseCurrency();
-
- options.forEach(option => {
- const id = getServerId(option);
- if (!id) {
- return;
- }
- const button = document.createElement('button');
- button.type = 'button';
- button.className = 'purchase-chip';
- const price = getOptionPriceKopeks(option);
- const label = getServerLabel(option);
- const priceLabel = price > 0 ? ` +${formatPriceFromKopeks(price, currency)}` : '';
- button.innerHTML = `${escapeHtml(label)}${price > 0 ? `${escapeHtml(priceLabel)}` : ''}`;
-
- if (subscriptionPurchaseSelections.servers.has(id)) {
- button.classList.add('active');
- }
-
- button.addEventListener('click', () => {
- if (subscriptionPurchaseSelections.servers.has(id)) {
- subscriptionPurchaseSelections.servers.delete(id);
- } else {
- if (max > 0 && subscriptionPurchaseSelections.servers.size >= max) {
- return;
- }
- subscriptionPurchaseSelections.servers.add(id);
- }
- renderSubscriptionPurchaseSections();
- });
-
- container.appendChild(button);
- });
-
- if (meta) {
- const selectedCount = subscriptionPurchaseSelections.servers.size;
- if (max > 0) {
- const template = t('purchase.servers.meta');
- meta.textContent = template === 'purchase.servers.meta'
- ? `${selectedCount} of ${max} selected`
- : template.replace('{selected}', String(selectedCount)).replace('{max}', String(max));
- } else {
- const template = t('purchase.servers.meta_unlimited');
- meta.textContent = template === 'purchase.servers.meta_unlimited'
- ? `${selectedCount} selected`
- : template.replace('{selected}', String(selectedCount));
- }
- }
-
- if (note && min > 0 && subscriptionPurchaseSelections.servers.size < min) {
- note.textContent = t('purchase.validation.servers_min').replace('{min}', String(min));
- note.classList.remove('hidden');
- }
- }
-
- function renderSubscriptionPurchaseDevices() {
- const container = document.getElementById('subscriptionPurchaseDevicesOptions');
- const stepper = document.getElementById('subscriptionPurchaseDevicesStepper');
- const valueEl = document.getElementById('subscriptionPurchaseDevicesValue');
- const decreaseBtn = document.getElementById('subscriptionPurchaseDevicesDecrease');
- const increaseBtn = document.getElementById('subscriptionPurchaseDevicesIncrease');
- const meta = document.getElementById('subscriptionPurchaseDevicesMeta');
- const note = document.getElementById('subscriptionPurchaseDevicesNote');
- if (!container) {
- return;
- }
- container.innerHTML = '';
- if (meta) {
- meta.textContent = '';
- }
- if (note) {
- note.textContent = '';
- note.classList.add('hidden');
- }
-
- const options = getPurchaseDeviceOptions();
- const currency = getPurchaseCurrency();
- if (options.length) {
- if (stepper) {
- stepper.classList.add('hidden');
- }
-
- const selectedValue = subscriptionPurchaseSelections.devices;
- options.forEach(option => {
- const value = getDeviceValue(option);
- const button = document.createElement('button');
- button.type = 'button';
- button.className = 'purchase-option';
- if (value !== null && value === selectedValue) {
- button.classList.add('active');
- }
-
- const label = value !== null ? formatDeviceCountLabel(value) : getOptionLabel(option);
- const price = getOptionPriceKopeks(option);
- const original = getOptionOriginalPriceKopeks(option);
- const priceLabel = formatPriceFromKopeks(price, currency);
- const originalHtml = Number.isFinite(original) && original !== null && original > price
- ? `${escapeHtml(label)}
-
- ${escapeHtml(priceLabel)}
- ${originalHtml}
-
- ${description ? `${escapeHtml(description)}
` : ''}
- `;
-
- button.addEventListener('click', () => {
- subscriptionPurchaseSelections.devices = value;
- renderSubscriptionPurchaseSections();
- });
-
- container.appendChild(button);
- });
-
- const max = getPurchaseDevicesMax();
- if (meta && max) {
- meta.textContent = t('purchase.devices.meta').replace('{max}', String(max));
- }
- return;
- }
-
- const devicesConfig = getPurchaseDevicesConfig();
- if (!devicesConfig || !stepper || !valueEl || !decreaseBtn || !increaseBtn) {
- container.innerHTML = `${escapeHtml(t('purchase.empty'))}
`;
- return;
- }
-
- stepper.classList.remove('hidden');
- const min = getPurchaseDevicesMin() || 1;
- const max = getPurchaseDevicesMax();
- const step = Math.max(1, getPurchaseDevicesStep());
- let value = subscriptionPurchaseSelections.devices ?? min;
- if (value < min) {
- value = min;
- }
- if (max > 0 && value > max) {
- value = max;
- }
- subscriptionPurchaseSelections.devices = value;
- valueEl.textContent = String(value);
-
- decreaseBtn.disabled = value <= min;
- increaseBtn.disabled = max > 0 ? value >= max : false;
-
- decreaseBtn.onclick = () => {
- const next = subscriptionPurchaseSelections.devices - step;
- if (next < min) {
- return;
- }
- subscriptionPurchaseSelections.devices = next;
- renderSubscriptionPurchaseSections();
- };
-
- increaseBtn.onclick = () => {
- const next = subscriptionPurchaseSelections.devices + step;
- if (max > 0 && next > max) {
- return;
- }
- subscriptionPurchaseSelections.devices = next;
- renderSubscriptionPurchaseSections();
- };
-
- if (meta && max) {
- meta.textContent = t('purchase.devices.meta').replace('{max}', String(max));
- }
- }
-
- function computeSubscriptionPurchaseTotals() {
- const root = getPurchaseRoot();
- if (!root) {
- subscriptionPurchaseLastTotals = null;
- return null;
- }
-
- const currency = getPurchaseCurrency();
- let total = 0;
- let original = 0;
-
- const period = getSelectedPeriod();
- if (period) {
- const price = getOptionPriceKopeks(period);
- const originalPrice = getOptionOriginalPriceKopeks(period);
- total += price;
- original += originalPrice !== null ? Math.max(originalPrice, price) : price;
- }
-
- const traffic = getSelectedTrafficOption();
- if (traffic) {
- const price = getOptionPriceKopeks(traffic);
- const originalPrice = getOptionOriginalPriceKopeks(traffic);
- total += price;
- original += originalPrice !== null ? Math.max(originalPrice, price) : price;
- }
-
- const serverOptions = getPurchaseServerOptions();
- if (serverOptions.length && subscriptionPurchaseSelections.servers instanceof Set) {
- serverOptions.forEach(option => {
- const id = getServerId(option);
- if (!id || !subscriptionPurchaseSelections.servers.has(id)) {
- return;
- }
- const price = getOptionPriceKopeks(option);
- const originalPrice = getOptionOriginalPriceKopeks(option);
- total += price;
- original += originalPrice !== null ? Math.max(originalPrice, price) : price;
- });
- }
-
- const deviceOptions = getPurchaseDeviceOptions();
- if (deviceOptions.length) {
- const selected = deviceOptions.find(option => getDeviceValue(option) === subscriptionPurchaseSelections.devices);
- if (selected) {
- const price = getOptionPriceKopeks(selected);
- const originalPrice = getOptionOriginalPriceKopeks(selected);
- total += price;
- original += originalPrice !== null ? Math.max(originalPrice, price) : price;
- }
- }
-
- if (original < total) {
- original = total;
- }
-
- const pricing = root.pricing || root.summary;
- if (pricing && typeof pricing === 'object') {
- const explicitTotal = coercePositiveInt(getFirstDefined(pricing, ['total_kopeks', 'totalKopeks', 'total_price_kopeks', 'totalPriceKopeks']), null);
- if (explicitTotal !== null) {
- total = explicitTotal;
- }
- const explicitOriginal = coercePositiveInt(getFirstDefined(pricing, ['original_total_kopeks', 'originalTotalKopeks', 'original_price_kopeks', 'base_total_kopeks', 'baseTotalKopeks', 'full_price_kopeks']), null);
- if (explicitOriginal !== null) {
- original = explicitOriginal;
- }
- }
-
- const balance = getPurchaseBalanceKopeks(root);
- const discount = Math.max(0, original - total);
- const missing = Math.max(0, total - balance);
-
- const totals = {
- currency,
- totalKopeks: total,
- originalKopeks: original,
- discountKopeks: discount,
- balanceKopeks: balance,
- missingKopeks: missing,
- };
-
- subscriptionPurchaseLastTotals = totals;
- return totals;
- }
-
- function renderSubscriptionPurchaseSummary() {
- const container = document.getElementById('subscriptionPurchaseSummary');
- if (!container) {
- return;
- }
-
- const totals = computeSubscriptionPurchaseTotals();
- if (!totals) {
- container.innerHTML = `${escapeHtml(t('purchase.empty'))}
`;
- updateSubscriptionPurchaseButtons();
- return;
- }
-
- const totalLabel = formatPriceFromKopeks(totals.totalKopeks, totals.currency);
- const originalLabel = totals.originalKopeks > totals.totalKopeks
- ? formatPriceFromKopeks(totals.originalKopeks, totals.currency)
- : null;
- const discountLabel = totals.discountKopeks > 0
- ? t('purchase.summary.discount').replace('{amount}', formatPriceFromKopeks(totals.discountKopeks, totals.currency))
- : '';
- const balanceLabel = formatPriceFromKopeks(totals.balanceKopeks, totals.currency);
- const afterPurchaseLabel = formatPriceFromKopeks(Math.max(totals.balanceKopeks - totals.totalKopeks, 0), totals.currency);
- const missingLabel = totals.missingKopeks > 0
- ? formatPriceFromKopeks(totals.missingKopeks, totals.currency)
- : null;
-
- container.innerHTML = `
-
-
- ${discountLabel ? `${escapeHtml(totalLabel)}
- ${originalLabel ? `${escapeHtml(originalLabel)}
` : ''}
- ${escapeHtml(discountLabel)}
` : ''}
-
- ${escapeHtml(t('purchase.summary.balance'))}
- ${escapeHtml(balanceLabel)}
-
-
- ${escapeHtml(t('purchase.summary.balance_after'))}
- ${escapeHtml(afterPurchaseLabel)}
-
- ${missingLabel ? `${escapeHtml(t('purchase.summary.missing'))}${escapeHtml(missingLabel)}
` : ''}
- `;
-
- updateSubscriptionPurchaseButtons();
- }
-
- function collectPurchaseDiscountTags() {
- const tags = [];
- const root = getPurchaseRoot();
- const promoGroup = root?.promo_group || userData?.promo_group;
- if (promoGroup) {
- const values = [
- promoGroup.server_discount_percent,
- promoGroup.traffic_discount_percent,
- promoGroup.device_discount_percent,
- promoGroup.discount_percent,
- ].map(value => coercePositiveInt(value, null)).filter(value => value && value > 0);
- if (values.length) {
- const percent = Math.max(...values);
- tags.push(`${t('purchase.discount.promo_group')}: -${percent}%`);
- }
- }
-
- const activeOffer = (userData?.promo_offers || []).find(offer => {
- if (String(offer?.status || '').toLowerCase() !== 'active') {
- return false;
- }
- const percent = coercePositiveInt(offer?.discount_percent, null);
- return percent && percent > 0;
- });
- if (activeOffer) {
- const percent = coercePositiveInt(activeOffer.discount_percent, null);
- if (percent) {
- tags.push(`${t('purchase.discount.promo_offer')}: -${percent}%`);
- }
- } else {
- const percent = coercePositiveInt(getFirstDefined(root, ['active_discount_percent', 'discount_percent']), null);
- if (percent) {
- tags.push(t('purchase.discount.active_offer').replace('{percent}', String(percent)));
- }
- }
-
- return tags;
- }
-
- function renderSubscriptionPurchaseDiscounts() {
- const container = document.getElementById('subscriptionPurchaseDiscounts');
- if (!container) {
- return;
- }
-
- const tags = collectPurchaseDiscountTags();
- if (!tags.length) {
- container.classList.add('hidden');
- container.innerHTML = '';
- return;
- }
-
- container.classList.remove('hidden');
- container.innerHTML = tags
- .map(tag => `${escapeHtml(tag)}`)
- .join('');
- }
-
- function validateSubscriptionPurchaseSelections() {
- const errors = [];
- const periods = getPurchasePeriods();
- if (periods.length && !getSelectedPeriod()) {
- errors.push(t('purchase.validation.period'));
- }
-
- const trafficOptions = getPurchaseTrafficOptions();
- if (trafficOptions.length && !getSelectedTrafficOption()) {
- errors.push(t('purchase.validation.traffic'));
- }
-
- const serverOptions = getPurchaseServerOptions().filter(option => option?.is_available !== false);
- const minServers = getPurchaseServersMin();
- if (serverOptions.length && minServers > 0 && subscriptionPurchaseSelections.servers.size < minServers) {
- errors.push(t('purchase.validation.servers_min').replace('{min}', String(minServers)));
- }
-
- const devicesConfig = getPurchaseDevicesConfig();
- if ((devicesConfig || getPurchaseDeviceOptions().length) && subscriptionPurchaseSelections.devices == null) {
- errors.push(t('purchase.validation.devices'));
- }
-
- return errors;
- }
-
- function renderSubscriptionPurchaseValidation() {
- const container = document.getElementById('subscriptionPurchaseValidation');
- if (!container) {
- updateSubscriptionPurchaseButtons();
- return;
- }
-
- const errors = validateSubscriptionPurchaseSelections();
- if (!errors.length) {
- container.classList.add('hidden');
- container.innerHTML = '';
- } else {
- container.classList.remove('hidden');
- container.innerHTML = errors.map(message => `${escapeHtml(message)}
`).join('');
- }
-
- updateSubscriptionPurchaseButtons(errors);
- }
-
- function updateSubscriptionPurchaseButtons(validationErrors) {
- const submitBtn = document.getElementById('subscriptionPurchaseSubmit');
- const topupBtn = document.getElementById('subscriptionPurchaseTopup');
- const errors = validationErrors || validateSubscriptionPurchaseSelections();
- const totals = subscriptionPurchaseLastTotals;
-
- if (submitBtn) {
- const disabled = subscriptionPurchaseSubmitting
- || !totals
- || totals.totalKopeks <= 0
- || errors.length > 0;
- submitBtn.disabled = disabled;
- submitBtn.textContent = subscriptionPurchaseSubmitting
- ? (t('subscription_settings.pending_action') || 'Saving…')
- : t('purchase.action.buy');
- }
-
- if (topupBtn) {
- const showTopup = Boolean(totals && totals.missingKopeks > 0);
- topupBtn.classList.toggle('hidden', !showTopup);
- }
- }
-
- function buildSubscriptionPurchasePayload() {
- const initData = tg.initData || '';
- if (!initData) {
- return null;
- }
-
- const payload = {
- initData,
- period: subscriptionPurchaseSelections.period,
- periodId: subscriptionPurchaseSelections.period,
- traffic: subscriptionPurchaseSelections.traffic,
- trafficId: subscriptionPurchaseSelections.traffic,
- servers: Array.from(subscriptionPurchaseSelections.servers || []),
- serverUuids: Array.from(subscriptionPurchaseSelections.servers || []),
- devices: subscriptionPurchaseSelections.devices,
- deviceLimit: subscriptionPurchaseSelections.devices,
- };
-
- const root = getPurchaseRoot();
- const contextId = getFirstDefined(root, ['context_id', 'contextId', 'purchase_context_id', 'purchaseContextId']);
- if (contextId !== undefined) {
- payload.contextId = contextId;
- payload.purchaseContextId = contextId;
- }
-
- if (userData?.subscription_id || userData?.subscriptionId) {
- payload.subscriptionId = userData.subscription_id || userData.subscriptionId;
- }
-
- return payload;
- }
-
- async function submitSubscriptionPurchase() {
- if (subscriptionPurchaseSubmitting) {
- return;
- }
-
- const errors = validateSubscriptionPurchaseSelections();
- if (errors.length) {
- renderSubscriptionPurchaseValidation();
- return;
- }
-
- const payload = buildSubscriptionPurchasePayload();
- if (!payload) {
- const fallbackUrl = getEffectivePurchaseUrl();
- if (fallbackUrl) {
- openExternalLink(fallbackUrl, { openInMiniApp: true });
- }
- return;
- }
-
- subscriptionPurchaseSubmitting = true;
- updateSubscriptionPurchaseButtons(errors);
-
- try {
- const response = await fetch('/miniapp/subscription/purchase', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(payload),
- });
-
- const result = await response.json().catch(() => ({}));
-
- if (!response.ok || result?.success === false) {
- const message = result?.message || result?.detail || t('purchase.error.generic');
- showPopup(message === 'purchase.error.generic' ? t('purchase.error.generic') : message, t('purchase.title'));
- return;
- }
-
- const successMessage = result?.message || t('purchase.action.buy');
- showPopup(successMessage === 'purchase.action.buy' ? t('purchase.action.buy') : successMessage, t('purchase.title'));
- await refreshSubscriptionData({ silent: false });
- } catch (error) {
- console.error('Failed to submit subscription purchase:', error);
- const message = error?.message || t('purchase.error.generic');
- showPopup(message === 'purchase.error.generic' ? t('purchase.error.generic') : message, t('purchase.title'));
- } finally {
- subscriptionPurchaseSubmitting = false;
- renderSubscriptionPurchaseConfigurator();
- }
- }
-
async function handlePromoOfferAccept(offerId, button) {
if (!offerId) {
return;
@@ -12651,20 +10824,6 @@
openExternalLink(link, { openInMiniApp: true });
});
- document.getElementById('subscriptionPurchaseRetry')?.addEventListener('click', () => {
- ensureSubscriptionPurchaseData({ force: true }).catch(error => {
- console.warn('Failed to reload subscription purchase config:', error);
- });
- });
-
- document.getElementById('subscriptionPurchaseSubmit')?.addEventListener('click', () => {
- submitSubscriptionPurchase();
- });
-
- document.getElementById('subscriptionPurchaseTopup')?.addEventListener('click', () => {
- openTopupModal();
- });
-
initializePromoCodeForm();
init();