fix(profile): replace manual messenger fields with bot connect buttons
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user