@zeniai/client-epic-state 5.1.69 → 5.1.70

package/lib/view/invoicing/couponView/couponViewReducer.d.ts

@@ -27,7 +27,7 @@ export declare const fetchInvoicingCouponList: import("@reduxjs/toolkit").Action
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingCouponView/updateInvoicingCouponList">, updateInvoicingCouponListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponListFailure">, fetchInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCouponView/fetchInvoicingCouponCounts">, updateInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCouponView/updateInvoicingCouponCounts">, updateInvoicingCouponCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponCountsFailure">, updateInvoicingCouponFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCouponFilters, "invoicingCouponView/updateInvoicingCouponFilters">, addInvoicingCouponToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "invoicingCouponView/updateInvoicingCouponList">, updateInvoicingCouponListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponListFailure">, fetchInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCouponView/fetchInvoicingCouponCounts">, updateInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCouponView/updateInvoicingCouponCounts">, updateInvoicingCouponCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponCountsFailure">, updateInvoicingCouponFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCouponFilters, "invoicingCouponView/updateInvoicingCouponFilters">, setInvoicingCouponActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "inactive" | "all", "invoicingCouponView/setInvoicingCouponActiveTab">, addInvoicingCouponToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     id: ID;
     status?: InvoicingCouponStatus;
 }, "invoicingCouponView/addInvoicingCouponToList">, clearInvoicingCouponView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCouponView/clearInvoicingCouponView">;

package/lib/view/invoicing/couponView/couponViewReducer.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearInvoicingCouponView = exports.addInvoicingCouponToList = exports.updateInvoicingCouponFilters = exports.updateInvoicingCouponCountsFailure = exports.updateInvoicingCouponCounts = exports.fetchInvoicingCouponCounts = exports.updateInvoicingCouponListFailure = exports.updateInvoicingCouponList = exports.fetchInvoicingCouponListPage = exports.fetchInvoicingCouponList = exports.initialState = void 0;
+exports.clearInvoicingCouponView = exports.addInvoicingCouponToList = exports.setInvoicingCouponActiveTab = exports.updateInvoicingCouponFilters = exports.updateInvoicingCouponCountsFailure = exports.updateInvoicingCouponCounts = exports.fetchInvoicingCouponCounts = exports.updateInvoicingCouponListFailure = exports.updateInvoicingCouponList = exports.fetchInvoicingCouponListPage = exports.fetchInvoicingCouponList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 // The discounts-list tabs look up counts by tab id ('active' / 'inactive'),
 // while a coupon's status is 'active' | 'expired' | 'archived'. Collapse the
