Merge branch 'dev' into feature/install-page

# Conflicts: # backend/bot/app/web/admin_api_impl/settings.py # backend/bot/app/web/webapp/cache_helpers.py # frontend/src/admin/sections/SettingsSection.svelte # tests/test_admin_settings_manifest_i18n.py
2026-05-22 22:57:24 +03:00
parent 9e61a3d8a8 443e2e62db
commit d3925cad22
31 changed files with 2093 additions and 219 deletions
@@ -200,7 +200,7 @@
    showLogin,
    telegramSdk,
    getTg: () => tg,
-    telegramOAuthClientId,
+    telegramOAuthClientId: () => telegramOAuthClientId,
    currentLang: () => currentLang,
    normalizeLangCode,
    updateLocalData: (updatedLanguage) => {
@@ -405,6 +405,7 @@
  $: telegramOAuthClientId = Number(CFG.telegramOAuthClientId || telegramLoginBotId || 0);
  $: telegramMiniAppInitData = tg?.initData || readTelegramMiniAppInitDataFromLocation();
  $: telegramMiniAppAuthAvailable = Boolean(telegramMiniAppInitData);
+  $: telegramMiniAppContext = hasTelegramLaunchParams();
  $: telegramLoginUnavailable =
    !telegramMiniAppAuthAvailable && !telegramOAuthClientId && telegramSdkStatus !== "loading";
  $: telegramLoginChecking =
@@ -660,7 +661,10 @@
      link.rel = "stylesheet";
      link.href = href;
      link.onload = () => resolve();
-      link.onerror = () => reject(new Error(`stylesheet_load_failed:${href}`));
+      link.onerror = () => {
+        link.remove();
+        reject(new Error(`stylesheet_load_failed:${href}`));
+      };
      document.head.appendChild(link);
    });
  }
@@ -673,11 +677,34 @@
      script.src = src;
      script.async = true;
      script.onload = () => resolve();
-      script.onerror = () => reject(new Error(`script_load_failed:${src}`));
+      script.onerror = () => {
+        script.remove();
+        reject(new Error(`script_load_failed:${src}`));
+      };
      document.head.appendChild(script);
    });
  }

+  async function appendStylesheetWithFallback(id, href, fallbackName) {
+    const fallbackHref = resolveWebappAssetPath("", fallbackName);
+    try {
+      await appendStylesheetOnce(id, href);
+    } catch (error) {
+      if (!fallbackHref || href === fallbackHref) throw error;
+      await appendStylesheetOnce(id, fallbackHref);
+    }
+  }
+
+  async function appendScriptWithFallback(id, src, fallbackName) {
+    const fallbackSrc = resolveWebappAssetPath("", fallbackName);
+    try {
+      await appendScriptOnce(id, src);
+    } catch (error) {
+      if (!fallbackSrc || src === fallbackSrc) throw error;
+      await appendScriptOnce(id, fallbackSrc);
+    }
+  }
+
  function readAdminBundleApi() {
    const bundle = window.SubscriptionWebAppAdmin;
    return bundle?.mount ? bundle : null;
@@ -697,8 +724,16 @@
    adminBundlePromise = (async () => {
      const cssHref = resolveWebappAssetPath(CFG.adminCssAsset, "subscription_webapp_admin.css");
      const jsSrc = resolveWebappAssetPath(CFG.adminJsAsset, "subscription_webapp_admin.js");
-      await appendStylesheetOnce("subscription-webapp-admin-css", cssHref);
-      await appendScriptOnce("subscription-webapp-admin-js", jsSrc);
+      await appendStylesheetWithFallback(
+        "subscription-webapp-admin-css",
+        cssHref,
+        "subscription_webapp_admin.css",
+      );
+      await appendScriptWithFallback(
+        "subscription-webapp-admin-js",
+        jsSrc,
+        "subscription_webapp_admin.js",
+      );
      const loaded = readAdminBundleApi();
      if (!loaded) throw new Error("admin_bundle_missing_mount");
      adminBundleApi = loaded;
@@ -1513,7 +1548,9 @@
                {user}
                {userAgreementUrl}
                {userLanguage}
-                linkTelegramAccount={accountStore.linkTelegramAccount}
+                showLogout={!telegramMiniAppContext}
+                linkTelegramAccount={() =>
+                  accountStore.linkTelegramAccount(() => telegramMiniAppInitData)}
                logout={accountStore.logout}
                {openAdminPanel}
                {openExternalLink}
@@ -1,5 +1,14 @@
 <script>
-  import { ChevronRight, Eye, EyeOff, FileText, Search, X } from "$components/ui/icons.js";
+  import {
+    Check,
+    ChevronRight,
+    Copy,
+    Eye,
+    EyeOff,
+    FileText,
+    Search,
+    X,
+  } from "$components/ui/icons.js";
  import * as UiIcons from "$components/ui/icons.js";
  import { Accordion, Switch } from "$components/ui/primitives.js";
  import Dialog from "$components/ui/dialog.svelte";
@@ -9,7 +18,7 @@
    AdminEmptyState,
    AdminSelect,
  } from "$components/patterns/admin/index.js";
-  import { getContext, onMount } from "svelte";
+  import { getContext, onDestroy, onMount } from "svelte";

  export let at;
  export let onSettingsSaved;
@@ -26,6 +35,8 @@
  let revealedSecrets = new Set();
  let iconPickerField = null;
  let iconPickerSearch = "";
+  let copiedWebhookKey = "";
+  let copiedWebhookTimer = null;

  $: settingsAllOpen =
    visibleSettingsSections.length > 0 &&
@@ -48,6 +59,12 @@
    });
  });

