portal/app/resources/js/components/billing/TopupDialog.vue

<script setup lang="ts">
/**
 * TopupDialog — диалог пополнения рублёвого баланса.
 *
 * Два способа:
 * • «Карта» — POST /api/billing/topup (заглушка мгновенного зачисления ИЛИ
 *   редирект на ЮKassa, если флаг billing_yookassa_enabled ВКЛ).
 * • «По счёту» (для юрлиц) — POST /api/billing/invoices: формирует PDF-счёт по
 *   реквизитам тенанта, баланс пополнится после ручной отметки оплаты админом.
 */
import { ref, computed, watch } from 'vue';
import { topup, createInvoice } from '../../api/billing';
import { extractErrorMessage, extractValidationErrors } from '../../api/client';
import { redirectTo } from '../../utils/redirect';
import { useLayoutTier } from '../../composables/useLayoutTier';

// Телефон: диалог на весь экран (плитки сумм/способы оплаты — шире узкого модала).
const { isPhone } = useLayoutTier();

const model = defineModel<boolean>({ required: true });
const emit = defineEmits<{ success: [balanceRub: string]; invoiced: [invoiceNumber: string] }>();

const PRESETS = [1000, 5000, 10000, 25000];

const method = ref<'card' | 'invoice'>('card');
const amount = ref<number | null>(null);
const submitting = ref(false);
const errorMsg = ref<string | null>(null);

const amountError = computed<string | null>(() => {
    if (amount.value === null || !Number.isFinite(amount.value)) return null;
    if (amount.value < 100) return 'Минимум 100 ₽';
    if (amount.value > 1000000) return 'Максимум 1 000 000 ₽';
    return null;
});

const canSubmit = computed(() => Number.isFinite(amount.value) && amountError.value === null && !submitting.value);

const submitLabel = computed(() => (method.value === 'invoice' ? 'Сформировать счёт' : 'Пополнить'));

// Сброс состояния при каждом открытии диалога — нет префилла прошлой суммы/ошибки.
watch(model, (open) => {
    if (open) {
        amount.value = null;
        errorMsg.value = null;
        method.value = 'card';
    }
});

function setPreset(value: number): void {
    amount.value = value;
}

function openPdf(url: string): void {
    if (typeof window !== 'undefined' && typeof window.open === 'function') {
        window.open(url, '_blank');
    }
}

async function submit(): Promise<void> {
    if (!canSubmit.value || amount.value === null) return;
    submitting.value = true;
    errorMsg.value = null;
    try {
        if (method.value === 'invoice') {
            const invoice = await createInvoice(amount.value);
            openPdf(invoice.pdf_url);
            emit('invoiced', invoice.invoice_number);
            model.value = false;
            amount.value = null;
            return;
        }

        const res = await topup(amount.value);
        // Реальный шлюз (флаг ВКЛ): редирект на страницу оплаты ЮKassa.
        if (res.confirmation_url) {
            redirectTo(res.confirmation_url);
            return;
        }
        // Заглушка (флаг ВЫКЛ): баланс зачислен сразу.
        emit('success', res.balance_rub ?? '');
        model.value = false;
        amount.value = null;
    } catch (e) {
        const validation = extractValidationErrors(e);
        errorMsg.value = validation?.amount_rub?.[0] ?? extractErrorMessage(e);
    } finally {
        submitting.value = false;
    }
}

function close(): void {
    if (submitting.value) return;
    model.value = false;
    errorMsg.value = null;
}

defineExpose({ method, amount, submit, canSubmit, errorMsg });
</script>

<template>
    <v-dialog v-model="model" max-width="460" :fullscreen="isPhone" scrollable>
        <v-card data-tour="topup-dialog">
            <v-card-title class="text-h6">Пополнить баланс</v-card-title>
            <v-card-text>
                <v-btn-toggle
                    v-model="method"
                    mandatory
                    density="comfortable"
                    color="primary"
                    class="mb-4"
                    data-testid="topup-method"
                    data-tour="topup-method"
                >
                    <v-btn value="card">Картой</v-btn>
                    <v-btn value="invoice">По счёту (для юрлиц)</v-btn>
                </v-btn-toggle>

                <v-text-field
                    v-model.number="amount"
                    type="number"
                    label="Сумма пополнения"
                    suffix="₽"
                    density="comfortable"
                    :error-messages="amountError ?? undefined"
                    autofocus
                    data-tour="topup-amount"
                />

                <div class="presets mb-2" data-tour="topup-presets">
                    <v-chip v-for="p in PRESETS" :key="p" size="small" variant="outlined" @click="setPreset(p)">
                        {{ new Intl.NumberFormat('ru-RU').format(p) }} ₽
                    </v-chip>
                </div>

                <v-alert
                    v-if="method === 'invoice'"
                    type="info"
                    variant="tonal"
                    density="compact"
                    class="mt-2"
                    data-tour="topup-invoice-note"
                >
                    Счёт сформируется по реквизитам вашей компании. Оплатите его банковским переводом —
                    баланс пополнится после поступления денег. Закрывающий документ (Акт) сформируется
                    автоматически после оплаты.
                </v-alert>

                <v-alert v-if="errorMsg" type="error" variant="tonal" density="compact" class="mt-3" role="alert">
                    {{ errorMsg }}
                </v-alert>
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn variant="text" :disabled="submitting" @click="close">Отмена</v-btn>
                <v-btn
                    color="primary"
                    variant="flat"
                    :loading="submitting"
                    :disabled="!canSubmit"
                    data-tour="topup-submit"
                    @click="submit"
                >
                    {{ submitLabel }}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped>
.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
</style>