${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;
@@ -10824,6 +12651,20 @@
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();