+  onDestroy(() => {
+    if (copiedWebhookTimer && typeof window !== "undefined") {
+      window.clearTimeout(copiedWebhookTimer);
+    }
+  });
+
  function toggleAllSections() {
    if (settingsOpenSections.length === visibleSettingsSections.length) {
      settingsOpenSections = [];
@@ -134,6 +151,60 @@
    }
  }

+  function normalizeWebhookPath(path) {
+    const normalized = String(path || "").trim();
+    if (!normalized) return "";
+    return normalized.startsWith("/") ? normalized : `/${normalized}`;
+  }
+
+  function webhookUrlForField(field) {
+    const explicit = String(field?.webhook_url || "").trim();
+    if (explicit) return explicit;
+    const path = normalizeWebhookPath(field?.webhook_path);
+    if (!path) return "";
+    if (field?.webhook_requires_base_url && field?.webhook_base_url_configured === false) {
+      return "";
+    }
+    if (typeof window !== "undefined" && window.location?.origin) {
+      return `${window.location.origin}${path}`;
+    }
+    return path;
+  }
+
+  function groupWebhook(fields) {
+    const field = (fields || []).find((item) => item.webhook_path || item.webhook_url);
+    if (!field) return null;
+    const path = normalizeWebhookPath(field.webhook_path);
+    const url = webhookUrlForField(field);
+    if (!url && !path) return null;
+    return {
+      key: `${field.provider_id || field.key || "provider"}:${path || url}`,
+      path,
+      url,
+      requiresBaseUrl: Boolean(field.webhook_requires_base_url),
+      baseConfigured: field.webhook_base_url_configured !== false,
+    };
+  }
+
+  async function copyWebhookUrl(webhook) {
+    if (!webhook?.url) return;
+    try {
+      await navigator.clipboard.writeText(webhook.url);
+      copiedWebhookKey = webhook.key;
+      if (copiedWebhookTimer && typeof window !== "undefined") {
+        window.clearTimeout(copiedWebhookTimer);
+      }
+      if (typeof window !== "undefined") {
+        copiedWebhookTimer = window.setTimeout(() => {
+          copiedWebhookKey = "";
+          copiedWebhookTimer = null;
+        }, 1400);
+      }
+    } catch {
+      copiedWebhookKey = "";
+    }
+  }
+
  function groupSectionFields(section) {
    const groups = new Map();
    for (const field of section.fields || []) {
@@ -151,6 +222,7 @@
      id,
      label: id === "_root" ? null : id,
      i18nLabelKey: group.i18nLabelKey,
+      webhook: groupWebhook(group.fields),
      fields: group.fields,
    }));
  }
@@ -231,6 +303,47 @@
  }
 </script>

