@coopenomics/desktop 2025.11.9-alpha-2 → 2025.11.10-alpha-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coopenomics/desktop",
-  "version": "2025.11.9-alpha-2",
+  "version": "2025.11.10-alpha-1",
   "description": "A Desktop Project",
   "productName": "Desktop App",
   "author": "Alex Ant <dacom.dark.sun@gmail.com>",
@@ -25,9 +25,9 @@
     "start": "node -r ./alias-resolver.js dist/ssr/index.js"
   },
   "dependencies": {
-    "@coopenomics/controller": "2025.11.9-alpha-2",
-    "@coopenomics/notifications": "2025.11.9-alpha-2",
-    "@coopenomics/sdk": "2025.11.9-alpha-2",
+    "@coopenomics/controller": "2025.11.10-alpha-1",
+    "@coopenomics/notifications": "2025.11.10-alpha-1",
+    "@coopenomics/sdk": "2025.11.10-alpha-1",
     "@dicebear/collection": "^9.0.1",
     "@dicebear/core": "^9.0.1",
     "@editorjs/code": "^2.9.3",
@@ -59,7 +59,7 @@
     "@wharfkit/wallet-plugin-privatekey": "^1.1.0",
     "axios": "^1.2.1",
     "compression": "^1.7.4",
-    "cooptypes": "2025.11.9-alpha-2",
+    "cooptypes": "2025.11.10-alpha-1",
     "dompurify": "^3.1.7",
     "dotenv": "^16.4.5",
     "email-regex": "^5.0.0",
@@ -123,5 +123,5 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },
-  "gitHead": "5acd7ae2c437ce54f356113b5474700114f586ab"
+  "gitHead": "634766a08edc036ccf4b08438b14251fa3a8ab73"
 }

package/src/app/App.vue

@@ -33,11 +33,23 @@ const { showDialog } = useNotificationPermissionDialog();
 onMounted(async () => {
   try {
     console.log('systemInfo', info)
-    // Если мы в SPA режиме (hash mode) и pathname не является главной страницей
-    // и при этом hash пустой или указывает не на текущий pathname
-    if (typeof window !== 'undefined' && window.location.pathname !== '/' &&
-        (!window.location.hash || !window.location.hash.includes(window.location.pathname))) {
-      console.log('URL needs hash correction');
+    // Проверяем, нужно ли корректировать URL для hash роутера
+    // Выполняем только в клиентском режиме с hash роутером
+    const isClientMode = process.env.CLIENT === 'true';
+    const isHashRouter = process.env.VUE_ROUTER_MODE === 'hash';
+    const isNotSSR = process.env.SERVER !== 'true';
+    const hasWindow = typeof window !== 'undefined';
+
+    const shouldCorrectHashUrl =
+      isClientMode &&
+      isHashRouter &&
+      isNotSSR &&
+      hasWindow &&
+      window.location.pathname !== '/' &&
+      (!window.location.hash || !window.location.hash.includes(window.location.pathname));
+
+    if (shouldCorrectHashUrl) {
+      console.log('URL needs hash correction for hash router mode');
       const newUrl = window.location.origin + '/#' + window.location.pathname + window.location.search;
       console.log('Redirecting to:', newUrl);
       window.location.replace(newUrl);

package/src/env.d.ts

@@ -5,6 +5,8 @@ declare namespace NodeJS {
     NODE_ENV: string;
     VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
     VUE_ROUTER_BASE: string | undefined;
+    CLIENT?: string;
+    SERVER?: string;
   }
 }
 

package/src/features/NotificationPermissionDialog/model/index.ts

@@ -80,14 +80,17 @@ export function useNotificationPermissionDialog() {
   const handleAllow = async () => {
     try {
       store.isPermissionDialogProcessing = true;
-
+      console.log('handleAllow');
       // Подписываемся на уведомления (это включает запрос разрешения)
       const success = await subscribe();
-
+      console.log('success', success);
       if (success) {
+        console.log('saveChoice granted');
         saveChoice('granted');
+        console.log('hideDialog');
         hideDialog();
       } else {
+        console.log('saveChoice denied');
         // Если подписка не удалась, но пользователь согласился,
         // все равно сохраняем выбор чтобы не показывать диалог снова
         saveChoice('denied');
@@ -95,6 +98,7 @@ export function useNotificationPermissionDialog() {
       }
     } catch (error) {
       console.error('Ошибка при разрешении уведомлений:', error);
+      console.log('saveChoice denied');
       saveChoice('denied');
       hideDialog();
     } finally {

package/src/features/WebPushNotifications/model/index.ts

@@ -83,7 +83,16 @@ export function useWebPushNotifications() {
         throw new Error('Push уведомления не поддерживаются');
       }
 
-      const permission = await Notification.requestPermission();
+      // Добавляем timeout на случай, если пользователь не взаимодействует с диалогом
+      const permission = await Promise.race([
+        Notification.requestPermission(),
+        new Promise<never>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error('Пользователь не ответил на запрос разрешения в течение 30 секунд'));
+          }, 15000);
+        }),
+      ]);
+
       store.support.permission = permission;
       store.support.hasPermission = permission === 'granted';
       store.support.canSubscribe =
@@ -150,7 +159,16 @@ export function useWebPushNotifications() {
       }
 
       console.log('Форсированный запрос разрешения...');
-      const permission = await Notification.requestPermission();
+
+      // Добавляем timeout на случай, если пользователь не взаимодействует с диалогом
+      const permission = await Promise.race([
+        Notification.requestPermission(),
+        new Promise<never>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error('Пользователь не ответил на запрос разрешения в течение 30 секунд'));
+          }, 30000);
+        }),
+      ]);
 
       store.support.permission = permission;
       store.support.hasPermission = permission === 'granted';
