Files
portal/app/resources/js/components/billing/BalanceFrozenBanner.vue
T
Дмитрий f94552d452 WIP чекпойнт: lead-region/supplier бэкенд + фронт-редизайн + Pint + тесты
92 файла одной пачкой. Исключены чужие зоны: CLAUDE.md, .claude/settings.json, docs/observer/.pii-counters.json.
gitleaks staged: no leaks found. Не верифицировано тестами - сохранение труда в историю.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-17 05:17:12 +03:00

52 lines
1.9 KiB
Vue

<script setup lang="ts">
/**
* Красный баннер заморозки баланса (Billing v2 Spec C §3.6, Task 1.10).
*
* Показывается на всех страницах, когда tenant.frozen_by_balance_at !== null
* (проп `frozen`). Источник данных — tenantStore, загружаемый глобально в
* AppLayout. Чистый presentational-компонент.
*/
import { computed } from 'vue';
const props = defineProps<{
frozen: boolean;
/** Сколько ₽ не хватает на дневной заказ (строка scale 2). */
deficitRub?: string;
/** Сколько лидов превышают ёмкость баланса. */
deficitLeads?: number;
}>();
const hasDeficit = computed(() => (props.deficitLeads ?? 0) > 0);
</script>
<template>
<v-alert
v-if="frozen"
type="error"
variant="tonal"
density="comfortable"
rounded="lg"
class="balance-frozen-banner ma-4 mb-0"
data-testid="balance-frozen-banner"
>
<div class="text-subtitle-2 font-weight-bold">Приём лидов приостановлен</div>
<div class="text-body-2 mb-2">
Не хватает баланса на дневной заказ.<span v-if="hasDeficit">
Нужно ещё {{ deficitRub }} (или сократи лимиты на {{ deficitLeads }} лидов).</span
>
</div>
<RouterLink to="/billing" data-testid="banner-topup-link" class="banner-link"> Пополнить счёт </RouterLink>
<RouterLink to="/projects" data-testid="banner-projects-link" class="banner-link ml-4">
Перейти к проектам
</RouterLink>
</v-alert>
</template>
<style scoped>
.banner-link {
font-weight: 600;
color: rgb(var(--v-theme-error));
text-decoration: underline;
}
</style>