106 lines
3.9 KiB
Vue
106 lines
3.9 KiB
Vue
<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('');
|
|
const messageTone = ref<'success' | 'error'>('success');
|
|
|
|
registerMutation.onDone(() => {
|
|
message.value = 'Заявка на регистрацию отправлена менеджеру';
|
|
messageTone.value = 'success';
|
|
});
|
|
|
|
registerMutation.onError((error) => {
|
|
message.value = error.message;
|
|
messageTone.value = 'error';
|
|
});
|
|
|
|
messengerMutation.onDone(() => {
|
|
message.value = 'Канал уведомлений подключен';
|
|
messageTone.value = 'success';
|
|
});
|
|
|
|
messengerMutation.onError((error) => {
|
|
message.value = error.message;
|
|
messageTone.value = 'error';
|
|
});
|
|
|
|
function register() {
|
|
message.value = '';
|
|
registerMutation.mutate({
|
|
input: {
|
|
companyName: companyName.value,
|
|
inn: inn.value || null,
|
|
contactName: contactName.value,
|
|
email: email.value,
|
|
},
|
|
});
|
|
}
|
|
|
|
function connectMessenger() {
|
|
message.value = '';
|
|
messengerMutation.mutate({
|
|
input: {
|
|
type: channelType.value,
|
|
channelId: channelId.value,
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-6">
|
|
<div>
|
|
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
|
|
<p class="mt-1 text-sm text-[#28543f]/80">Регистрация компании и подключение каналов уведомлений.</p>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-2">
|
|
<div class="surface-card rounded-3xl p-5">
|
|
<h2 class="text-xl font-bold text-[#123824]">Самостоятельная регистрация</h2>
|
|
<div class="mt-4 space-y-3">
|
|
<input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<input v-model="email" type="email" placeholder="Email" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<button class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]" :disabled="registerMutation.loading.value" @click="register">
|
|
{{ registerMutation.loading.value ? 'Отправляем…' : 'Отправить заявку' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface-card rounded-3xl p-5">
|
|
<h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
|
|
<div class="mt-4 space-y-3">
|
|
<select v-model="channelType" class="select select-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<option value="TELEGRAM">Telegram</option>
|
|
<option value="MAX">Max</option>
|
|
</select>
|
|
<input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
|
|
<button class="btn w-full border-0 bg-[#ff5600] text-white hover:bg-[#e24e00]" :disabled="messengerMutation.loading.value" @click="connectMessenger">
|
|
{{ messengerMutation.loading.value ? 'Подключаем…' : 'Подключить канал' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="message"
|
|
class="alert"
|
|
:class="messageTone === 'success' ? 'alert-success' : 'alert-error'"
|
|
>
|
|
{{ message }}
|
|
</div>
|
|
</section>
|
|
</template>
|