90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import { useQuery } from '@vue/apollo-composable';
|
||
import {
|
||
MeDocument,
|
||
MyMessengerConnectionsDocument,
|
||
} from '~/composables/graphql/generated';
|
||
import { buildMessengerBotStartUrl } from '~/composables/useMessengerBotLink';
|
||
|
||
type MessengerItem = {
|
||
type: 'TELEGRAM' | 'MAX';
|
||
isActive: boolean;
|
||
channelId: string;
|
||
};
|
||
|
||
const config = useRuntimeConfig();
|
||
const meQuery = useQuery(MeDocument);
|
||
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
|
||
|
||
const telegramConnection = computed(() =>
|
||
connectionsQuery.result.value?.myMessengerConnections?.find(
|
||
(item: MessengerItem) => item.type === 'TELEGRAM' && item.isActive,
|
||
),
|
||
);
|
||
|
||
const maxConnection = computed(() =>
|
||
connectionsQuery.result.value?.myMessengerConnections?.find(
|
||
(item: MessengerItem) => item.type === 'MAX' && item.isActive,
|
||
),
|
||
);
|
||
|
||
function buildBotConnectUrl(baseUrl: string) {
|
||
const accountEmail = meQuery.result.value?.me?.email?.trim().toLowerCase();
|
||
if (!accountEmail || !baseUrl) {
|
||
return '';
|
||
}
|
||
|
||
return buildMessengerBotStartUrl(baseUrl, accountEmail);
|
||
}
|
||
|
||
const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
|
||
const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
|
||
</script>
|
||
|
||
<template>
|
||
<section class="space-y-6">
|
||
<NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
|
||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
|
||
|
||
<div class="surface-card rounded-3xl p-5">
|
||
<p class="text-sm text-[#355947]">
|
||
Подключите Telegram и Max, чтобы получать статусы заказов и важные уведомления в удобном канале.
|
||
</p>
|
||
|
||
<div class="mt-4 space-y-3">
|
||
<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>
|
||
</section>
|
||
</template>
|