Build Nuxt 4 client cabinet with Apollo and GraphQL flows

app/pages/profile.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useMutation } from '@vue/apollo-composable';
+import { ConnectMessengerDocument, 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 registerMutation = useMutation(RegisterSelfDocument);
+const messengerMutation = useMutation(ConnectMessengerDocument);
+
+const message = ref('');
+
+function register() {
+  registerMutation.mutate({
+    input: {
+      companyName: companyName.value,
+      inn: inn.value || null,
+      contactName: contactName.value,
+      email: email.value,
+    },
+  }).then(() => {
+    message.value = 'Заявка на регистрацию отправлена менеджеру';
+  });
+}
+
+function connectMessenger() {
+  messengerMutation.mutate({
+    input: {
+      type: channelType.value,
+      channelId: channelId.value,
+    },
+  }).then(() => {
+    message.value = 'Канал уведомлений подключен';
+  });
+}
+</script>
+
+<template>
+  <section class="space-y-6 max-w-2xl">
+    <h1 class="text-2xl font-bold">Профиль и каналы уведомлений</h1>
+
+    <div class="card bg-base-100 border border-base-300">
+      <div class="card-body space-y-3">
+        <h2 class="card-title">Самостоятельная регистрация</h2>
+        <input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered" />
+        <input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered" />
+        <input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered" />
+        <input v-model="email" type="email" placeholder="Email" class="input input-bordered" />
+        <button class="btn btn-primary" @click="register">Отправить заявку</button>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 border border-base-300">
+      <div class="card-body space-y-3">
+        <h2 class="card-title">Подключение мессенджера</h2>
+        <select v-model="channelType" class="select select-bordered">
+          <option value="TELEGRAM">Telegram</option>
+          <option value="MAX">Max</option>
+        </select>
+        <input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered" />
+        <button class="btn btn-secondary" @click="connectMessenger">Подключить канал</button>
+      </div>
+    </div>
+
+    <div v-if="message" class="alert alert-success">{{ message }}</div>
+  </section>
+</template>