From b0f461a74e3032490ab6fda52ae71f106a235f71 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 2 Apr 2026 16:08:08 +0700
Subject: [PATCH] fix(profile): replace manual messenger fields with bot
 connect buttons

---
 app/pages/profile.vue | 93 ++++++++++++++++++++++++++++---------------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index f692e16..daebf8f 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { useMutation } from '@vue/apollo-composable';
-import { ConnectMessengerDocument, RegisterSelfDocument } from '~/composables/graphql/generated';
+import { useMutation, useQuery } from '@vue/apollo-composable';
+import { MeDocument, MyMessengerConnectionsDocument, RegisterSelfDocument } from '~/composables/graphql/generated';
 
 const companyName = ref('');
 const inn = ref('');
 const contactName = ref('');
 const email = ref('');
-const channelId = ref('');
-const channelType = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');
+const config = useRuntimeConfig();
 
 const registerMutation = useMutation(RegisterSelfDocument);
-const messengerMutation = useMutation(ConnectMessengerDocument);
+const meQuery = useQuery(MeDocument);
+const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
 
 const message = ref('');
 const messageTone = ref<'success' | 'error'>('success');
@@ -25,15 +25,33 @@ registerMutation.onError((error) => {
   messageTone.value = 'error';
 });
 
-messengerMutation.onDone(() => {
-  message.value = 'Канал уведомлений подключен';
-  messageTone.value = 'success';
-});
+const telegramConnection = computed(() =>
+  connectionsQuery.result.value?.myMessengerConnections?.find(
+    (item: { type: 'TELEGRAM' | 'MAX'; isActive: boolean; channelId: string }) =>
+      item.type === 'TELEGRAM' && item.isActive,
+  ),
+);
 
-messengerMutation.onError((error) => {
-  message.value = error.message;
-  messageTone.value = 'error';
-});
+const maxConnection = computed(() =>
+  connectionsQuery.result.value?.myMessengerConnections?.find(
+    (item: { type: 'TELEGRAM' | 'MAX'; isActive: boolean; channelId: string }) =>
+      item.type === 'MAX' && item.isActive,
+  ),
+);
+
+function buildBotConnectUrl(baseUrl: string) {
+  const accountEmail = meQuery.result.value?.me?.email?.trim().toLowerCase();
+  if (!accountEmail || !baseUrl) {
+    return '';
+  }
+
+  const payload = encodeURIComponent(`login:${accountEmail}`);
+  const separator = baseUrl.includes('?') ? '&' : '?';
+  return `${baseUrl}${separator}start=${payload}`;
+}
+
+const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
+const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
 
 function register() {
   message.value = '';
@@ -46,16 +64,6 @@ function register() {
     },
   });
 }
-
-function connectMessenger() {
-  message.value = '';
-  messengerMutation.mutate({
-    input: {
-      type: channelType.value,
-      channelId: channelId.value,
-    },
-  });
-}
 </script>
 
 <template>
@@ -82,14 +90,37 @@ function connectMessenger() {
       <div class="surface-card rounded-3xl p-5">
         <h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
         <div class="mt-4 space-y-3">
-          <select v-model="channelType" class="select select-bordered w-full border-[#d0e8d8] bg-white/80">
-            <option value="TELEGRAM">Telegram</option>
-            <option value="MAX">Max</option>
-          </select>
-          <input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
-          <button class="btn w-full border-0 bg-[#ff5600] text-white hover:bg-[#e24e00]" :disabled="messengerMutation.loading.value" @click="connectMessenger">
-            {{ messengerMutation.loading.value ? 'Подключаем…' : 'Подключить канал' }}
-          </button>
+          <div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
+            <p class="font-semibold">Telegram</p>
+            <p class="text-sm opacity-80">
+              {{ telegramConnection ? `Подключен: ${telegramConnection.channelId}` : 'Не подключен' }}
+            </p>
+            <a
+              :href="telegramConnectUrl || undefined"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-secondary mt-3 w-full"
+              :class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
+            >
+              {{ telegramConnection ? 'Переподключить Telegram' : 'Подключить Telegram' }}
+            </a>
+          </div>
+
+          <div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
+            <p class="font-semibold">Max</p>
+            <p class="text-sm opacity-80">
+              {{ maxConnection ? `Подключен: ${maxConnection.channelId}` : 'Не подключен' }}
+            </p>
+            <a
+              :href="maxConnectUrl || undefined"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-accent mt-3 w-full"
+              :class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"
+            >
+              {{ maxConnection ? 'Переподключить Max' : 'Подключить Max' }}
+            </a>
+          </div>
         </div>
       </div>
     </div>