feat(profile): show messenger connect success state
This commit is contained in:
@@ -13,12 +13,13 @@ type MessengerStartInput = {
|
|||||||
channel: MessengerChannel;
|
channel: MessengerChannel;
|
||||||
baseUrl: string;
|
baseUrl: string;
|
||||||
email?: string;
|
email?: string;
|
||||||
|
redirectPath?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function useMessengerStart() {
|
export function useMessengerStart() {
|
||||||
const pendingChannel = ref<MessengerChannel | null>(null);
|
const pendingChannel = ref<MessengerChannel | null>(null);
|
||||||
|
|
||||||
async function openMessengerBot({ channel, baseUrl, email }: MessengerStartInput) {
|
async function openMessengerBot({ channel, baseUrl, email, redirectPath }: MessengerStartInput) {
|
||||||
pendingChannel.value = channel;
|
pendingChannel.value = channel;
|
||||||
|
|
||||||
const payloadPromise = $fetch<MessengerStartResponse>('/api/auth/messenger-start', {
|
const payloadPromise = $fetch<MessengerStartResponse>('/api/auth/messenger-start', {
|
||||||
@@ -26,6 +27,7 @@ export function useMessengerStart() {
|
|||||||
body: {
|
body: {
|
||||||
channel,
|
channel,
|
||||||
email,
|
email,
|
||||||
|
redirectPath,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
payloadPromise.finally(() => {
|
payloadPromise.finally(() => {
|
||||||
|
|||||||
@@ -158,6 +158,11 @@ async function consumeLoginToken(loginToken: string) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
await finalizeSession(payload.accessToken);
|
await finalizeSession(payload.accessToken);
|
||||||
|
const nextPath = typeof route.query.next === 'string' ? route.query.next : '';
|
||||||
|
if (nextPath.startsWith('/')) {
|
||||||
|
await navigateTo(nextPath);
|
||||||
|
return;
|
||||||
|
}
|
||||||
await navigateAfterLogin(payload.user);
|
await navigateAfterLogin(payload.user);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -72,6 +72,7 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
|
|||||||
await openMessengerBot({
|
await openMessengerBot({
|
||||||
channel,
|
channel,
|
||||||
baseUrl,
|
baseUrl,
|
||||||
|
redirectPath: `/profile/notifications?status=success&connected=${channel.toLowerCase()}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ type MessengerItem = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const config = useRuntimeConfig();
|
const config = useRuntimeConfig();
|
||||||
|
const route = useRoute();
|
||||||
const meQuery = useQuery(MeDocument);
|
const meQuery = useQuery(MeDocument);
|
||||||
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
|
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
|
||||||
const { openMessengerBot, pendingChannel } = useMessengerStart();
|
const { openMessengerBot, pendingChannel } = useMessengerStart();
|
||||||
@@ -40,6 +41,35 @@ function buildBotConnectUrl(baseUrl: string) {
|
|||||||
|
|
||||||
const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
|
const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
|
||||||
const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
|
const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
|
||||||
|
const successChannel = computed(() => {
|
||||||
|
const raw = String(route.query.connected || '').trim().toLowerCase();
|
||||||
|
return raw === 'telegram' || raw === 'max' ? raw : '';
|
||||||
|
});
|
||||||
|
const showSuccess = computed(() => route.query.status === 'success' && Boolean(successChannel.value));
|
||||||
|
const profileName = computed(() => meQuery.result.value?.me?.fullName?.trim() || meQuery.result.value?.me?.email || 'Пользователь');
|
||||||
|
const profileInitials = computed(() =>
|
||||||
|
profileName.value
|
||||||
|
.split(' ')
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 2)
|
||||||
|
.map((part) => part.charAt(0).toUpperCase())
|
||||||
|
.join('') || 'FR',
|
||||||
|
);
|
||||||
|
const successTitle = computed(() =>
|
||||||
|
successChannel.value === 'telegram' ? 'Telegram успешно подключен' : 'Max успешно подключен',
|
||||||
|
);
|
||||||
|
const successText = computed(() =>
|
||||||
|
successChannel.value === 'telegram'
|
||||||
|
? 'Теперь этот Telegram привязан к вашему кабинету, и уведомления будут приходить в него.'
|
||||||
|
: 'Теперь этот Max привязан к вашему кабинету, и уведомления будут приходить в него.',
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (showSuccess.value) {
|
||||||
|
void connectionsQuery.refetch();
|
||||||
|
void meQuery.refetch();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
|
async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
|
||||||
const baseUrl = channel === 'TELEGRAM' ? telegramConnectUrl.value : maxConnectUrl.value;
|
const baseUrl = channel === 'TELEGRAM' ? telegramConnectUrl.value : maxConnectUrl.value;
|
||||||
@@ -50,6 +80,7 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
|
|||||||
await openMessengerBot({
|
await openMessengerBot({
|
||||||
channel,
|
channel,
|
||||||
baseUrl,
|
baseUrl,
|
||||||
|
redirectPath: `/profile/notifications?status=success&connected=${channel.toLowerCase()}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -59,6 +90,27 @@ async function connectMessenger(channel: 'TELEGRAM' | 'MAX') {
|
|||||||
<NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
|
<NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
|
||||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
|
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
|
||||||
|
|
||||||
|
<div v-if="showSuccess" class="surface-card rounded-3xl border border-[#c7efd7] bg-[#f4fff8] p-5">
|
||||||
|
<div class="flex flex-col gap-4 md:flex-row md:items-center">
|
||||||
|
<div class="avatar placeholder">
|
||||||
|
<div class="h-18 w-18 rounded-full bg-[#123824] text-xl font-bold text-white">
|
||||||
|
<span>{{ profileInitials }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div class="badge badge-success badge-outline">Успешно</div>
|
||||||
|
<h2 class="text-2xl font-extrabold text-[#0f2f20]">{{ successTitle }}</h2>
|
||||||
|
<p class="text-sm text-[#355947]">
|
||||||
|
{{ profileName }}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-[#355947]">
|
||||||
|
{{ successText }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="surface-card rounded-3xl p-5">
|
<div class="surface-card rounded-3xl p-5">
|
||||||
<p class="text-sm text-[#355947]">
|
<p class="text-sm text-[#355947]">
|
||||||
Подключите Telegram и Max, чтобы получать статусы заказов и важные уведомления в удобном канале.
|
Подключите Telegram и Max, чтобы получать статусы заказов и важные уведомления в удобном канале.
|
||||||
|
|||||||
Reference in New Issue
Block a user