fix(profile): replace manual messenger fields with bot connect buttons

This commit is contained in:
Ruslan Bakiev
2026-04-02 16:08:08 +07:00
parent 79100d05f8
commit b0f461a74e

View File

@@ -1,16 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { useMutation } from '@vue/apollo-composable'; import { useMutation, useQuery } from '@vue/apollo-composable';
import { ConnectMessengerDocument, RegisterSelfDocument } from '~/composables/graphql/generated'; import { MeDocument, MyMessengerConnectionsDocument, RegisterSelfDocument } from '~/composables/graphql/generated';
const companyName = ref(''); const companyName = ref('');
const inn = ref(''); const inn = ref('');
const contactName = ref(''); const contactName = ref('');
const email = ref(''); const email = ref('');
const channelId = ref(''); const config = useRuntimeConfig();
const channelType = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');
const registerMutation = useMutation(RegisterSelfDocument); const registerMutation = useMutation(RegisterSelfDocument);
const messengerMutation = useMutation(ConnectMessengerDocument); const meQuery = useQuery(MeDocument);
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
const message = ref(''); const message = ref('');
const messageTone = ref<'success' | 'error'>('success'); const messageTone = ref<'success' | 'error'>('success');
@@ -25,15 +25,33 @@ registerMutation.onError((error) => {
messageTone.value = 'error'; messageTone.value = 'error';
}); });
messengerMutation.onDone(() => { const telegramConnection = computed(() =>
message.value = 'Канал уведомлений подключен'; connectionsQuery.result.value?.myMessengerConnections?.find(
messageTone.value = 'success'; (item: { type: 'TELEGRAM' | 'MAX'; isActive: boolean; channelId: string }) =>
}); item.type === 'TELEGRAM' && item.isActive,
),
);
messengerMutation.onError((error) => { const maxConnection = computed(() =>
message.value = error.message; connectionsQuery.result.value?.myMessengerConnections?.find(
messageTone.value = 'error'; (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() { function register() {
message.value = ''; message.value = '';
@@ -46,16 +64,6 @@ function register() {
}, },
}); });
} }
function connectMessenger() {
message.value = '';
messengerMutation.mutate({
input: {
type: channelType.value,
channelId: channelId.value,
},
});
}
</script> </script>
<template> <template>
@@ -82,14 +90,37 @@ function connectMessenger() {
<div class="surface-card rounded-3xl p-5"> <div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2> <h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
<div class="mt-4 space-y-3"> <div class="mt-4 space-y-3">
<select v-model="channelType" class="select select-bordered w-full border-[#d0e8d8] bg-white/80"> <div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<option value="TELEGRAM">Telegram</option> <p class="font-semibold">Telegram</p>
<option value="MAX">Max</option> <p class="text-sm opacity-80">
</select> {{ telegramConnection ? `Подключен: ${telegramConnection.channelId}` : 'Не подключен' }}
<input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered w-full border-[#d0e8d8] bg-white/80"> </p>
<button class="btn w-full border-0 bg-[#ff5600] text-white hover:bg-[#e24e00]" :disabled="messengerMutation.loading.value" @click="connectMessenger"> <a
{{ messengerMutation.loading.value ? 'Подключаем' : 'Подключить канал' }} :href="telegramConnectUrl || undefined"
</button> 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> </div>
</div> </div>