fix(pleno-vue): keep Fakturer nu visible on red-flagged customers (#279)
## Why PR #271 made the `Fakturer nu` button visible again on multi-flag customers in the Kunder til gennemgang panel, but the button's v-if still gates on `customer.requires_action`. On customers with manual (red) flags where `requires_action` is false — e.g. flagged but the period's unbooked transactions are zero — the button stayed hidden in the right rail even though there is clearly something that needs the superuser's attention. ## What changed `src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue`: - New helper `hasRedFlags(customer)` next to `hasMultipleRedFlags`. - Fakturer nu button v-if → `tmpFilters.displayRequiresAction && (customer.requires_action || hasRedFlags(customer))`. - The `Gennemgå flag` tag remains gated on `hasMultipleRedFlags` (>= 2) so the multi-flag warning is still loud. `tests/unit/invoicing-period-queue-state.behavior.spec.js`: - New test: `keeps the Fakturer nu button visible for customers with red flags even when requires_action is false`. - Sanity-checked: with the fix reverted, the test fails on the visibility assertion; with the fix in place, it passes alongside the existing 23 cases. ## Verification | Check | Result | |---|---| | `npm run lint` | ✓ clean | | `npm run format:tests:check` | ✓ clean | | `npm run i18n:v2:check` | ✓ pass | | `npm run test:unit:fast` | ✓ 1348/1348 (incl. new regression test) | | `npm run build` | ✓ pass | ## Risk - Surface-only v-if change. No API, data shape, or permission changes. - Customers with red flags that previously showed neither the button nor the `Gennemgå flag` tag now get the Fakturer nu button back. The button is still scoped by the existing `v-if/v-else-if` chain (`all booked`, queue blocked, draft blocked, action), so it does not appear where it shouldn't. 🤖 Generated with [OpenClaw](https://openclaw.ai) Co-authored-by: Cleanup Agent <agent@truckwash.io>
This commit is contained in:
+6
-1
@@ -300,6 +300,11 @@ const getCustomerFlagTabType = (customer: any): CustomerFlagTab => {
|
||||
return "none";
|
||||
};
|
||||
|
||||
const hasRedFlags = (customer: any): boolean => {
|
||||
const flagCounts = getCustomerActiveFlagCounts(customer);
|
||||
return Number(flagCounts?.manual ?? 0) > 0;
|
||||
};
|
||||
|
||||
const hasMultipleRedFlags = (customer: any): boolean => {
|
||||
const flagCounts = getCustomerActiveFlagCounts(customer);
|
||||
return Number(flagCounts?.manual ?? 0) >= 2;
|
||||
@@ -1526,7 +1531,7 @@ const getTransactionQueryParameters = () => {
|
||||
</div>
|
||||
<div class="column is-narrow period-customer-card__state" v-else>
|
||||
<button
|
||||
v-if="tmpFilters.displayRequiresAction && customer.requires_action"
|
||||
v-if="tmpFilters.displayRequiresAction && (customer.requires_action || hasRedFlags(customer))"
|
||||
type="button"
|
||||
class="button is-small is-dark is-inverted"
|
||||
:class="{ 'is-loading': isCustomerPeriodActionLoading(customer) }"
|
||||
|
||||
@@ -729,6 +729,55 @@ describe("Invoicing period queue state", () => {
|
||||
expect(customer.get("[data-testid='invoice-period-flags-stub']").text()).toBe("2");
|
||||
});
|
||||
|
||||
it("keeps the Fakturer nu button visible for customers with red flags even when requires_action is false", async () => {
|
||||
sharedVariablesRef.value = {
|
||||
types: {
|
||||
all: [
|
||||
{
|
||||
id: 11,
|
||||
customer_number: 1011,
|
||||
customer_name: "Red Flag Only Customer",
|
||||
requires_action: false,
|
||||
status_indicator: "flag_red",
|
||||
flag_counts: {
|
||||
manual: 1,
|
||||
automatic: 0,
|
||||
total: 1,
|
||||
},
|
||||
flags: [
|
||||
{
|
||||
id: 1011,
|
||||
source: "manual",
|
||||
status: "active",
|
||||
target_type: "customer",
|
||||
target_id: 1011,
|
||||
customer_number: 1011,
|
||||
reason: "Manual flag — review required",
|
||||
},
|
||||
],
|
||||
transactions: [
|
||||
{
|
||||
id: 8101,
|
||||
amount: 60,
|
||||
booked: false,
|
||||
excluded: false,
|
||||
invoice_collection_id: 6101,
|
||||
date: "2026-04-15T10:00:00.000Z",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = mountView();
|
||||
await nextTick();
|
||||
|
||||
const customer = wrapper.get("[data-testid='invoicing-period-customer-1011']");
|
||||
expect(customer.get("[data-testid='invoicing-period-customer-invoice-1011']").text()).toContain("Invoice now");
|
||||
expect(customer.find("[data-testid='invoicing-period-customer-multiple-red-flag-1011']").exists()).toBe(false);
|
||||
});
|
||||
|
||||
it("keeps collected invoice flags visible even when linked transactions are excluded", async () => {
|
||||
sharedVariablesRef.value = {
|
||||
types: {
|
||||
|
||||
Reference in New Issue
Block a user