Simplify notifications settings layout
This commit is contained in:
Ruslan Bakiev
@@ -28,8 +28,6 @@ type MessengerItem = {
|
||||
type MessengerOption = {
|
||||
channel: MessengerChannel;
|
||||
label: string;
|
||||
title: string;
|
||||
description: string;
|
||||
buttonClass: string;
|
||||
iconClass: string;
|
||||
unavailableText: string;
|
||||
@@ -58,8 +56,6 @@ const messengerOptions: MessengerOption[] = [
|
||||
{
|
||||
channel: 'TELEGRAM',
|
||||
label: 'Telegram',
|
||||
title: 'Подключить Telegram',
|
||||
description: 'Получайте статусы заказов и сервисные уведомления в Telegram.',
|
||||
buttonClass: 'bg-[#1a9c63] text-white hover:bg-[#148553]',
|
||||
iconClass: 'bg-[#123824] text-white',
|
||||
unavailableText: 'Telegram пока не настроен в окружении фронта.',
|
||||
@@ -67,8 +63,6 @@ const messengerOptions: MessengerOption[] = [
|
||||
{
|
||||
channel: 'MAX',
|
||||
label: 'MAX',
|
||||
title: 'Подключить MAX',
|
||||
description: 'Открывает MAX-бота и привязывает аккаунт к личному кабинету.',
|
||||
buttonClass: 'bg-[#2b7fff] text-white hover:bg-[#1d6df1]',
|
||||
iconClass: 'bg-[#2b7fff] text-white',
|
||||
unavailableText: 'MAX пока не настроен в окружении фронта.',
|
||||
@@ -144,8 +138,8 @@ async function removeConnection(connectionId: string) {
|
||||
|
||||
<div class="space-y-2">
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>
|
||||
<p class="max-w-3xl text-sm leading-6 text-[#466653]">
|
||||
Подключите удобные мессенджеры, чтобы получать статусы заказов и важные уведомления без лишних переходов в кабинет.
|
||||
<p class="text-sm leading-6 text-[#466653]">
|
||||
Подключите мессенджер, чтобы получать уведомления по заказам.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -159,62 +153,11 @@ async function removeConnection(connectionId: string) {
|
||||
{{ feedback }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="activeConnections.length === 0"
|
||||
class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Подключите мессенджеры</h2>
|
||||
<p class="max-w-3xl text-sm leading-6 text-[#557562]">
|
||||
Вы можете подключить любой из мессенджеров ниже. После подключения уведомления о заказах и важных действиях будут приходить прямо туда.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<button
|
||||
v-for="option in messengerOptions"
|
||||
:key="option.channel"
|
||||
class="flex min-h-[120px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
|
||||
:class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
|
||||
:disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
|
||||
@click="connectMessenger(option.channel)"
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/18 text-sm font-black text-white">
|
||||
{{ option.channel === 'TELEGRAM' ? 'TG' : 'MX' }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-black tracking-[-0.03em]">{{ option.title }}</p>
|
||||
<p class="mt-1 text-sm text-white/82">{{ option.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-white/90">
|
||||
{{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Перейти в ${option.label}` }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<p
|
||||
v-for="option in messengerOptions.filter((item) => !connectUrl(item.channel))"
|
||||
:key="`${option.channel}-hint`"
|
||||
class="text-sm text-[#8b5a49]"
|
||||
>
|
||||
{{ option.unavailableText }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8">
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Подключенные аккаунты</h2>
|
||||
<p class="text-sm leading-6 text-[#557562]">
|
||||
Здесь показаны активные мессенджеры, привязанные к вашему кабинету.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<div
|
||||
v-if="activeConnections.length > 0"
|
||||
class="space-y-4"
|
||||
>
|
||||
<article
|
||||
v-for="{ option, connection } in activeConnections"
|
||||
:key="connection!.id"
|
||||
@@ -247,38 +190,35 @@ async function removeConnection(connectionId: string) {
|
||||
:disabled="deleteConnectionMutation.loading.value"
|
||||
@click="removeConnection(connection!.id)"
|
||||
>
|
||||
{{ deleteConnectionMutation.loading.value ? 'Удаляем...' : 'Удалить' }}
|
||||
{{ deleteConnectionMutation.loading.value ? 'Отключаем...' : 'Отключить' }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-else
|
||||
class="text-sm leading-6 text-[#557562]"
|
||||
>
|
||||
Пока ничего не подключено.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="availableOptions.length > 0"
|
||||
class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8"
|
||||
class="mt-6 grid gap-4 md:grid-cols-2"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Можно подключить еще</h2>
|
||||
<p class="text-sm leading-6 text-[#557562]">
|
||||
Добавьте второй канал, чтобы не потерять уведомления, если один мессенджер недоступен.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<button
|
||||
v-for="option in availableOptions"
|
||||
:key="option.channel"
|
||||
class="flex min-h-[112px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
|
||||
class="flex min-h-[104px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
|
||||
:class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
|
||||
:disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
|
||||
@click="connectMessenger(option.channel)"
|
||||
>
|
||||
<div>
|
||||
<p class="text-lg font-black tracking-[-0.03em]">{{ option.title }}</p>
|
||||
<p class="mt-2 text-sm text-white/82">{{ option.description }}</p>
|
||||
<div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/18 text-sm font-black text-white">
|
||||
{{ option.channel === 'TELEGRAM' ? 'TG' : 'MX' }}
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-white/90">
|
||||
<p class="text-sm font-semibold text-white">
|
||||
{{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Подключить ${option.label}` }}
|
||||
</p>
|
||||
</button>
|
||||
@@ -287,24 +227,12 @@ async function removeConnection(connectionId: string) {
|
||||
<div class="mt-4 space-y-2">
|
||||
<p
|
||||
v-for="option in availableOptions.filter((item) => !connectUrl(item.channel))"
|
||||
:key="`${option.channel}-connected-hint`"
|
||||
:key="`${option.channel}-hint`"
|
||||
class="text-sm text-[#8b5a49]"
|
||||
>
|
||||
{{ option.unavailableText }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="rounded-[32px] bg-[linear-gradient(135deg,#123824_0%,#1a5635_100%)] p-6 text-white md:p-8"
|
||||
>
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/65">Готово</p>
|
||||
<h2 class="mt-3 text-2xl font-black tracking-[-0.03em]">Оба канала подключены</h2>
|
||||
<p class="mt-2 max-w-3xl text-sm leading-6 text-white/78">
|
||||
Теперь важные уведомления будут доступны и в Telegram, и в MAX. Если захотите сменить аккаунт, удалите текущий и подключите новый.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user