@@ -13,6 +13,7 @@ function couponStatusToTabCountKey(status) {
 exports.initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -91,6 +92,11 @@ const couponView = (0, toolkit_1.createSlice)({
         updateInvoicingCouponFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingCouponActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created coupon in the cached discounts list + tab counts
         // so the list page shows it without refetching from the server. Edits keep
         // the same id/counts, so only creates dispatch this.
@@ -109,5 +115,5 @@ const couponView = (0, toolkit_1.createSlice)({
         },
     },
 });
-_a = couponView.actions, exports.fetchInvoicingCouponList = _a.fetchInvoicingCouponList, exports.fetchInvoicingCouponListPage = _a.fetchInvoicingCouponListPage, exports.updateInvoicingCouponList = _a.updateInvoicingCouponList, exports.updateInvoicingCouponListFailure = _a.updateInvoicingCouponListFailure, exports.fetchInvoicingCouponCounts = _a.fetchInvoicingCouponCounts, exports.updateInvoicingCouponCounts = _a.updateInvoicingCouponCounts, exports.updateInvoicingCouponCountsFailure = _a.updateInvoicingCouponCountsFailure, exports.updateInvoicingCouponFilters = _a.updateInvoicingCouponFilters, exports.addInvoicingCouponToList = _a.addInvoicingCouponToList, exports.clearInvoicingCouponView = _a.clearInvoicingCouponView;
+_a = couponView.actions, exports.fetchInvoicingCouponList = _a.fetchInvoicingCouponList, exports.fetchInvoicingCouponListPage = _a.fetchInvoicingCouponListPage, exports.updateInvoicingCouponList = _a.updateInvoicingCouponList, exports.updateInvoicingCouponListFailure = _a.updateInvoicingCouponListFailure, exports.fetchInvoicingCouponCounts = _a.fetchInvoicingCouponCounts, exports.updateInvoicingCouponCounts = _a.updateInvoicingCouponCounts, exports.updateInvoicingCouponCountsFailure = _a.updateInvoicingCouponCountsFailure, exports.updateInvoicingCouponFilters = _a.updateInvoicingCouponFilters, exports.setInvoicingCouponActiveTab = _a.setInvoicingCouponActiveTab, exports.addInvoicingCouponToList = _a.addInvoicingCouponToList, exports.clearInvoicingCouponView = _a.clearInvoicingCouponView;
 exports.default = couponView.reducer;

package/lib/view/invoicing/couponView/couponViewSelector.d.ts

@@ -12,6 +12,7 @@ export declare const getInvoicingCouponListHasMore: (state: RootState) => boolea
 export declare const getInvoicingCouponListFilters: (state: RootState) => InvoicingCouponFilters;
 export declare const getInvoicingCouponCounts: (state: RootState) => InvoicingListCounts;
 export interface InvoicingCouponListView extends SelectorView {
+    activeTab: InvoicingCouponTabId;
     columns: InvoicingCouponColumnConfig[];
     count: InvoicingListCounts;
     countsFetchState: FetchStateAndError;

package/lib/view/invoicing/couponView/couponViewSelector.js

@@ -26,18 +26,31 @@ exports.getInvoicingCouponCounts = getInvoicingCouponCounts;
  * array (and the wrapping view object) keep referential identity until the
  * coupon entity slice or the list-view slice actually change.
  */
-exports.getInvoicingCouponListView = (0, toolkit_1.createSelector)((state) => state.invoicingCouponState, (state) => state.invoicingCouponViewState, (couponState, listViewState) => ({
-    columns: couponViewState_1.INVOICING_COUPON_COLUMNS,
-    coupons: listViewState.ids
+exports.getInvoicingCouponListView = (0, toolkit_1.createSelector)((state) => state.invoicingCouponState, (state) => state.invoicingCouponViewState, (couponState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allCoupons = listViewState.ids
         .map((id) => couponState.couponByID[id])
-        .filter((item) => item != null),
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    tabIds: couponViewState_1.INVOICING_COUPON_TABS,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+        .filter((item) => item != null);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side. 'all' shows everything, 'active' shows only active
+    // coupons, and 'inactive' shows every non-active status (undefined included).
+    const coupons = activeTab === 'all'
+        ? allCoupons
+        : allCoupons.filter((coupon) => activeTab === 'active'
+            ? coupon.status === 'active'
+            : coupon.status !== 'active');
+    return {
+        activeTab,
+        columns: couponViewState_1.INVOICING_COUPON_COLUMNS,
+        coupons,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        nextCursor: listViewState.nextCursor,
+        tabIds: couponViewState_1.INVOICING_COUPON_TABS,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/view/invoicing/couponView/couponViewState.d.ts

@@ -3,7 +3,6 @@ import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPa
 import { InvoicingListSort } from '../invoicingApiHelper';
 export interface InvoicingCouponFilters {
     search?: string;
-    status?: string;
 }
 export declare const ALL_INVOICING_COUPON_SORT_KEYS: readonly ["coupon_id", "name", "discount", "duration", "created", "valid_till", "apply_on", "status", "redemptions"];
 export declare const toInvoicingCouponSortKey: (v: string) => "status" | "name" | "redemptions" | "created" | "coupon_id" | "discount" | "duration" | "valid_till" | "apply_on";
@@ -31,6 +30,8 @@ export type InvoicingCouponTabId = ReturnType<typeof toInvoicingCouponTabId>;
  */
 export declare const INVOICING_COUPON_TABS: InvoicingCouponTabId[];
 export interface InvoicingCouponViewState extends FetchedState {
+    /** Selected status tab (CES-owned so it persists across page revisits). */
+    activeTab: InvoicingCouponTabId;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingCouponFilters;

package/lib/view/invoicing/invoiceList/fetchInvoiceListEpic.d.ts

@@ -6,4 +6,4 @@ import { RootState } from '../../../reducer';
 import { ZeniAPI } from '../../../zeniAPI';
 import { fetchInvoiceList, updateInvoiceList, updateInvoiceListFailure, updateInvoiceListFilters } from './invoiceListReducer';
 export type ActionType = ReturnType<typeof fetchInvoiceList> | ReturnType<typeof updateInvoiceList> | ReturnType<typeof updateInvoiceListFailure> | ReturnType<typeof updateInvoiceListFilters> | ReturnType<typeof updateAddresses> | ReturnType<typeof updateInvoices>;
-export declare const fetchInvoiceListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoiceListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/invoicing/invoiceList/fetchInvoiceListEpic.js

@@ -9,10 +9,10 @@ const invoiceReducer_1 = require("../../../entity/invoicing/invoice/invoiceReduc
 const responsePayload_1 = require("../../../responsePayload");
 const invoicingApiHelper_1 = require("../invoicingApiHelper");
 const invoiceListReducer_1 = require("./invoiceListReducer");
-const buildInvoiceListQuery = (filters, cursor, sort) => {
+const buildInvoiceListQuery = (filters, status, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
+    if (status != null && status.length > 0) {
+        params.set('status', status);
     }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
@@ -36,9 +36,11 @@ const buildInvoiceListQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoiceListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoiceListReducer_1.fetchInvoiceList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoiceListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoiceListReducer_1.fetchInvoiceList.match), (0, operators_1.switchMap)((action) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/invoices`, buildInvoiceListQuery(filters, cursor, sort));
+    const { activeTab } = state$.value.invoicingInvoiceListState;
+    const status = activeTab !== 'all' ? activeTab : undefined;
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/invoices`, buildInvoiceListQuery(filters, status, cursor, sort));
     return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];

package/lib/view/invoicing/invoiceList/fetchInvoiceListPageEpic.js

@@ -19,8 +19,9 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 const fetchInvoiceListPageEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(invoiceListReducer_1.fetchInvoiceListPage.match), (0, operators_1.mergeMap)((action) => {
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingInvoiceListState;
+    const activeTabState = state.invoiceByTab[state.activeTab];
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
+    if (shouldFetch({ fetchState: activeTabState.fetchState, error: activeTabState.error }, cacheOverride)) {
         pageActions.push((0, invoiceListReducer_1.fetchInvoiceList)({ filters, sort }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {

package/lib/view/invoicing/invoiceList/invoiceListReducer.d.ts

@@ -6,9 +6,10 @@ import { ZeniAPIStatus } from '../../../responsePayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
 import { InvoiceListFilters, InvoiceListState } from './invoiceListState';
 /**
- * Whether two invoice-list queries (filters + sort) would return the same list.
- * Used to invalidate the cached list when a page mounts with a different query
- * — e.g. the customer detail page after the main Invoices page, or vice versa.
+ * Whether two invoice-list queries share the same base (tab-independent) query.
+ * The status tab is server-side per-tab, so it is excluded here — when the base
+ * query changes (search / customer / subscription / dates / sort) every per-tab
+ * cache is stale and the reducer resets them all.
  */
 export declare const sameInvoiceListQuery: (a: {
     filters: InvoiceListFilters;
@@ -40,7 +41,7 @@ export declare const fetchInvoiceList: import("@reduxjs/toolkit").ActionCreatorW
     invoices: InvoicingInvoicePayload[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingInvoiceList/updateInvoiceList">, updateInvoiceListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceListFailure">, fetchInvoiceCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingInvoiceList/fetchInvoiceCounts">, updateInvoiceCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingInvoiceList/updateInvoiceCounts">, updateInvoiceCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceCountsFailure">, fetchInvoiceKPIs: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingInvoiceList/fetchInvoiceKPIs">, updateInvoiceKPIs: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingInvoiceKPIs, "invoicingInvoiceList/updateInvoiceKPIs">, updateInvoiceKPIsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceKPIsFailure">, updateInvoiceListFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoiceListFilters, "invoicingInvoiceList/updateInvoiceListFilters">, addInvoiceToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "invoicingInvoiceList/updateInvoiceList">, updateInvoiceListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceListFailure">, fetchInvoiceCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingInvoiceList/fetchInvoiceCounts">, updateInvoiceCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingInvoiceList/updateInvoiceCounts">, updateInvoiceCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceCountsFailure">, fetchInvoiceKPIs: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingInvoiceList/fetchInvoiceKPIs">, updateInvoiceKPIs: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingInvoiceKPIs, "invoicingInvoiceList/updateInvoiceKPIs">, updateInvoiceKPIsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingInvoiceList/updateInvoiceKPIsFailure">, updateInvoiceListFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoiceListFilters, "invoicingInvoiceList/updateInvoiceListFilters">, setInvoiceActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"paid" | "voided" | "partially_paid" | "payment_due" | "not_paid" | "all", "invoicingInvoiceList/setInvoiceActiveTab">, addInvoiceToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     id: ID;
     status: InvoicingInvoiceStatus;
 }, "invoicingInvoiceList/addInvoiceToList">, clearInvoiceList: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingInvoiceList/clearInvoiceList">;

package/lib/view/invoicing/invoiceList/invoiceListReducer.js

@@ -1,35 +1,39 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearInvoiceList = exports.addInvoiceToList = exports.updateInvoiceListFilters = exports.updateInvoiceKPIsFailure = exports.updateInvoiceKPIs = exports.fetchInvoiceKPIs = exports.updateInvoiceCountsFailure = exports.updateInvoiceCounts = exports.fetchInvoiceCounts = exports.updateInvoiceListFailure = exports.updateInvoiceList = exports.fetchInvoiceListPage = exports.fetchInvoiceList = exports.initialState = exports.sameInvoiceListQuery = void 0;
+exports.clearInvoiceList = exports.addInvoiceToList = exports.setInvoiceActiveTab = exports.updateInvoiceListFilters = exports.updateInvoiceKPIsFailure = exports.updateInvoiceKPIs = exports.fetchInvoiceKPIs = exports.updateInvoiceCountsFailure = exports.updateInvoiceCounts = exports.fetchInvoiceCounts = exports.updateInvoiceListFailure = exports.updateInvoiceList = exports.fetchInvoiceListPage = exports.fetchInvoiceList = exports.initialState = exports.sameInvoiceListQuery = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
+const invoiceListState_1 = require("./invoiceListState");
 /**
- * Whether two invoice-list queries (filters + sort) would return the same list.
- * Used to invalidate the cached list when a page mounts with a different query
- * — e.g. the customer detail page after the main Invoices page, or vice versa.
+ * Whether two invoice-list queries share the same base (tab-independent) query.
+ * The status tab is server-side per-tab, so it is excluded here — when the base
+ * query changes (search / customer / subscription / dates / sort) every per-tab
+ * cache is stale and the reducer resets them all.
  */
 const sameInvoiceListQuery = (a, b) => a.filters.customerId === b.filters.customerId &&
     a.filters.subscriptionId === b.filters.subscriptionId &&
-    a.filters.status === b.filters.status &&
     a.filters.search === b.filters.search &&
     a.filters.dateFrom === b.filters.dateFrom &&
     a.filters.dateTo === b.filters.dateTo &&
     a.sort?.field === b.sort?.field &&
     a.sort?.dir === b.sort?.dir;
 exports.sameInvoiceListQuery = sameInvoiceListQuery;
+/**
+ * Narrow an invoice status to a status tab id when one exists. Statuses like
+ * `draft` / `posted` / `pending` have no dedicated tab, so a newly created
+ * invoice in one of those states only lands in the `all` tab.
+ */
+const statusToTabId = (status) => invoiceListState_1.ALL_INVOICING_INVOICE_TAB_IDS.includes(status)
+    ? status
+    : undefined;
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
-    invoiceIds: [],
-    nextCursor: null,
+    activeTab: 'all',
+    invoiceByTab: (0, invoiceListState_1.makeInvoiceByTab)(),
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
     kpis: undefined,
     kpisFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoiceList = (0, toolkit_1.createSlice)({
     name: 'invoicingInvoiceList',
@@ -37,14 +41,15 @@ const invoiceList = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoiceList: {
             reducer(draft, action) {
+                const tab = draft.invoiceByTab[draft.activeTab];
                 if (!action.payload.keepExistingListItems) {
-                    draft.invoiceIds = [];
-                    draft.nextCursor = null;
+                    tab.invoiceIds = [];
+                    tab.nextCursor = null;
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
+                tab.fetchState = 'In-Progress';
+                tab.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -59,13 +64,11 @@ const invoiceList = (0, toolkit_1.createSlice)({
         },
         fetchInvoiceListPage: {
             reducer(draft, action) {
-                // A different query invalidates the cached list — reset so the page
-                // epic's shouldFetch refetches instead of showing another view's rows
-                // (e.g. a customer-filtered list left behind by the detail page).
+                // A different base query invalidates every tab's cache — reset so the
+                // page epic's shouldFetch refetches the active tab instead of showing
+                // rows fetched under a stale search/customer/subscription/dates/sort.
                 if (!(0, exports.sameInvoiceListQuery)(draft, action.payload)) {
-                    draft.invoiceIds = [];
-                    draft.nextCursor = null;
-                    draft.fetchState = 'Not-Started';
+                    draft.invoiceByTab = (0, invoiceListState_1.makeInvoiceByTab)();
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
@@ -81,17 +84,19 @@ const invoiceList = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoiceList(draft, action) {
+            const tab = draft.invoiceByTab[draft.activeTab];
             const newIds = action.payload.invoices.map((invoice) => invoice.id);
-            draft.invoiceIds = action.payload.keepExistingListItems
-                ? [...new Set([...draft.invoiceIds, ...newIds])]
+            tab.invoiceIds = action.payload.keepExistingListItems
+                ? [...new Set([...tab.invoiceIds, ...newIds])]
                 : newIds;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            tab.nextCursor = action.payload.nextCursor;
+            tab.fetchState = 'Completed';
+            tab.error = undefined;
         },
         updateInvoiceListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            const tab = draft.invoiceByTab[draft.activeTab];
+            tab.fetchState = 'Error';
+            tab.error = action.payload;
         },
         fetchInvoiceCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -122,24 +127,45 @@ const invoiceList = (0, toolkit_1.createSlice)({
         updateInvoiceListFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The view dispatches the follow-up fetchInvoiceListPage
+        // so the page epic fetches the tab when its cache is empty and reuses it when
+        // already loaded.
+        setInvoiceActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created invoice in the cached list + tab counts so the
-        // invoices page shows it without refetching from the server. Bumps the
-        // `all` total and the per-status count key the tabs read (a create is
-        // typically `draft`). KPIs are money aggregates (Amount, not a plain
-        // increment), so they are left untouched and refetched lazily.
+        // invoices page shows it without refetching. Prepends the id to the `all`
+        // tab and its status tab (dedup via includes), and bumps the `all` total and
+        // the per-status count key the tabs read. KPIs are money aggregates, so they
+        // are left untouched and refetched lazily.
         addInvoiceToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.invoiceIds.includes(id)) {
+            const allTab = draft.invoiceByTab['all'];
+            if (allTab.invoiceIds.includes(id)) {
                 return;
             }
-            draft.invoiceIds = [id, ...draft.invoiceIds];
+            allTab.invoiceIds = [id, ...allTab.invoiceIds];
+            const statusTab = statusToTabId(status);
+            if (statusTab != null) {
+                const tab = draft.invoiceByTab[statusTab];
+                if (!tab.invoiceIds.includes(id)) {
+                    tab.invoiceIds = [id, ...tab.invoiceIds];
+                }
+            }
             draft.counts.all += 1;
             draft.counts[status] = (draft.counts[status] ?? 0) + 1;
         },
         clearInvoiceList(draft) {
-            Object.assign(draft, exports.initialState);
+            draft.activeTab = 'all';
+            draft.invoiceByTab = (0, invoiceListState_1.makeInvoiceByTab)();
+            draft.filters = {};
+            draft.sort = undefined;
+            draft.counts = { all: 0 };
+            draft.countsFetchState = { fetchState: 'Not-Started', error: undefined };
+            draft.kpis = undefined;
+            draft.kpisFetchState = { fetchState: 'Not-Started', error: undefined };
         },
     },
 });
-_a = invoiceList.actions, exports.fetchInvoiceList = _a.fetchInvoiceList, exports.fetchInvoiceListPage = _a.fetchInvoiceListPage, exports.updateInvoiceList = _a.updateInvoiceList, exports.updateInvoiceListFailure = _a.updateInvoiceListFailure, exports.fetchInvoiceCounts = _a.fetchInvoiceCounts, exports.updateInvoiceCounts = _a.updateInvoiceCounts, exports.updateInvoiceCountsFailure = _a.updateInvoiceCountsFailure, exports.fetchInvoiceKPIs = _a.fetchInvoiceKPIs, exports.updateInvoiceKPIs = _a.updateInvoiceKPIs, exports.updateInvoiceKPIsFailure = _a.updateInvoiceKPIsFailure, exports.updateInvoiceListFilters = _a.updateInvoiceListFilters, exports.addInvoiceToList = _a.addInvoiceToList, exports.clearInvoiceList = _a.clearInvoiceList;
+_a = invoiceList.actions, exports.fetchInvoiceList = _a.fetchInvoiceList, exports.fetchInvoiceListPage = _a.fetchInvoiceListPage, exports.updateInvoiceList = _a.updateInvoiceList, exports.updateInvoiceListFailure = _a.updateInvoiceListFailure, exports.fetchInvoiceCounts = _a.fetchInvoiceCounts, exports.updateInvoiceCounts = _a.updateInvoiceCounts, exports.updateInvoiceCountsFailure = _a.updateInvoiceCountsFailure, exports.fetchInvoiceKPIs = _a.fetchInvoiceKPIs, exports.updateInvoiceKPIs = _a.updateInvoiceKPIs, exports.updateInvoiceKPIsFailure = _a.updateInvoiceKPIsFailure, exports.updateInvoiceListFilters = _a.updateInvoiceListFilters, exports.setInvoiceActiveTab = _a.setInvoiceActiveTab, exports.addInvoiceToList = _a.addInvoiceToList, exports.clearInvoiceList = _a.clearInvoiceList;
 exports.default = invoiceList.reducer;

package/lib/view/invoicing/invoiceList/invoiceListSelector.d.ts

@@ -5,6 +5,7 @@ import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPa
 import { RootState } from '../../../reducer';
 import { InvoiceListFilters, InvoicingInvoiceTabId } from './invoiceListState';
 export interface InvoiceListView extends SelectorView {
+    activeTab: InvoicingInvoiceTabId;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoiceListFilters;

package/lib/view/invoicing/invoiceList/invoiceListSelector.js

@@ -9,18 +9,22 @@ const invoiceListState_1 = require("./invoiceListState");
  * array (and the wrapping view object) keep referential identity until the
  * invoice entity slice or the list-view slice actually change.
  */
-exports.getInvoiceListView = (0, toolkit_1.createSelector)((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (invoiceState, listViewState) => ({
-    invoices: listViewState.invoiceIds
-        .map((id) => invoiceState.invoiceByID[id])
-        .filter((item) => item != null),
-    counts: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    kpis: listViewState.kpis,
-    kpisFetchState: listViewState.kpisFetchState,
-    nextCursor: listViewState.nextCursor,
-    tabIds: invoiceListState_1.INVOICING_INVOICE_TABS,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    version: 1.0,
-}));
+exports.getInvoiceListView = (0, toolkit_1.createSelector)((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (invoiceState, listViewState) => {
+    const activeTabState = listViewState.invoiceByTab[listViewState.activeTab];
+    return {
+        activeTab: listViewState.activeTab,
+        invoices: activeTabState.invoiceIds
+            .map((id) => invoiceState.invoiceByID[id])
+            .filter((item) => item != null),
+        counts: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        kpis: listViewState.kpis,
+        kpisFetchState: listViewState.kpisFetchState,
+        nextCursor: activeTabState.nextCursor,
+        tabIds: invoiceListState_1.INVOICING_INVOICE_TABS,
+        fetchState: activeTabState.fetchState,
+        error: activeTabState.error,
+        version: 1.0,
+    };
+});

package/lib/view/invoicing/invoiceList/invoiceListState.d.ts

@@ -1,4 +1,4 @@
-import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { InvoicingInvoiceKPIs } from '../../../entity/invoicing/invoice/invoiceState';
 import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
@@ -18,19 +18,32 @@ export interface InvoiceListFilters {
     dateFrom?: string;
     dateTo?: string;
     search?: string;
-    status?: string;
     subscriptionId?: ID;
 }
-export interface InvoiceListState extends FetchedState {
+/**
+ * Per-tab cache slice. Each status tab is a separate server query (the backend
+ * filters by `status`), so its loaded ids, pagination cursor and fetch state are
+ * cached independently. Mirrors the transaction-list per-tab cache pattern.
+ */
+export interface InvoiceTabState extends FetchStateAndError {
+    invoiceIds: ID[];
+    nextCursor: string | null;
+}
+export interface InvoiceListState {
+    /** Selected status tab (CES-owned so it persists across page revisits). */
+    activeTab: InvoicingInvoiceTabId;
+    /** Tab-independent list counts. */
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
+    /** Base query shared across tabs (search / customer / subscription / dates). */
     filters: InvoiceListFilters;
-    /** Ordered invoice IDs for the current list view. */
-    invoiceIds: ID[];
+    /** Per-tab cached invoice ids + cursor + fetch state. */
+    invoiceByTab: Record<InvoicingInvoiceTabId, InvoiceTabState>;
     kpisFetchState: FetchStateAndError;
-    /** Cursor for the next page (null when there are no more pages). */
-    nextCursor: string | null;
+    /** Tab-independent money KPIs. */
     kpis?: InvoicingInvoiceKPIs;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }
+export declare const makeInvoiceTabState: () => InvoiceTabState;
+export declare const makeInvoiceByTab: () => Record<InvoicingInvoiceTabId, InvoiceTabState>;

package/lib/view/invoicing/invoiceList/invoiceListState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INVOICING_INVOICE_TABS = exports.toInvoicingInvoiceTabId = exports.ALL_INVOICING_INVOICE_TAB_IDS = void 0;
+exports.makeInvoiceByTab = exports.makeInvoiceTabState = exports.INVOICING_INVOICE_TABS = exports.toInvoicingInvoiceTabId = exports.ALL_INVOICING_INVOICE_TAB_IDS = void 0;
 const stringToUnion_1 = require("../../../commonStateTypes/stringToUnion");
 exports.ALL_INVOICING_INVOICE_TAB_IDS = [
     'all',
@@ -21,3 +21,15 @@ exports.toInvoicingInvoiceTabId = toInvoicingInvoiceTabId;
 exports.INVOICING_INVOICE_TABS = [
     ...exports.ALL_INVOICING_INVOICE_TAB_IDS,
 ];
+const makeInvoiceTabState = () => ({
+    invoiceIds: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+exports.makeInvoiceTabState = makeInvoiceTabState;
+const makeInvoiceByTab = () => exports.ALL_INVOICING_INVOICE_TAB_IDS.reduce((acc, tabId) => {
+    acc[tabId] = (0, exports.makeInvoiceTabState)();
+    return acc;
+}, {});
+exports.makeInvoiceByTab = makeInvoiceByTab;

package/lib/view/invoicing/invoicingCreditNoteListView/epics/fetchInvoicingCreditNoteListEpic.js

@@ -9,9 +9,6 @@ const invoicingApiHelper_1 = require("../../invoicingApiHelper");
 const invoicingCreditNoteListViewReducer_1 = require("../invoicingCreditNoteListViewReducer");
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }

package/lib/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewReducer.d.ts

@@ -26,6 +26,6 @@ export declare const fetchInvoicingCreditNoteList: import("@reduxjs/toolkit").Ac
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingCreditNoteListView/updateInvoicingCreditNoteList">, updateInvoicingCreditNoteListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteListFailure">, fetchInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/fetchInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCreditNoteListView/updateInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteCountsFailure">, updateInvoicingCreditNoteFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCreditNoteFilters, "invoicingCreditNoteListView/updateInvoicingCreditNoteFilters">, clearInvoicingCreditNoteListView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/clearInvoicingCreditNoteListView">;
+}, "invoicingCreditNoteListView/updateInvoicingCreditNoteList">, updateInvoicingCreditNoteListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteListFailure">, fetchInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/fetchInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCreditNoteListView/updateInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteCountsFailure">, updateInvoicingCreditNoteFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCreditNoteFilters, "invoicingCreditNoteListView/updateInvoicingCreditNoteFilters">, setInvoicingCreditNoteActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"adjusted" | "refunded" | "refund_due" | "voided" | "all", "invoicingCreditNoteListView/setInvoicingCreditNoteActiveTab">, clearInvoicingCreditNoteListView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/clearInvoicingCreditNoteListView">;
 declare const _default: import("redux").Reducer<InvoicingCreditNoteListViewState>;
 export default _default;

package/lib/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewReducer.js

@@ -1,11 +1,12 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearInvoicingCreditNoteListView = exports.updateInvoicingCreditNoteFilters = exports.updateInvoicingCreditNoteCountsFailure = exports.updateInvoicingCreditNoteCounts = exports.fetchInvoicingCreditNoteCounts = exports.updateInvoicingCreditNoteListFailure = exports.updateInvoicingCreditNoteList = exports.fetchInvoicingCreditNoteListPage = exports.fetchInvoicingCreditNoteList = exports.initialState = void 0;
+exports.clearInvoicingCreditNoteListView = exports.setInvoicingCreditNoteActiveTab = exports.updateInvoicingCreditNoteFilters = exports.updateInvoicingCreditNoteCountsFailure = exports.updateInvoicingCreditNoteCounts = exports.fetchInvoicingCreditNoteCounts = exports.updateInvoicingCreditNoteListFailure = exports.updateInvoicingCreditNoteList = exports.fetchInvoicingCreditNoteListPage = exports.fetchInvoicingCreditNoteList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 exports.initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -84,10 +85,15 @@ const invoicingCreditNoteListView = (0, toolkit_1.createSlice)({
         updateInvoicingCreditNoteFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingCreditNoteActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         clearInvoicingCreditNoteListView(draft) {
             Object.assign(draft, exports.initialState);
         },
     },
 });
-_a = invoicingCreditNoteListView.actions, exports.fetchInvoicingCreditNoteList = _a.fetchInvoicingCreditNoteList, exports.fetchInvoicingCreditNoteListPage = _a.fetchInvoicingCreditNoteListPage, exports.updateInvoicingCreditNoteList = _a.updateInvoicingCreditNoteList, exports.updateInvoicingCreditNoteListFailure = _a.updateInvoicingCreditNoteListFailure, exports.fetchInvoicingCreditNoteCounts = _a.fetchInvoicingCreditNoteCounts, exports.updateInvoicingCreditNoteCounts = _a.updateInvoicingCreditNoteCounts, exports.updateInvoicingCreditNoteCountsFailure = _a.updateInvoicingCreditNoteCountsFailure, exports.updateInvoicingCreditNoteFilters = _a.updateInvoicingCreditNoteFilters, exports.clearInvoicingCreditNoteListView = _a.clearInvoicingCreditNoteListView;
+_a = invoicingCreditNoteListView.actions, exports.fetchInvoicingCreditNoteList = _a.fetchInvoicingCreditNoteList, exports.fetchInvoicingCreditNoteListPage = _a.fetchInvoicingCreditNoteListPage, exports.updateInvoicingCreditNoteList = _a.updateInvoicingCreditNoteList, exports.updateInvoicingCreditNoteListFailure = _a.updateInvoicingCreditNoteListFailure, exports.fetchInvoicingCreditNoteCounts = _a.fetchInvoicingCreditNoteCounts, exports.updateInvoicingCreditNoteCounts = _a.updateInvoicingCreditNoteCounts, exports.updateInvoicingCreditNoteCountsFailure = _a.updateInvoicingCreditNoteCountsFailure, exports.updateInvoicingCreditNoteFilters = _a.updateInvoicingCreditNoteFilters, exports.setInvoicingCreditNoteActiveTab = _a.setInvoicingCreditNoteActiveTab, exports.clearInvoicingCreditNoteListView = _a.clearInvoicingCreditNoteListView;
 exports.default = invoicingCreditNoteListView.reducer;

package/lib/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewSelector.d.ts

@@ -6,6 +6,7 @@ import { RootState } from '../../../reducer';
 import { InvoicingListSort } from '../invoicingApiHelper';
 import { InvoicingCreditNoteColumnConfig, InvoicingCreditNoteFilters, InvoicingCreditNoteTabId } from './invoicingCreditNoteListViewState';
 export interface InvoicingCreditNoteListView extends SelectorView {
+    activeTab: InvoicingCreditNoteTabId;
     columns: InvoicingCreditNoteColumnConfig[];
     count: InvoicingListCounts;
     countsFetchState: FetchStateAndError;

package/lib/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewSelector.js

@@ -9,16 +9,26 @@ const invoicingCreditNoteListViewState_1 = require("./invoicingCreditNoteListVie
  * object) keep referential identity until the credit-note entity slice or the
  * list-view slice actually change.
  */
-exports.getInvoicingCreditNoteListView = (0, toolkit_1.createSelector)((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (creditNoteState, listViewState) => ({
-    columns: invoicingCreditNoteListViewState_1.INVOICING_CREDIT_NOTE_COLUMNS,
-    creditNotes: (0, creditNoteSelector_1.getInvoicingCreditNotesByIds)(creditNoteState, listViewState.ids),
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    tabIds: invoicingCreditNoteListViewState_1.INVOICING_CREDIT_NOTE_TABS,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+exports.getInvoicingCreditNoteListView = (0, toolkit_1.createSelector)((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (creditNoteState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allCreditNotes = (0, creditNoteSelector_1.getInvoicingCreditNotesByIds)(creditNoteState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const creditNotes = activeTab === 'all'
+        ? allCreditNotes
+        : allCreditNotes.filter((creditNote) => creditNote.status === activeTab);
+    return {
+        activeTab,
+        columns: invoicingCreditNoteListViewState_1.INVOICING_CREDIT_NOTE_COLUMNS,
+        creditNotes,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        nextCursor: listViewState.nextCursor,
+        tabIds: invoicingCreditNoteListViewState_1.INVOICING_CREDIT_NOTE_TABS,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});