feat: surface trial activation in mini app

frontend/src/App.svelte

@@ -22,6 +22,7 @@
   import SettingsScreen from "./webapp/screens/SettingsScreen.svelte";
   import SupportScreen from "./webapp/screens/SupportScreen.svelte";
   import SupportTicketScreen from "./webapp/screens/SupportTicketScreen.svelte";
+  import TrialActivationScreen from "./webapp/screens/TrialActivationScreen.svelte";
 
   import {
     LANGUAGE_FLAGS,
@@ -118,6 +119,8 @@
   let publicInstallSubscription = null;
   let publicInstallToken = "";
   let trialBusy = false;
+  let trialActivationResult = null;
+  let trialActivationError = "";
   let promoCode = "";
   let promoBusy = false;
   let promoStatus = "";
@@ -564,7 +567,7 @@
               : section === "install" && !canUseInstallGuides()
                 ? "home"
                 : section;
-        activeTab = nextSection === "install" ? "home" : nextSection;
+        activeTab = nextSection === "install" || nextSection === "trial" ? "home" : nextSection;
         screen = nextSection;
         if (nextSection === "devices") devicesStore.loadDevices(devicesEnabled);
         if (nextSection === "support") {
@@ -949,7 +952,12 @@
     }
     const initialSupportTicketId =
       section === "support" ? supportTicketIdFromPath(window.location.pathname) : null;
-    activeTab = section === "admin" ? "settings" : section === "install" ? "home" : section;
+    activeTab =
+      section === "admin"
+        ? "settings"
+        : section === "install" || section === "trial"
+          ? "home"
+          : section;
     screen = section;
     mode = "app";
     if (payload.settings?.support_tickets_enabled !== false) {
@@ -1151,6 +1159,19 @@
     openConnectLink();
   }
 
+  function openTrialInstallOrConnect() {
+    if (canUseInstallGuides()) {
+      goInstall();
+      return;
+    }
+    const url = trialActivationResult?.connect_url || trialActivationResult?.config_link;
+    if (url) {
+      openExternalLink(url);
+      return;
+    }
+    openConnectLink();
+  }
+
   async function copyText(value, success = t("wa_copied")) {
     if (!value) {
       showToast(t("wa_unavailable"));
@@ -1199,19 +1220,30 @@
     }
   }
 
-  async function activateTrial() {
+  async function activateTrial(options = {}) {
     if (trialBusy) return;
+    const stayOnTrial = Boolean(options?.stayOnTrial);
     trialBusy = true;
+    trialActivationResult = null;
+    trialActivationError = "";
     try {
       const response = await api("/trial/activate", {
         method: "POST",
         body: JSON.stringify({}),
       });
       if (!response.ok) throw response;
+      trialActivationResult = response;
       showToast(t("wa_trial_activated"));
       await loadData();
+      if (stayOnTrial) {
+        activeTab = "home";
+        screen = "trial";
+        syncSectionPath("trial", true);
+      }
     } catch (error) {
-      showToast(error?.message || t("wa_trial_activation_failed"));
+      const message = error?.message || t("wa_trial_activation_failed");
+      trialActivationError = message;
+      showToast(message);
     } finally {
       trialBusy = false;
     }
@@ -1569,6 +1601,20 @@
                 {copyText}
                 {t}
               />
+            {:else if screen === "trial"}
+              <TrialActivationScreen
+                {appSettings}
+                {brand}
+                {brandTitle}
+                {subscription}
+                {trialBusy}
+                trialResult={trialActivationResult}
+                trialError={trialActivationError}
+                {activateTrial}
+                openInstallOrConnect={openTrialInstallOrConnect}
+                {goHome}
+                {t}
+              />
             {:else if screen === "invite"}
               <InviteScreen
                 {referral}

frontend/src/lib/webapp/constants.js

@@ -21,6 +21,7 @@ export const WEBAPP_LANGUAGE_ORDER = ["ru", "en"];
 export const APP_SECTION_PATHS = {
   home: "/home",
   install: "/install",
+  trial: "/trial",
   invite: "/invite",
   devices: "/devices",
   support: "/support",

frontend/src/lib/webapp/mockApi.js

@@ -390,6 +390,15 @@ export async function mockApi(path, options = {}, context = {}) {
       },
     };
   }
+  if (path === "/admin/panel/internal-squads") {
+    return {
+      ok: true,
+      squads: [
+        { uuid: "db786ee8-816b-4760-80aa-1fc7a3669ff2", name: "Base RU" },
+        { uuid: "2f2f6e0a-1f2d-4e80-a33b-0ebf3a409012", name: "Trial warmup" },
+      ],
+    };
+  }
   if (path === "/admin/themes") {
     if (String(options.method || "GET").toUpperCase() === "PUT") {
       try {
@@ -524,6 +533,75 @@ export async function mockApi(path, options = {}, context = {}) {
             },
           ],
         },
+        {
+          id: "pricing",
+          order: 11,
+          fields: [
+            {
+              key: "TRIAL_ENABLED",
+              type: "bool",
+              section: "pricing",
+              subsection: "trial",
+              label: "Триал включён",
+              value: true,
+            },
+            {
+              key: "TRIAL_DURATION_DAYS",
+              type: "int",
+              section: "pricing",
+              subsection: "trial",
+              label: "Длительность триала (дней)",
+              value: 3,
+            },
+            {
+              key: "TRIAL_TRAFFIC_LIMIT_GB",
+              type: "float",
+              section: "pricing",
+              subsection: "trial",
+              label: "Лимит трафика триала (ГБ)",
+              value: 5,
+            },
+            {
+              key: "TRIAL_TRAFFIC_STRATEGY",
+              type: "string",
+              section: "pricing",
+              subsection: "trial",
+              label: "Стратегия сброса трафика триала",
+              value: "NO_RESET",
+            },
+            {
+              key: "TRIAL_SQUAD_UUIDS",
+              type: "string",
+              section: "pricing",
+              subsection: "trial",
+              label: "Internal Squads для триала",
+              value: "2f2f6e0a-1f2d-4e80-a33b-0ebf3a409012",
+            },
+            ...[
+              ["MONTH_1_ENABLED", "bool", true],
+              ["RUB_PRICE_1_MONTH", "float", 150],
+              ["STARS_PRICE_1_MONTH", "int", 0],
+              ["MONTH_3_ENABLED", "bool", true],
+              ["RUB_PRICE_3_MONTHS", "float", 400],
+              ["STARS_PRICE_3_MONTHS", "int", 0],
+              ["MONTH_6_ENABLED", "bool", false],
+              ["RUB_PRICE_6_MONTHS", "float", 750],
+              ["STARS_PRICE_6_MONTHS", "int", 0],
+              ["MONTH_12_ENABLED", "bool", false],
+              ["RUB_PRICE_12_MONTHS", "float", 1200],
+              ["STARS_PRICE_12_MONTHS", "int", 0],
+              ["TRAFFIC_PACKAGES", "string", "10:99,50:399"],
+              ["STARS_TRAFFIC_PACKAGES", "string", ""],
+            ].map(([key, type, value]) => ({
+              key,
+              type,
+              section: "pricing",
+              subsection: "legacy_tariffs",
+              label: key,
+              value,
+            })),
+          ],
+        },
       ],
     };
   if (cleanPath === "/admin/support/stats") {
@@ -713,13 +791,26 @@ export async function mockApi(path, options = {}, context = {}) {
       remaining_text: "5 д. 0 ч.",
       end_date_text: "05.05.2026 12:00",
       days_left: 5,
+      config_link: "https://sub.example.com/sub/trial-preview-token",
+      connect_url: "https://sub.example.com/connect/trial-preview-token",
+      panel_short_uuid: "trial-preview-token",
+      install_share_token: "8f559061460e8fede78ef18dce887236",
+      install_share_url: "https://app.example.com/s/8f559061460e8fede78ef18dce887236",
       traffic_limit: "10 GB",
       traffic_limit_bytes: 10737418240,
       traffic_used: "0 B",
       traffic_used_bytes: 0,
     };
     DEV_MOCK.data.settings.trial_available = false;
-    return { ok: true, activated: true, end_date_text: "05.05.2026 12:00" };
+    return {
+      ok: true,
+      activated: true,
+      days: 5,
+      end_date_text: "05.05.2026 12:00",
+      traffic_gb: 10,
+      config_link: "https://sub.example.com/sub/trial-preview-token",
+      connect_url: "https://sub.example.com/connect/trial-preview-token",
+    };
   }
   if (path === "/auth/logout") return { ok: true };
   if (path === "/account/language" && String(options.method || "").toUpperCase() === "POST") {

frontend/src/lib/webapp/routes.js

@@ -7,6 +7,7 @@ export function normalizeSection(value) {
   if (
     section === "invite" ||
     section === "install" ||
+    section === "trial" ||
     section === "devices" ||
     section === "support" ||
     section === "settings" ||

frontend/src/webapp/screens/TrialActivationScreen.svelte

@@ -0,0 +1,278 @@
+<script>
+  import { onMount } from "svelte";
+  import {
+    ArrowLeft,
+    CheckCircle2,
+    CircleX,
+    Download,
+    Gift,
+    RefreshCw,
+  } from "$components/ui/icons.js";
+
+  import BrandMark from "$lib/webapp/BrandMark.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
+  import { formatTrafficGb } from "../../lib/webapp/formatters.js";
+
+  export let appSettings = {};
+  export let brand = {};
+  export let brandTitle = "";
+  export let subscription = {};
+  export let trialBusy = false;
+  export let trialResult = null;
+  export let trialError = "";
+  export let activateTrial = () => {};
+  export let openInstallOrConnect = () => {};
+  export let goHome = () => {};
+  export let t = (key, _params = {}, fallback = "") => fallback || key;
+
+  let requested = false;
+
+  $: trialEnabled = Boolean(appSettings?.trial_enabled);
+  $: trialAvailable = Boolean(appSettings?.trial_available);
+  $: canRequestTrial = Boolean(trialEnabled && trialAvailable && !subscription?.active);
+  $: isTrialStatus =
+    Boolean(trialResult?.activated) ||
+    String(subscription?.status || "")
+      .toUpperCase()
+      .includes("TRIAL");
+  $: hasActiveAccess = Boolean(subscription?.active || trialResult?.activated);
+  $: successTitle = isTrialStatus
+    ? t("wa_trial_activated")
+    : t("wa_home_subscription_active", {}, "Subscription active");
+  $: endDateText = trialResult?.end_date_text || subscription?.end_date_text || "";
+  $: daysLeft = Number(
+    trialResult?.days || subscription?.days_left || appSettings?.trial_duration_days || 0
+  );
+  $: trafficLabel = trialTrafficLabel();
+
+  function trialTrafficLabel() {
+    const resultTraffic = Number(trialResult?.traffic_gb || 0);
+    const settingsTraffic = Number(appSettings?.trial_traffic_limit_gb || 0);
+    const limit = resultTraffic || settingsTraffic;
+    return limit > 0 ? formatTrafficGb(limit) : t("wa_unlimited_traffic");
+  }
+
+  onMount(() => {
+    if (!requested && canRequestTrial) {
+      requested = true;
+      activateTrial({ stayOnTrial: true });
+    }
+  });
+</script>
+
+<main class="trial-activation-screen">
+  <div class="login-brand trial-activation-brand">
+    <BrandMark {brand} size="lg" />
+    <h1>{brandTitle}</h1>
+  </div>
+
+  <Card class="trial-activation-card">
+    <div
+      class={`trial-activation-icon ${
+        trialBusy ? "trial-activation-icon-loading" : hasActiveAccess ? "is-success" : "is-muted"
+      }`}
+      aria-hidden="true"
+    >
+      {#if trialBusy}
+        <RefreshCw size={27} />
+      {:else if hasActiveAccess}
+        <CheckCircle2 size={30} />
+      {:else if trialError || !canRequestTrial}
+        <CircleX size={30} />
+      {:else}
+        <Gift size={30} />
+      {/if}
+    </div>
+
+    <div class="trial-activation-copy" aria-busy={trialBusy}>
+      {#if trialBusy}
+        <h2>{t("wa_trial_activation_loading", {}, "Activating trial...")}</h2>
+        <p>{t("wa_trial_activation_wait", {}, "Preparing access and connection details.")}</p>
+      {:else if hasActiveAccess}
+        <h2>{successTitle}</h2>
+        <p>
+          {t(
+            "wa_trial_active_hint",
+            {},
+            "Access is ready. Install the app and import the profile."
+          )}
+        </p>
+        <dl class="trial-activation-facts">
+          {#if endDateText}
+            <div>
+              <dt>{t("wa_trial_active_until_label", {}, "Active until")}</dt>
+              <dd>{endDateText}</dd>
+            </div>
+          {/if}
+          {#if daysLeft > 0}
+            <div>
+              <dt>{t("wa_trial_days_left_label", {}, "Time left")}</dt>
+              <dd>{t("wa_trial_days_left", { days: daysLeft }, "{days} days")}</dd>
+            </div>
+          {/if}
+          <div>
+            <dt>{t("wa_trial_traffic_label", {}, "Traffic")}</dt>
+            <dd>{trafficLabel}</dd>
+          </div>
+        </dl>
+      {:else if trialError}
+        <h2>{t("wa_trial_activation_failed")}</h2>
+        <p>{trialError}</p>
+      {:else}
+        <h2>{t("wa_trial_unavailable_title", {}, "Trial is unavailable")}</h2>
+        <p>
+          {t(
+            "wa_trial_unavailable_hint",
+            {},
+            "Trial may already be used, or this account already has active access."
+          )}
+        </p>
+      {/if}
+    </div>
+  </Card>
+
+  <div class="trial-activation-actions">
+    {#if hasActiveAccess}
+      <Button class="wide" onclick={openInstallOrConnect}>
+        <Download size={18} />
+        {t("wa_install_and_configure")}
+      </Button>
+    {:else if trialError && canRequestTrial}
+      <Button
+        class="wide"
+        onclick={() => activateTrial({ stayOnTrial: true })}
+        disabled={trialBusy}
+      >
+        <RefreshCw size={18} />
+        {t("wa_trial_retry", {}, "Try again")}
+      </Button>
+    {/if}
+    <Button class="wide" variant="secondary" onclick={goHome}>
+      <ArrowLeft size={18} />
+      {t("wa_nav_home", {}, "Home")}
+    </Button>
+  </div>
+</main>
+
+<style>
+  .trial-activation-screen {
+    display: grid;
+    min-height: calc(100dvh - 34px);
+    align-content: center;
+    gap: 18px;
+    padding-bottom: 86px;
+    animation: section-enter 0.22s ease-out both;
+  }
+
+  .trial-activation-brand {
+    gap: 8px;
+  }
+
+  .trial-activation-brand h1 {
+    font-size: 25px;
+  }
+
+  :global(.trial-activation-card) {
+    display: grid;
+    justify-items: center;
+    gap: 14px;
+    padding: 20px 16px 18px;
+    text-align: center;
+  }
+
+  .trial-activation-icon {
+    display: grid;
+    width: 58px;
+    height: 58px;
+    place-items: center;
+    border: 1px solid var(--surface-subtle-border);
+    border-radius: 50%;
+    color: var(--muted);
+    background: color-mix(in srgb, var(--panel) 70%, transparent);
+  }
+
+  .trial-activation-icon.is-success {
+    border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
+    color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 13%, var(--panel));
+  }
+
+  :global(.trial-activation-icon-loading svg) {
+    animation: trial-spin 0.8s linear infinite;
+  }
+
+  .trial-activation-copy {
+    display: grid;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .trial-activation-copy h2,
+  .trial-activation-copy p {
+    margin: 0;
+  }
+
+  .trial-activation-copy h2 {
+    color: var(--text);
+    font-size: 19px;
+    font-weight: 900;
+    line-height: 1.15;
+  }
+
+  .trial-activation-copy p {
+    color: var(--muted);
+    font-size: 13px;
+    line-height: 1.42;
+  }
+
+  .trial-activation-facts {
+    display: grid;
+    gap: 8px;
+    width: 100%;
+    margin: 8px 0 0;
+  }
+
+  .trial-activation-facts div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+    padding: 9px 10px;
+    border: 1px solid var(--surface-subtle-border);
+    border-radius: 12px;
+    background: var(--surface-subtle);
+    text-align: left;
+  }
+
+  .trial-activation-facts dt,
+  .trial-activation-facts dd {
+    min-width: 0;
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+
+  .trial-activation-facts dt {
+    color: var(--muted);
+  }
+
+  .trial-activation-facts dd {
+    overflow-wrap: anywhere;
+    color: var(--text);
+    font-weight: 850;
+    text-align: right;
+  }
+
+  .trial-activation-actions {
+    display: grid;
+    gap: 10px;
+  }
+
+  @keyframes trial-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>