+{#snippet renderWebhookHint(webhook)}
+  {@const displayValue = webhook.url || webhook.path}
+  <div class="admin-webhook-hint">
+    <div class="admin-webhook-hint-meta">
+      <strong>{at("settings_provider_webhook_url", {}, "Webhook URL")}</strong>
+      <small>
+        {webhook.url
+          ? at(
+              "settings_provider_webhook_url_hint",
+              {},
+              "Use this URL in the provider webhook settings."
+            )
+          : at(
+              "settings_provider_webhook_base_missing",
+              { path: webhook.path },
+              `Set WEBHOOK_BASE_URL to show the full URL for ${webhook.path}.`
+            )}
+      </small>
+    </div>
+    <div class="admin-webhook-value">
+      <code title={displayValue}>{displayValue}</code>
+      <AdminButton
+        class="admin-webhook-copy"
+        size="sm"
+        variant="ghost"
+        disabled={!webhook.url}
+        title={at("copy", {}, "Copy")}
+        onclick={() => copyWebhookUrl(webhook)}
+      >
+        {#if copiedWebhookKey === webhook.key}
+          <Check size={13} />
+          <span>{at("copied", {}, "Copied")}</span>
+        {:else}
+          <Copy size={13} />
+          <span>{at("copy", {}, "Copy")}</span>
+        {/if}
+      </AdminButton>
+    </div>
+  </div>
+{/snippet}
+
 {#snippet renderField(field)}
  {@const revealed = isSecretRevealed(field.key)}
  <div class="admin-setting" class:is-overridden={isOverridden(field)}>
@@ -467,6 +580,9 @@
          {@const labelGroups = groups.filter((g) => g.label)}
          <div class="admin-settings-fields">
            {#if rootGroup}
+              {#if rootGroup.webhook}
+                {@render renderWebhookHint(rootGroup.webhook)}
+              {/if}
              {#each rootGroup.fields as field}
                {@render renderField(field)}
              {/each}
@@ -510,6 +626,9 @@
                    </Accordion.Header>
                    <Accordion.Content class="admin-accordion-content">
                      <div class="admin-settings-subsection-body">
+                        {#if group.webhook}
+                          {@render renderWebhookHint(group.webhook)}
+                        {/if}
                        {#each group.fields as field}
                          {@render renderField(field)}
                        {/each}
@@ -145,6 +145,12 @@ export function createAccountStore({
    clearPasswordCooldownTimer();
  }

+  function getTelegramOAuthClientId() {
+    const value =
+      typeof telegramOAuthClientId === "function" ? telegramOAuthClientId() : telegramOAuthClientId;
+    return Number(value || 0);
+  }
+
  function closeSetPasswordDialog() {
    state.update((s) => ({
      ...s,
@@ -318,19 +324,21 @@ export function createAccountStore({
    }
  }

-  async function linkTelegramAccount(getTelegramMiniAppInitData) {
+  async function linkTelegramAccount(getTelegramMiniAppInitData = () => "") {
    const s = get(state);
    if (s.linkTelegramBusy) return;
+    const readTelegramMiniAppInitData =
+      typeof getTelegramMiniAppInitData === "function" ? getTelegramMiniAppInitData : () => "";
    const isTelegramMiniAppAttempt = telegramSdk.hasLaunchParams();
    if (isTelegramMiniAppAttempt) {
      await telegramSdk.ensureForAction();
    }
-    const initData = getTelegramMiniAppInitData();
+    const initData = readTelegramMiniAppInitData();
    if (initData) {
      await linkTelegramAccountWithPayload({ init_data: initData });
      return;
    }
-    if (!telegramOAuthClientId) {
+    if (!getTelegramOAuthClientId()) {
      showToast(t("wa_auth_telegram_not_configured"));
      return;
    }
@@ -362,6 +370,7 @@ export function createAccountStore({
  }

  async function logout() {
+    if (telegramSdk.hasLaunchParams()) return;
    markManualLogout();
    clearToken();
    try {
@@ -61,11 +61,6 @@ export async function runWebappBoot({
    );
  }

-  if (isManuallyLoggedOut()) {
-    showLogin();
-    return;
-  }
-
  const widgetAuthData = readTelegramLoginWidgetAuthData();
  if (widgetAuthData && (await finalizeTelegramAuth(widgetAuthData, "auth_data"))) return;

@@ -78,6 +73,11 @@ export async function runWebappBoot({
    }
  }

+  if (isManuallyLoggedOut()) {
+    showLogin();
+    return;
+  }
+
  if (getToken() || getCsrfToken()) {
    try {
      await loadData();
@@ -1889,6 +1889,65 @@
  align-items: center;
 }

+.admin-webhook-hint {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--admin-border);
+  background: color-mix(in srgb, var(--info) 7%, transparent);
+}
+
+.admin-webhook-hint-meta {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.admin-webhook-hint-meta strong {
+  color: var(--admin-text);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.admin-webhook-hint-meta small {
+  color: var(--admin-muted);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.admin-webhook-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.admin-webhook-value code {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--admin-bg) 82%, var(--admin-surface-2));
+  color: var(--admin-text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-webhook-copy {
+  flex: 0 0 auto;
+}
+
 .admin-setting:last-child {
  border-bottom: 0;
 }
@@ -2625,6 +2684,26 @@
    padding: 14px 14px;
  }

+  .admin-webhook-hint {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+    padding: 14px;
+  }
+
+  .admin-webhook-value {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .admin-webhook-value code {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .admin-webhook-copy {
+    align-self: flex-start;
+  }
+
  .admin-card-head {
    padding: 12px 14px;
  }
@@ -2704,38 +2783,6 @@
  }
 }

-.settings-admin-block {
-  display: grid;
-  gap: 10px;
-  margin: 6px 0 0;
-}
-
-.settings-row.settings-row-admin {
-  border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
-  background: color-mix(in srgb, #f59e0b 12%, transparent);
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  width: 100%;
-  cursor: pointer;
-  transition:
-    background 0.12s ease,
-    border-color 0.12s ease;
-}
-
-.settings-row.settings-row-admin:hover {
-  background: color-mix(in srgb, #f59e0b 18%, transparent);
-  border-color: color-mix(in srgb, #f59e0b 58%, transparent);
-}
-
-.settings-row.settings-row-admin > svg:first-child {
-  color: #fbbf24;
-  opacity: 1;
-}
-
-.settings-row.settings-row-admin strong {
-  color: var(--text);
-}
-
 /* ============================================================
   shadcn-svelte primitives: Tabs / Select / Switch / Label
   bits-ui exposes data-state attributes; styling here matches
@@ -1287,6 +1287,11 @@ a {
  gap: 8px;
 }

+.settings-admin-block {
+  display: grid;
+  gap: 8px;
+}
+
 .settings-divider {
  height: 1px;
  background: var(--border);
@@ -1329,6 +1334,56 @@ a {
  font-size: 12px;
 }

+.settings-row.settings-row-admin {
+  min-height: 54px;
+  border-color: var(--warning-border);
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--warning) 13%, var(--panel)),
+    color-mix(in srgb, var(--warning) 7%, var(--panel-2))
+  );
+  cursor: pointer;
+  transition:
+    transform 0.14s ease,
+    border-color 0.14s ease,
+    background 0.14s ease,
+    box-shadow 0.14s ease;
+}
+
+.settings-row.settings-row-admin:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--warning) 52%, var(--border));
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--warning) 16%, var(--panel)),
+    color-mix(in srgb, var(--warning) 9%, var(--panel-2))
+  );
+}
+
+.settings-row.settings-row-admin:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.settings-row.settings-row-admin:focus-visible {
+  outline: none;
+  border-color: color-mix(in srgb, var(--warning) 58%, var(--border));
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--warning) 24%, transparent),
+    inset 0 1px 0 var(--inset-highlight);
+}
+
+.settings-row.settings-row-admin > svg:first-child {
+  color: var(--warning-text);
+  opacity: 1;
+}
+
+.settings-row.settings-row-admin > svg:last-child {
+  color: color-mix(in srgb, var(--warning) 70%, var(--muted));
+}
+
+.settings-row.settings-row-admin strong {
+  color: var(--warning-text);
+}
+
 .settings-row-linked {
  grid-template-columns: 28px minmax(0, 1fr);
  border-color: var(--success-border);
@@ -34,6 +34,7 @@
  export let user = {};
  export let userAgreementUrl = "";
  export let userLanguage = "";
+  export let showLogout = true;

  export let linkTelegramAccount = () => {};
  export let logout = () => {};
@@ -187,10 +188,12 @@
        <ArrowRight size={17} />
      </button>
    {/if}
-    <button class="settings-row settings-row-logout" type="button" onclick={logout}>
-      <UserRound size={21} />
-      <span><strong>{t("wa_logout")}</strong><small>{t("wa_end_session")}</small></span>
-      <ArrowRight size={17} />
-    </button>
+    {#if showLogout}
+      <button class="settings-row settings-row-logout" type="button" onclick={logout}>
+        <UserRound size={21} />
+        <span><strong>{t("wa_logout")}</strong><small>{t("wa_end_session")}</small></span>
+        <ArrowRight size={17} />
+      </button>
+    {/if}
  </div>
 </main>