portal/app/resources/js/views/HelpView.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '../stores/auth';
import { submitSupportRequest } from '../api/support';

const auth = useAuthStore();

// FAQ (Фаза 2, UX-аудит 25.06): самопомощь до обращения в поддержку. Простым языком.
// Тексты — статически в коде (YAGNI: CMS не нужна), правятся обычным деплоем.
const faqItems: { q: string; a: string }[] = [
    { q: 'Что такое «заявка» (лид)?', a: 'Заявка — это контакт человека, который интересуется услугой в вашей нише. Мы находим таких людей и передаём их вам. За каждую переданную заявку списывается фиксированная цена.' },
    { q: 'Сколько стоит одна заявка?', a: 'Цена зависит от объёма: чем больше заявок в месяц, тем дешевле каждая (7 ступеней). Текущую цену видно на странице «Биллинг» в блоке «Цены за лид».' },
    { q: 'Как начать получать заявки?', a: 'Три шага: 1) пополните баланс; 2) создайте проект — укажите, по какому сайту/телефону собирать клиентов и сколько заявок в день нужно; 3) готово, проект встаёт в сбор и заявки идут со следующего дня.' },
    { q: 'Как пополнить баланс?', a: '«Биллинг» → «Пополнить» → выберите сумму (минимум 100 ₽). Из баланса списывается оплата за заявки.' },
    { q: 'Почему с меня списали деньги?', a: 'За каждую переданную заявку списывается её цена. Все списания видно в «Биллинг» → «Списания»: дата, заявка, тариф, сумма. Скрытых комиссий нет.' },
    { q: 'Что значит «хватит на N дней»?', a: 'Это прогноз: на сколько дней хватит баланса при дневном заказе ваших проектов. Если активных проектов нет — прогноз не считается.' },
    { q: 'Почему приём заявок «на паузе»?', a: 'Чаще всего закончился баланс — приём приостанавливается, чтобы вы не ушли в минус. Пополните баланс — приём включится автоматически.' },
    { q: 'Что такое «лимит заявок в день»?', a: 'Сколько заявок в день вы готовы принимать и оплачивать по проекту. Лимит можно менять в любой момент.' },
    { q: 'Чем «Список» отличается от «Доски» (Канбан)?', a: 'Это одни и те же ваши заявки в разном виде: «Список» — таблицей, «Доска» — карточками по статусам. Выбирайте, как удобнее.' },
    { q: 'Можно ли оплатить картой онлайн?', a: 'Онлайн-оплата картой подключается в ближайшее время. Пока по вопросам оплаты пишите в поддержку.' },
];

const supportEmail =
    document.querySelector('meta[name="support-email"]')?.getAttribute('content') ?? 'support@liderra.ru';

const name = ref(
    [auth.user?.first_name, auth.user?.last_name].filter(Boolean).join(' ') || '',
);
const contact = ref(auth.user?.email ?? '');
const message = ref('');
const loading = ref(false);
const sent = ref(false);
const errorMsg = ref('');
const fieldErrors = ref<Record<string, string[]>>({});

async function submit() {
    errorMsg.value = '';
    fieldErrors.value = {};
    if (!name.value.trim() || !contact.value.trim() || !message.value.trim()) {
        errorMsg.value = 'Заполните все поля.';
        return;
    }
    loading.value = true;
    try {
        await submitSupportRequest({ name: name.value, contact: contact.value, message: message.value });
        sent.value = true;
        message.value = '';
    } catch (e: unknown) {
        const err = e as { response?: { status?: number; data?: { errors?: Record<string, string[]> } } };
        if (err.response?.status === 422 && err.response.data?.errors) {
            fieldErrors.value = err.response.data.errors;
        } else {
            errorMsg.value = 'Не удалось отправить. Попробуйте ещё раз или напишите на почту.';
        }
    } finally {
        loading.value = false;
    }
}
</script>

<template>
    <div class="help-view pa-6" data-testid="help-view">
        <h1 class="text-h5 mb-1">Помощь</h1>
        <p class="text-body-2 text-medium-emphasis mb-6">
            Напишите нам — ответим на ваш контакт. Можно по почте, через форму ниже или в чат справа.
        </p>

        <v-card variant="outlined" class="pa-5 mb-4" max-width="640" data-testid="faq-card" data-tour="help-faq">
            <h3 class="text-subtitle-2 mb-3">Частые вопросы</h3>
            <v-expansion-panels variant="accordion" data-testid="faq-panels">
                <v-expansion-panel v-for="(item, i) in faqItems" :key="i" data-tour="help-faq-item">
                    <v-expansion-panel-title>{{ item.q }}</v-expansion-panel-title>
                    <v-expansion-panel-text>{{ item.a }}</v-expansion-panel-text>
                </v-expansion-panel>
            </v-expansion-panels>
        </v-card>

        <v-card variant="outlined" class="pa-5 mb-4" max-width="640" data-tour="help-email">
            <h3 class="text-subtitle-2 mb-2">Почта техподдержки</h3>
            <a :href="`mailto:${supportEmail}`" class="text-primary" data-testid="support-email">{{ supportEmail }}</a>
        </v-card>

        <v-card variant="outlined" class="pa-5" max-width="640" data-tour="help-form">
            <h3 class="text-subtitle-2 mb-3">Оставить заявку</h3>

            <v-alert v-if="sent" type="success" variant="tonal" class="mb-4" data-testid="support-sent">
                Заявка отправлена. Мы свяжемся с вами по указанному контакту.
            </v-alert>
            <v-alert v-if="errorMsg" type="error" variant="tonal" class="mb-4">{{ errorMsg }}</v-alert>

            <v-text-field
                v-model="name"
                label="Имя"
                :error-messages="fieldErrors.name"
                density="comfortable"
                class="mb-2"
                data-testid="support-name"
            />
            <v-text-field
                v-model="contact"
                label="Контакт (телефон или email)"
                :error-messages="fieldErrors.contact"
                density="comfortable"
                class="mb-2"
                data-testid="support-contact"
            />
            <v-textarea
                v-model="message"
                label="Сообщение"
                :error-messages="fieldErrors.message"
                rows="4"
                density="comfortable"
                class="mb-3"
                data-testid="support-message"
            />

            <v-btn color="primary" :loading="loading" data-testid="support-submit" @click="submit">Отправить</v-btn>
        </v-card>
    </div>
</template>