@@ -267,7 +285,7 @@ export function useWebPushNotifications() {
         // Создаем новую подписку
         const subscription = await registration.pushManager.subscribe({
           userVisibleOnly: true,
-          applicationServerKey: applicationServerKey,
+          applicationServerKey: applicationServerKey as any,
         });
 
         return subscription;

package/src/pages/Union/ConnectionAgreement/ConnectionAgreementPage.vue

@@ -1,138 +1,54 @@
 <template lang="pug">
-div.row.justify-center.q-pa-md
-  div.col-md-8.col-xs-12
+div.row.q-pa-md
+  div.col-md-12.col-xs-12
     div(v-if="system.info.is_providered")
-      div(v-if="is_finish == false")
-        div(v-if="!signedDocument")
-          div(v-if="html")
-            DocumentHtmlReader(:html="html")
-            q-btn(@click="sign" color="primary") подписать
-
-          div(v-else)
-            Loader(:text='`Готовим соглашение...`')
-
-        div(v-else)
-          p.text-h6 Предварительная настройка
-          p Пожалуйста, укажите домен для установки MONO. Также, укажите суммы вступительных и минимальных паевых взносов для физических лиц, юридических лиц и индивидуальных предпринимателей:
-
-          AddCooperativeForm(:document="signedDocument" @finish="finish").q-pt-md
-      div(v-if="is_finish == true && coop")
-
-      p.text-h6 Кооператив на подключении
-      p Статус:
-        q-badge(v-if="coop.status == 'pending'" color="orange").q-ml-sm ожидание
-        q-badge(v-if="coop.status == 'active'" color="teal").q-ml-sm активен
-        q-badge(v-if="coop.status == 'blocked'" color="red").q-ml-sm заблокирован
-
-        q-btn(@click="reload" color="primary" size="sm").q-ml-md
-          q-icon(name="refresh")
-          span обновить
+      ConnectionAgreementStepper(
+        :initial-step="currentStep"
+        :is-finish="is_finish"
+        :signed-document="signedDocument"
+        :coop="coop"
+        :html="html"
+        :domain-valid="domainValid"
+        :installation-progress="installationProgress"
+        :instance-status="instanceStatus"
+        :subscriptions-loading="subscriptionsLoading"
+        :subscriptions-error="subscriptionsError"
+        @step-change="handleStepChange"
+        @tariff-selected="handleTariffSelected"
+        @tariff-deselected="handleTariffDeselected"
+        @continue="handleContinue"
+        @sign="sign"
+        @finish="finish"
+        @reload="reload"
+      )
 
-    div(v-else)
+    div(v-else).row
       //- Заглушка для недоступного провайдера
-      q-banner(
-        :class="'text-white bg-blue-500'"
-        rounded
-      )
-        template(v-slot:avatar)
-          q-icon(name="info" color="white")
-        span Для подключения к Кооперативной Экономике обратитесь в ПК ВОСХОД
-        q-btn(
-          flat
-          color="white"
-          label="Перейти на сайт"
-          @click="openProviderWebsite"
-          size="sm"
-        ).q-ml-md
-
-    div(v-if="system.info.is_providered").q-mt-md
-      p.text-subtitle1 Статус подписки на хостинг:
-
-      //- Статус подписки (только если провайдер доступен)
-      div
-          div(
-            v-if="subscriptionsError"
-          ).q-mb-md
-            q-banner(
-              :class="'text-white bg-red-500'"
-              rounded
-            )
-              template(v-slot:avatar)
-                q-icon(name="error" color="white")
-              span {{ subscriptionsError }}
-
-          div.flex.items-center.q-gutter-sm
-          div
-            span.text-body2 Валидность домена:
-            q-badge(
-              v-if="domainValid === true"
-              color="green"
-            ).q-ml-sm валиден
-            q-badge(
-              v-if="domainValid === false"
-              color="red"
-            ).q-ml-sm не валиден
-            q-badge(
-              v-if="domainValid === null && !subscriptionsLoading"
-              color="grey"
-            ).q-ml-sm неизвестно
-            q-badge(
-              v-if="subscriptionsLoading"
-              color="blue"
-            ).q-ml-sm загрузка...
-
-          div
-            span.text-body2 Прогресс установки:
-            q-badge(
-              v-if="installationProgress !== null"
-              :color="installationProgress === 100 ? 'green' : 'orange'"
-            ).q-ml-sm {{ installationProgress }}%
-            q-badge(
-              v-if="installationProgress === null && !subscriptionsLoading"
-              color="grey"
-            ).q-ml-sm неизвестно
-            q-badge(
-              v-if="subscriptionsLoading"
-              color="blue"
-            ).q-ml-sm загрузка...
-
-          div
-            span.text-body2 Статус сервера:
-            q-badge(
-              v-if="instanceStatus"
-              :color="instanceStatus === 'active' ? 'green' : instanceStatus === 'error' ? 'red' : 'orange'"
-            ).q-ml-sm {{ instanceStatus }}
-            q-badge(
-              v-if="!instanceStatus && !subscriptionsLoading"
-              color="grey"
-            ).q-ml-sm неизвестно
-            q-badge(
-              v-if="subscriptionsLoading"
-              color="blue"
-            ).q-ml-sm загрузка...
-
-      p Пожалуйста, перешлите инструкцию ниже вашему техническому специалисту. После её выполнения, мы автоматически выполним запуск. Далее, Вам необходимо завершить установку уже на Вашем сайте следуя инструкциям, представленным там.
-
-      q-card(flat bordered).q-pa-sm
-        p.text-bold Инструкция
-        div.flex.justify-between
-          span {{instruction}}
-          q-btn(size="sm" icon="fas fa-copy" flat @click="copy")
+      div.col-md-12.col-xs-12
+        ColorCard(color="blue")
+          .text-center.q-pa-md
+            q-icon(name="fas fa-info-circle" size="2rem").q-mb-sm
+            .text-h6.q-mb-md Информация о подключении
+            p Для подключения к платформе Кооперативной Экономики обратитесь в ПК ВОСХОД.
+            q-btn(
+              color="primary"
+              label="Перейти на сайт"
+              @click="openProviderWebsite"
+              size="md"
+            ).q-mt-md
 
 </template>
 <script setup lang="ts">
 import { DigitalDocument } from 'src/shared/lib/document';
 import { useSessionStore } from 'src/entities/Session';
 import { useSystemStore } from 'src/entities/System/model';
-import { DocumentHtmlReader } from 'src/shared/ui/DocumentHtmlReader';
 import { computed, ref, onMounted, onUnmounted } from 'vue';
-import { Loader } from 'src/shared/ui/Loader';
-import { AddCooperativeForm } from 'src/features/Union/AddCooperative';
 import { useLoadCooperatives } from 'src/features/Union/LoadCooperatives';
 import { useProviderSubscriptions } from 'src/features/Provider';
-import { copyToClipboard } from 'quasar';
-import { SuccessAlert } from 'src/shared/api';
 import { Cooperative } from 'cooptypes';
+import { ConnectionAgreementStepper } from 'src/widgets/ConnectionAgreementStepper';
+import { ColorCard } from 'src/shared/ui';
+
 
 const session = useSessionStore()
 const system = useSystemStore()
@@ -148,23 +64,40 @@ const {
 } = useProviderSubscriptions()
 
 const coop = ref()
-const instruction = computed(() => `Создайте A-запись домена ${coop.value?.announce} на IP-адрес: 51.250.114.13`)
 
 const html = computed(() => document.value?.data?.html)
 const signedDocument = computed(() => document.value?.signedDocument)
 const is_finish = ref(false)
 
+// Управление шагом степпера
+const currentStep = ref(1)
+
+const handleStepChange = (step: number) => {
+  currentStep.value = step
+}
+
+const handleTariffSelected = (tariff: any) => {
+  // Здесь можно сохранить выбранный тариф
+  console.log('Selected tariff:', tariff)
+}
+
+const handleTariffDeselected = () => {
+  // Здесь можно обработать снятие выбора тарифа
+  console.log('Tariff deselected')
+}
+
 // Остановка автообновления при размонтировании компонента
 let stopRefresh: (() => void) | null = null
 
-const copy = () => {
-  copyToClipboard(instruction.value)
-    .then(() => {
-      SuccessAlert('Инструкция скопирована в буфер')
-    })
-    .catch((e) => {
-      console.log(e)
+const handleContinue = async () => {
+  // Если документ еще не сгенерирован, генерируем его
+  if (!document.value.data?.html && !coop.value) {
+    await document.value.generate({
+      registry_id: Cooperative.Registry.CoopenomicsAgreement.registry_id,
+      coopname: 'voskhod',
+      username: session.username,
     })
+  }
 }
 
 const openProviderWebsite = () => {
@@ -199,13 +132,16 @@ const init = async () => {
 
   coop.value = await loadOneCooperative(session.username)
 
-  if (!coop.value)
+  if (!coop.value) {
     await document.value.generate({
       registry_id: Cooperative.Registry.CoopenomicsAgreement.registry_id,
       coopname: 'voskhod',
       username: session.username,
     })
-  else is_finish.value = true
+  } else {
+    is_finish.value = true
+    currentStep.value = 4 // Переходим на последний шаг если кооператив уже создан
+  }
 }
 
 const sign = async() => {

package/src/widgets/ConnectionAgreementStepper/Steps/AgreementStep.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, withDefaults } from 'vue'
+import type { IStepProps } from '../model/types'
+import { DocumentHtmlReader } from 'src/shared/ui/DocumentHtmlReader'
+import { Loader } from 'src/shared/ui/Loader'
+
+const props = withDefaults(defineProps<IStepProps & {
+  html?: string
+  onSign?: () => void
+  onBack?: () => void
+}>(), {})
+
+const emits = defineEmits<{
+  back: []
+  sign: []
+}>()
+
+const isActive = computed(() => props.isActive)
+const isDone = computed(() => props.isDone)
+
+const handleSign = () => {
+  emits('sign')
+}
+
+const handleBack = () => {
+  emits('back')
+}
+</script>
+
+<template lang="pug">
+q-step(
+  :name="2"
+  title="Соглашение о подключении"
+  icon="description"
+  :done="isDone"
+)
+  .q-pa-md
+    template(v-if="html")
+      DocumentHtmlReader(:html="html")
+    template(v-else)
+      Loader(:text='`Готовим соглашение...`')
+
+  q-stepper-navigation.q-gutter-sm(v-if="html")
+    q-btn(
+      v-if="isActive"
+      color="grey-6"
+      flat
+      label="Назад"
+      @click="handleBack"
+    )
+    q-btn(
+      v-if="isActive"
+      color="primary"
+      label="Подписать"
+      @click="handleSign"
+    )
+</template>

package/src/widgets/ConnectionAgreementStepper/Steps/FormStep.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { withDefaults } from 'vue'
+import type { IStepProps } from '../model/types'
+import { AddCooperativeForm } from 'src/features/Union/AddCooperative'
+
+withDefaults(defineProps<IStepProps & {
+  signedDocument?: any
+  onFinish?: () => void
+  onBack?: () => void
+}>(), {})
+
+const emits = defineEmits<{
+  back: []
+  finish: []
+}>()
+
+const handleFinish = () => {
+  emits('finish')
+}
+
+const handleBack = () => {
+  emits('back')
+}
+</script>
+
+<template lang="pug">
+q-step(
+  :name="3"
+  title="Настройка кооператива"
+  icon="settings"
+  :done="isDone"
+)
+  .q-pa-md
+    p.text-h6.q-mb-md Предварительная настройка
+    p.q-mb-md
+      | Пожалуйста, укажите домен для установки Цифрового Кооператива. Также, укажите суммы вступительных и минимальных паевых взносов для физических лиц, юридических лиц и индивидуальных предпринимателей:
+
+    AddCooperativeForm(
+      v-if="signedDocument"
+      :document="signedDocument"
+      @finish="handleFinish"
+    )
+
+  q-stepper-navigation.q-gutter-sm(v-if="signedDocument")
+    q-btn(
+      color="grey-6"
+      flat
+      label="Назад"
+      @click="handleBack"
+    )
+</template>

package/src/widgets/ConnectionAgreementStepper/Steps/IntroStep.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, withDefaults, ref } from 'vue'
+import type { IStepProps } from '../model/types'
+import { TariffSelector, type ITariff } from '../Tariffs'
+
+const props = withDefaults(defineProps<IStepProps & {
+  onContinue?: () => void
+}>(), {})
+
+const emits = defineEmits<{
+  tariffSelected: [tariff: ITariff]
+  tariffDeselected: []
+}>()
+
+const isActive = computed(() => props.isActive)
+const isDone = computed(() => props.isDone)
+
+const selectedTariff = ref<ITariff | null>(null)
+
+const canContinue = computed(() => selectedTariff.value !== null)
+
+const handleTariffSelected = (tariff: ITariff) => {
+  selectedTariff.value = tariff
+  emits('tariffSelected', tariff)
+}
+
+const handleTariffDeselected = () => {
+  selectedTariff.value = null
+  emits('tariffDeselected')
+}
+
+const handleContinue = () => {
+  if (canContinue.value && props.onContinue) {
+    props.onContinue()
+  }
+}
+</script>
+
+<template lang="pug">
+q-step(
+  :name="1"
+  title="Выберите тариф"
+  icon="info"
+  :done="isDone"
+)
+  .q-pa-md
+
+    TariffSelector(
+      :disabled="!isActive"
+      @tariff-selected="handleTariffSelected"
+      @tariff-deselected="handleTariffDeselected"
+    )
+
+  q-stepper-navigation.q-gutter-sm
+    q-btn(
+      v-if="isActive"
+      color="primary"
+      :disable="!canContinue"
+      label="Продолжить"
+      @click="handleContinue"
+    )
+</template>

package/src/widgets/ConnectionAgreementStepper/Steps/WaitingStep.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, withDefaults } from 'vue'
+import type { IStepProps } from '../model/types'
+import { copyToClipboard } from 'quasar'
+import { SuccessAlert } from 'src/shared/api'
+
+const props = withDefaults(defineProps<IStepProps & {
+  coop?: any
+  domainValid?: boolean | null
+  installationProgress?: number | null
+  instanceStatus?: string | null
+  subscriptionsLoading?: boolean
+  subscriptionsError?: string | null
+  onReload?: () => void
+  onBack?: () => void
+}>(), {
+  domainValid: null,
+  installationProgress: null,
+  instanceStatus: null,
+  subscriptionsLoading: false,
+  subscriptionsError: null
+})
+
+const emits = defineEmits<{
+  back: []
+  reload: []
+}>()
+
+const isDone = computed(() => props.isDone)
+
+const handleBack = () => {
+  emits('back')
+}
+
+const handleReload = () => {
+  emits('reload')
+}
+
+const instruction = computed(() => `Создайте A-запись домена ${props.coop?.announce} на IP-адрес: 51.250.114.13`)
+
+const copy = () => {
+  copyToClipboard(instruction.value)
+    .then(() => {
+      SuccessAlert('Инструкция скопирована в буфер')
+    })
+    .catch((e) => {
+      console.log(e)
+    })
+}
+</script>
+
+<template lang="pug">
+q-step(
+  :name="4"
+  title="Установка кооператива"
+  icon="hourglass_top"
+  :done="isDone"
+)
+  .q-pa-md
+    p.text-h6.q-mb-md Кооператив на подключении
+    p.q-mb-md Статус:
+      q-badge(
+        v-if="coop?.status == 'pending'"
+        color="orange"
+      ).q-ml-sm ожидание
+      q-badge(
+        v-if="coop?.status == 'active'"
+        color="teal"
+      ).q-ml-sm активен
+      q-badge(
+        v-if="coop?.status == 'blocked'"
+        color="red"
+      ).q-ml-sm заблокирован
+
+    q-btn(
+      color="grey-6"
+      size="sm"
+      flat
+      label="Назад"
+      @click="handleBack"
+    )
+    q-btn(
+      color="primary"
+      size="sm"
+      icon="refresh"
+      @click="handleReload"
+    ).q-ml-md
+      span обновить
+
+    .q-mt-md
+      p.text-subtitle1 Статус подписки на хостинг:
+
+      div.flex.items-center.q-gutter-sm.q-mt-sm
+        div
+          span.text-body2 Валидность домена:
+          q-badge(
+            v-if="domainValid === true"
+            color="green"
+          ).q-ml-sm валиден
+          q-badge(
+            v-if="domainValid === false"
+            color="red"
+          ).q-ml-sm не валиден
+          q-badge(
+            v-if="domainValid === null && !subscriptionsLoading"
+            color="grey"
+          ).q-ml-sm неизвестно
+          q-badge(
+            v-if="subscriptionsLoading"
+            color="blue"
+          ).q-ml-sm загрузка...
+
+        div
+          span.text-body2 Прогресс установки:
+          q-badge(
+            v-if="installationProgress !== null"
+            :color="installationProgress === 100 ? 'green' : 'orange'"
+          ).q-ml-sm {{ installationProgress }}%
+          q-badge(
+            v-if="installationProgress === null && !subscriptionsLoading"
+            color="grey"
+          ).q-ml-sm неизвестно
+          q-badge(
+            v-if="subscriptionsLoading"
+            color="blue"
+          ).q-ml-sm загрузка...
+
+        div
+          span.text-body2 Статус сервера:
+          q-badge(
+            v-if="instanceStatus"
+            :color="instanceStatus === 'active' ? 'green' : instanceStatus === 'error' ? 'red' : 'orange'"
+          ).q-ml-sm {{ instanceStatus }}
+          q-badge(
+            v-if="!instanceStatus && !subscriptionsLoading"
+            color="grey"
+          ).q-ml-sm неизвестно
+          q-badge(
+            v-if="subscriptionsLoading"
+            color="blue"
+          ).q-ml-sm загрузка...
+
+    .q-mt-md
+      div(
+        v-if="subscriptionsError"
+      ).q-mb-md
+        q-banner(
+          :class="'text-white bg-red-500'"
+          rounded
+        )
+          template(v-slot:avatar)
+            q-icon(name="error" color="white")
+          span {{ subscriptionsError }}
+
+    p.q-mt-md
+      | Пожалуйста, перешлите инструкцию ниже вашему техническому специалисту. После её выполнения, мы автоматически выполним запуск. Далее, Вам необходимо завершить установку уже на Вашем сайте следуя инструкциям, представленным там.
+
+    q-card(flat bordered).q-pa-sm.q-mt-md
+      p.text-bold Инструкция
+      div.flex.justify-between
+        span {{ instruction }}
+        q-btn(size="sm" icon="fas fa-copy" flat @click="copy")
+</template>

package/src/widgets/ConnectionAgreementStepper/Steps/index.ts

@@ -0,0 +1,4 @@
+export { default as IntroStep } from './IntroStep.vue'
+export { default as AgreementStep } from './AgreementStep.vue'
+export { default as FormStep } from './FormStep.vue'
+export { default as WaitingStep } from './WaitingStep.vue'

package/src/widgets/ConnectionAgreementStepper/Tariffs/TariffCard.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface ITariff {
+  id: string
+  name: string
+  description: string
+  features: string[]
+  price: string
+  additionalCosts?: string[]
+}
+
+const props = defineProps<{
+  tariff: ITariff
+  selected?: boolean
+  disabled?: boolean
+}>()
+
+const emits = defineEmits<{
+  select: [tariffId: string]
+  deselect: [tariffId: string]
+}>()
+
+const isSelected = computed(() => props.selected)
+const isDisabled = computed(() => props.disabled)
+
+const cardClasses = computed(() => {
+  const classes = ['tariff-card', 'cursor-pointer', 'transition-all', 'duration-200']
+
+  if (isSelected.value) {
+    classes.push('tariff-selected')
+  }
+
+  if (isDisabled.value) {
+    classes.push('tariff-disabled')
+  }
+
+  return classes.join(' ')
+})
+
+const handleSelect = () => {
+  if (!isDisabled.value) {
+    // Если тариф уже выбран, снимаем выбор, иначе выбираем
+    if (isSelected.value) {
+      emits('deselect', props.tariff.id)
+    } else {
+      emits('select', props.tariff.id)
+    }
+  }
+}
+</script>
+
+<template lang="pug">
+div.tariff-card-container
+  .tariff-card(
+    :class="cardClasses"
+    @click="handleSelect"
+  )
+    .tariff-header
+      .tariff-checkmark(v-if="isSelected")
+        q-icon(name="check_circle" size="24px" color="white")
+      .tariff-title
+        h6.text-h6 {{ tariff.name }}
+
+    .tariff-content
+      p.text-body2.text-grey-7.q-mb-md.text-center {{ tariff.description }}
+
+      .tariff-features
+        .feature-item(v-for="feature in tariff.features" :key="feature")
+          q-icon(name="check" size="16px" color="positive").q-mr-xs
+          span {{ feature }}
+
+      template(v-if="tariff.additionalCosts && tariff.additionalCosts.length")
+        .tariff-additional.q-mt-md
+          p.text-subtitle2.text-grey-8 Дополнительные расходы:
+          .additional-item(v-for="cost in tariff.additionalCosts" :key="cost")
+            q-icon(name="add_circle_outline" size="14px" color="info").q-mr-xs
+            span.text-caption {{ cost }}
+
+    .tariff-footer
+      .tariff-price
+        .price-display {{ tariff.price }}
+        .price-period(v-if="tariff.price !== 'Бесплатно'") в месяц
+      .select-hint.text-caption.text-grey-6
+        | Нажмите для выбора
+</template>
+
+<style scoped>
+.tariff-card-container {
+  position: relative;
+  height: 100%;
+}
+
+.tariff-card {
+  position: relative;
+  height: 100%;
+  min-height: 360px; /* Уменьшенная минимальная высота */
+  padding: 24px;
+  border-radius: 16px;
+  background: white;
+  border: 2px solid #f0f0f0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tariff-card:hover:not(.tariff-disabled):not(.tariff-selected) {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border-color: #e0e0e0;
+}
+
+.tariff-selected {
+  border-color: var(--q-accent);
+  background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(25, 118, 210, 0.02) 100%);
+  box-shadow:
+    0 8px 32px rgba(25, 118, 210, 0.2),
+    0 0 0 1px var(--q-accent);
+  transform: translateY(-2px);
+}
+
+.tariff-disabled {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+
+.tariff-header {
+  position: relative;
+  height: 40px; /* Фиксированная высота для предотвращения прыжков */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.tariff-checkmark {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%) scale(0.8);
+  background: var(--q-accent);
+  border-radius: 50%;
+  padding: 4px;
+  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tariff-selected .tariff-checkmark {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+.tariff-title {
+  text-align: center;
+  margin-right: 36px; /* Отступ для иконки */
+}
+
+.tariff-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.tariff-features {
+  flex: 1;
+  margin-bottom: 16px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 4px 0;
+  transition: color 0.2s ease;
+}
+
+.feature-item:hover {
+  color: var(--q-primary);
+}
+
+.tariff-additional {
+  border-top: 1px solid #f5f5f5;
+  padding-top: 16px;
+}
+
+.additional-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  color: #666;
+  font-size: 12px;
+}
+
+.tariff-footer {
+  position: relative;
+  height: 80px; /* Увеличенная высота для богатого оформления */
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px 32px 20px 12px;
+}
+
+.tariff-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  text-align: right;
+}
+
+.price-display {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -1px;
+  background: linear-gradient(135deg, var(--q-accent) 0%, rgba(25, 118, 210, 0.8) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  text-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
+}
+
+.price-period {
+  font-size: 12px;
+  font-weight: 400;
+  color: #888;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  opacity: 0.8;
+}
+
+.select-hint {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #999;
+  font-style: italic;
+  opacity: 0;
+  animation: pulse 2s infinite;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.tariff-card:not(.tariff-selected):not(.tariff-disabled) .select-hint {
+  opacity: 1;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 599px) {
+  .tariff-card {
+    padding: 16px;
+  }
+
+  .tariff-header {
+    margin-bottom: 12px;
+  }
+
+  .tariff-title h6 {
+    font-size: 1rem;
+  }
+}
+</style>

package/src/widgets/ConnectionAgreementStepper/Tariffs/TariffSelector.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { TariffCard, type ITariff } from './index'
+
+// Доступные тарифы
+const availableTariffs: ITariff[] = [
+  {
+    id: 'test',
+    name: 'Тестовый',
+    description: 'Единственный тариф на период бета-тестирования платформы',
+    price: '1500 RUB',
+    features: [
+      '150 AXON на счёт кооператива',
+      'достаточно для 100 пакетов документов',
+      'и 50 регистраций пайщиков',
+      'Хостинг на изолированном сервере',
+      'Техническая поддержка'
+    ],
+    additionalCosts: [
+      '5 AXON в день списывается со счёта кооператива',
+      '1 AXON списывается за каждый пакет документов',
+      '1 AXON списывается за регистрацию нового пайщика',
+    ]
+  }
+]
+
+defineProps<{
+  disabled?: boolean
+}>()
+
+const emits = defineEmits<{
+  tariffSelected: [tariff: ITariff]
+  tariffDeselected: []
+}>()
+
+const selectedTariffId = ref<string>('')
+
+const selectedTariff = computed(() => {
+  return availableTariffs.find(tariff => tariff.id === selectedTariffId.value)
+})
+
+const handleTariffSelect = (tariffId: string) => {
+  selectedTariffId.value = tariffId
+  const tariff = availableTariffs.find(t => t.id === tariffId)
+  if (tariff) {
+    emits('tariffSelected', tariff)
+  }
+}
+
+const handleTariffDeselect = (tariffId: string) => {
+  if (selectedTariffId.value === tariffId) {
+    selectedTariffId.value = ''
+    emits('tariffDeselected')
+  }
+}
+
+// Экспортируем для использования в родительском компоненте
+defineExpose({
+  selectedTariff,
+  hasSelection: computed(() => !!selectedTariffId.value)
+})
+</script>
+
+<template lang="pug">
+div
+  .text-center.q-mb-lg
+    //- h5.text-h5.q-mb-sm Выберите тариф
+    p.text-body2.text-grey-7 Выберите подходящий тариф для вашего кооператива
+
+  .tariff-grid
+    div(v-for="tariff in availableTariffs" :key="tariff.id")
+      TariffCard(
+        :tariff="tariff"
+        :selected="selectedTariffId === tariff.id"
+        :disabled="disabled"
+        @select="handleTariffSelect"
+        @deselect="handleTariffDeselect"
+      )</template>
+
+<style scoped>
+.tariff-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+@media (max-width: 599px) {
+  .tariff-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+</style>

package/src/widgets/ConnectionAgreementStepper/Tariffs/index.ts

@@ -0,0 +1,3 @@
+export { default as TariffCard } from './TariffCard.vue'
+export { default as TariffSelector } from './TariffSelector.vue'
+export type { ITariff } from './TariffCard.vue'

package/src/widgets/ConnectionAgreementStepper/index.ts

@@ -0,0 +1,2 @@
+export { ConnectionAgreementStepper } from './ui'
+export type { IStepperProps, IStepProps } from './model'

package/src/widgets/ConnectionAgreementStepper/model/index.ts

@@ -0,0 +1 @@
+export type { IStepperProps, IStepProps } from './types'

package/src/widgets/ConnectionAgreementStepper/model/types.ts

@@ -0,0 +1,13 @@
+export interface IStepperProps {
+  currentStep: number
+  isFinish: boolean
+  signedDocument: any
+  coop: any
+  html: string
+}
+
+export interface IStepProps {
+  currentStep: number
+  isActive: boolean
+  isDone: boolean
+}

package/src/widgets/ConnectionAgreementStepper/ui/ConnectionAgreementStepper.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IntroStep, AgreementStep, FormStep, WaitingStep } from '../Steps/index'
+
+const props = defineProps<{
+  initialStep?: number
+  isFinish: boolean
+  signedDocument: any
+  coop: any
+  html?: string
+  domainValid?: boolean | null
+  installationProgress?: number | null
+  instanceStatus?: string | null
+  subscriptionsLoading?: boolean
+  subscriptionsError?: string | null
+}>()
+
+const emits = defineEmits<{
+  stepChange: [step: number]
+  tariffSelected: [tariff: any]
+  tariffDeselected: []
+  continue: []
+  sign: []
+  finish: []
+  reload: []
+}>()
+
+const currentStep = ref(props.initialStep || 1)
+
+// Управление шагами
+const goToNext = () => {
+  if (currentStep.value < 4) {
+    currentStep.value++
+    emits('stepChange', currentStep.value)
+  }
+}
+
+const goToPrev = () => {
+  if (currentStep.value > 1) {
+    currentStep.value--
+    emits('stepChange', currentStep.value)
+  }
+}
+
+const handleContinue = () => {
+  goToNext()
+  emits('continue')
+}
+
+const handleSign = () => {
+  goToNext()
+  emits('sign')
+}
+
+const handleFinish = () => {
+  goToNext()
+  emits('finish')
+}
+
+const handleReload = () => {
+  emits('reload')
+}
+
+const handleTariffSelected = (tariff: any) => {
+  emits('tariffSelected', tariff)
+}
+
+const handleTariffDeselected = () => {
+  emits('tariffDeselected')
+}
+</script>
+
+<template lang="pug">
+div
+  q-stepper(
+    :model-value="currentStep"
+    flat
+    vertical
+    color="accent"
+    animated
+    done-color="teal"
+  )
+    IntroStep(
+      :current-step="currentStep"
+      :is-active="currentStep === 1"
+      :is-done="currentStep > 1"
+      @continue="handleContinue"
+      @tariff-selected="handleTariffSelected"
+      @tariff-deselected="handleTariffDeselected"
+    )
+
+    AgreementStep(
+      :current-step="currentStep"
+      :is-active="currentStep === 2"
+      :is-done="currentStep > 2"
+      :html="html"
+      @back="goToPrev"
+      @sign="handleSign"
+    )
+
+    FormStep(
+      :current-step="currentStep"
+      :is-active="currentStep === 3"
+      :is-done="currentStep > 3"
+      :signed-document="signedDocument"
+      @back="goToPrev"
+      @finish="handleFinish"
+    )
+
+    WaitingStep(
+      :current-step="currentStep"
+      :is-active="currentStep === 4"
+      :is-done="false"
+      :coop="coop"
+      :domain-valid="domainValid"
+      :installation-progress="installationProgress"
+      :instance-status="instanceStatus"
+      :subscriptions-loading="subscriptionsLoading"
+      :subscriptions-error="subscriptionsError"
+      @back="goToPrev"
+      @reload="handleReload"
+    )
+</template>

package/src/widgets/ConnectionAgreementStepper/ui/index.ts

@@ -0,0 +1 @@
+export { default as ConnectionAgreementStepper } from './ConnectionAgreementStepper.vue'