Split profile into dedicated pages for counterparty, notifications, and addresses

2026-04-03 10:34:38 +07:00
parent 4c82c2437a
commit 9222d71cd2
5 changed files with 834 additions and 784 deletions
--- a/app/pages/profile/notifications.vue
+++ b/app/pages/profile/notifications.vue
@@ -0,0 +1,89 @@
+<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>