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