@zeniai/client-epic-state 5.2.77 → 5.2.79

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

@@ -1,6 +1,7 @@
-import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
+import { InvoicingListByTab } from '../invoicingListTabCache';
 export interface InvoicingCreditNoteFilters {
     customerId?: ID;
     search?: string;
@@ -23,14 +24,14 @@ export declare const INVOICING_CREDIT_NOTE_COLUMNS: InvoicingCreditNoteColumnCon
 export declare const ALL_INVOICING_CREDIT_NOTE_TAB_IDS: readonly ["all", "refund_due", "adjusted", "refunded", "voided"];
 export declare const toInvoicingCreditNoteTabId: (v: string) => "adjusted" | "refunded" | "refund_due" | "voided" | "all";
 export type InvoicingCreditNoteTabId = ReturnType<typeof toInvoicingCreditNoteTabId>;
-export interface InvoicingCreditNoteListViewState extends FetchedState {
+export interface InvoicingCreditNoteListViewState {
     /** Selected status tab (CES-owned so it persists across page revisits). */
     activeTab: InvoicingCreditNoteTabId;
+    /** Per-tab rows, cursor and fetch state; each tab is its own `?status=` query. */
+    byTab: InvoicingListByTab;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingCreditNoteFilters;
-    ids: ID[];
-    nextCursor: string | null;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }

package/lib/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListEpic.d.ts

@@ -6,4 +6,4 @@ import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchInvoicingCustomerList, updateInvoicingCustomerList, updateInvoicingCustomerListFailure } from '../invoicingCustomerListViewReducer';
 export type ActionType = ReturnType<typeof fetchInvoicingCustomerList> | ReturnType<typeof updateInvoicingCustomerList> | ReturnType<typeof updateInvoicingCustomerListFailure> | ReturnType<typeof updateAddresses> | ReturnType<typeof updateInvoicingCustomers>;
-export declare const fetchInvoicingCustomerListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoicingCustomerListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListEpic.js

@@ -8,9 +8,14 @@ const invoicingCustomerPayload_1 = require("../../../../entity/invoicing/invoici
 const invoicingCustomerReducer_1 = require("../../../../entity/invoicing/invoicingCustomer/invoicingCustomerReducer");
 const responsePayload_1 = require("../../../../responsePayload");
 const invoicingApiHelper_1 = require("../../invoicingApiHelper");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingCustomerListViewReducer_1 = require("../invoicingCustomerListViewReducer");
-const buildQuery = (filters, cursor, sort) => {
+const invoicingCustomerListViewState_1 = require("../invoicingCustomerListViewState");
+const buildQuery = (filters, cursor, sort, status) => {
     const params = new URLSearchParams();
+    if (status != null) {
+        params.set('status', status);
+    }
     if (filters.search != null && filters.search.length > 0) {
         params.set('search', filters.search);
     }
@@ -21,9 +26,15 @@ const buildQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoicingCustomerListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoicingCustomerListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList.match), (0, operators_1.map)((action) => ({
+    action,
+    tabId: (0, invoicingListTabCache_1.invoicingListFetchTab)(state$.value.invoicingCustomerListViewState.activeTab, action.payload.tabId, invoicingCustomerListViewState_1.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS),
+})), 
+// Per tab: a newer fetch of the same tab replaces its in-flight one, while
+// another tab's request keeps running and lands in its own cache.
+(0, operators_1.groupBy)(({ tabId }) => tabId), (0, operators_1.mergeMap)((tabFetches$) => tabFetches$.pipe((0, operators_1.switchMap)(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort));
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort, (0, invoicingListTabCache_1.invoicingListStatusParam)(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];
@@ -34,11 +45,18 @@ const fetchInvoicingCustomerListEpic = (actions$, _state$, zeniAPI) => actions$.
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return (0, rxjs_1.of)((0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerListFailure)(response.status));
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerListFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch customer list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return (0, rxjs_1.of)((0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerListFailure)({
+            status: response.status,
+            tabId,
+        }));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerListFailure)({
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch customer list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));
 exports.fetchInvoicingCustomerListEpic = fetchInvoicingCustomerListEpic;

package/lib/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListPageEpic.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchInvoicingCustomerListPageEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingCustomerListViewReducer_1 = require("../invoicingCustomerListViewReducer");
+const invoicingCustomerListViewState_1 = require("../invoicingCustomerListViewState");
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
  * caller forces a refresh via `cacheOverride` (e.g. on a filter/sort change).
@@ -20,8 +22,20 @@ const fetchInvoicingCustomerListPageEpic = (actions$, state$) => actions$.pipe((
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingCustomerListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({ filters, sort }));
+    const tabId = (0, invoicingListTabCache_1.invoicingListSourceTab)(state.activeTab, invoicingCustomerListViewState_1.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS);
+    const tabFetch = (0, invoicingListTabCache_1.planInvoicingListTabFetch)((0, invoicingListTabCache_1.getInvoicingListTab)(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerCounts)());

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.d.ts

@@ -9,11 +9,14 @@ export declare const fetchInvoicingCustomerList: import("@reduxjs/toolkit").Acti
     filters?: InvoicingCustomerFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingCustomerFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingCustomerListView/fetchInvoicingCustomerList", never, never>, fetchInvoicingCustomerListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingCustomerFilters;
@@ -26,7 +29,11 @@ export declare const fetchInvoicingCustomerList: import("@reduxjs/toolkit").Acti
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingCustomerListView/updateInvoicingCustomerList">, updateInvoicingCustomerListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCustomerListView/updateInvoicingCustomerListFailure">, fetchInvoicingCustomerCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCustomerListView/fetchInvoicingCustomerCounts">, updateInvoicingCustomerCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCustomerListView/updateInvoicingCustomerCounts">, updateInvoicingCustomerCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCustomerListView/updateInvoicingCustomerCountsFailure">, updateInvoicingCustomerFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCustomerFilters, "invoicingCustomerListView/updateInvoicingCustomerFilters">, setInvoicingCustomerActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "all" | "trial" | "at_risk", "invoicingCustomerListView/setInvoicingCustomerActiveTab">, addInvoicingCustomerToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    tabId: string;
+}, "invoicingCustomerListView/updateInvoicingCustomerList">, updateInvoicingCustomerListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "invoicingCustomerListView/updateInvoicingCustomerListFailure">, fetchInvoicingCustomerCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCustomerListView/fetchInvoicingCustomerCounts">, updateInvoicingCustomerCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCustomerListView/updateInvoicingCustomerCounts">, updateInvoicingCustomerCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCustomerListView/updateInvoicingCustomerCountsFailure">, updateInvoicingCustomerFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCustomerFilters, "invoicingCustomerListView/updateInvoicingCustomerFilters">, setInvoicingCustomerActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "all" | "trial" | "at_risk", "invoicingCustomerListView/setInvoicingCustomerActiveTab">, addInvoicingCustomerToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     id: ID;
     status?: string;
 }, "invoicingCustomerListView/addInvoicingCustomerToList">;

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.js

@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addInvoicingCustomerToList = exports.setInvoicingCustomerActiveTab = exports.updateInvoicingCustomerFilters = exports.updateInvoicingCustomerCountsFailure = exports.updateInvoicingCustomerCounts = exports.fetchInvoicingCustomerCounts = exports.updateInvoicingCustomerListFailure = exports.updateInvoicingCustomerList = exports.fetchInvoicingCustomerListPage = exports.fetchInvoicingCustomerList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
+const invoicingCustomerListViewState_1 = require("./invoicingCustomerListViewState");
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
     activeTab: 'all',
-    ids: [],
-    nextCursor: null,
+    byTab: {},
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingCustomerListView = (0, toolkit_1.createSlice)({
     name: 'invoicingCustomerListView',
@@ -23,14 +19,9 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingCustomerList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                (0, invoicingListTabCache_1.startInvoicingListTabFetch)(draft.byTab, (0, invoicingListTabCache_1.invoicingListFetchTab)(draft.activeTab, action.payload.tabId, invoicingCustomerListViewState_1.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS), action.payload.keepExistingListItems);
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -39,12 +30,17 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingCustomerListPage: {
             reducer(draft, action) {
+                // Another search or sort makes every cached tab stale.
+                if (!(0, invoicingListTabCache_1.isSameInvoicingListQuery)(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -59,16 +55,10 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingCustomerList(draft, action) {
-            draft.ids = action.payload.keepExistingListItems
-                ? [...new Set([...draft.ids, ...action.payload.ids])]
-                : action.payload.ids;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            (0, invoicingListTabCache_1.completeInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingCustomerListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCustomerCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -86,8 +76,8 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
         updateInvoicingCustomerFilters(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.
+        // Select a status tab. The view dispatches the page fetch after, which loads
+        // the tab from the server only when its cache is empty or failed.
         setInvoicingCustomerActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },
@@ -98,10 +88,9 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
         // dispatch time, so bump only `counts.all` when `status` is absent.
         addInvoicingCustomerToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.ids.includes(id)) {
+            if (!(0, invoicingListTabCache_1.addToInvoicingListTabs)(draft.byTab, id, status)) {
                 return;
             }
-            draft.ids = [id, ...draft.ids];
             draft.counts.all += 1;
             if (status != null) {
                 draft.counts[status] = (draft.counts[status] ?? 0) + 1;

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.d.ts

@@ -25,3 +25,8 @@ export interface InvoicingCustomerListView extends SelectorView {
  * every unrelated redux action because a fresh array was built each call.
  */
 export declare const getInvoicingCustomerListView: (state: RootState) => InvoicingCustomerListView;
+/**
+ * Every loaded customer, unfiltered: the pickers read this rather than the list
+ * view so they never narrow to whichever tab the customers list was left on.
+ */
+export declare const getInvoicingAllCustomers: (state: RootState) => InvoicingCustomer[];

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInvoicingCustomerListView = void 0;
+exports.getInvoicingAllCustomers = exports.getInvoicingCustomerListView = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const invoicingCustomerSelector_1 = require("../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const invoicingTabHelper_1 = require("../invoicingTabHelper");
 const invoicingCustomerListViewState_1 = require("./invoicingCustomerListViewState");
 /**
@@ -13,22 +14,19 @@ const invoicingCustomerListViewState_1 = require("./invoicingCustomerListViewSta
  */
 exports.getInvoicingCustomerListView = (0, toolkit_1.createSelector)((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (state) => state.invoicingConfigViewState.customerStatusOptions, (customerState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
-    const allCustomers = (0, invoicingCustomerSelector_1.getInvoicingCustomersByIds)(customerState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything, 'at_risk' keys off the
-    // `isAtRisk` flag, the rest match the customer `status`).
-    const customers = activeTab === 'all'
-        ? allCustomers
-        : activeTab === 'at_risk'
-            ? allCustomers.filter((customer) => customer.isAtRisk === true)
-            : allCustomers.filter((customer) => customer.status === activeTab);
+    const tab = (0, invoicingListTabCache_1.getInvoicingListTab)(listViewState.byTab, (0, invoicingListTabCache_1.invoicingListSourceTab)(activeTab, invoicingCustomerListViewState_1.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS));
+    const tabRows = (0, invoicingCustomerSelector_1.getInvoicingCustomersByIds)(customerState, tab.ids);
+    // `at_risk` is not a stored status, so it is the `all` rows filtered here.
+    const customers = activeTab === 'at_risk'
+        ? tabRows.filter((customer) => customer.isAtRisk === true)
+        : tabRows;
     return {
         activeTab,
         columns: invoicingCustomerListViewState_1.INVOICING_CUSTOMER_COLUMNS,
         customers,
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
-        nextCursor: listViewState.nextCursor,
+        fetchState: tab.fetchState,
+        error: tab.error,
+        nextCursor: tab.nextCursor,
         filters: listViewState.filters,
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
@@ -41,3 +39,9 @@ exports.getInvoicingCustomerListView = (0, toolkit_1.createSelector)((state) =>
         sort: listViewState.sort,
     };
 });
+/**
+ * Every loaded customer, unfiltered: the pickers read this rather than the list
+ * view so they never narrow to whichever tab the customers list was left on.
+ */
+const getInvoicingAllCustomers = (state) => (0, invoicingCustomerSelector_1.getInvoicingCustomersByIds)(state.invoicingCustomerState, (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCustomerListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB).ids);
+exports.getInvoicingAllCustomers = getInvoicingAllCustomers;

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewState.d.ts

@@ -1,6 +1,7 @@
-import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError } from '../../../commonStateTypes/common';
 import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
+import { InvoicingListByTab } from '../invoicingListTabCache';
 export interface InvoicingCustomerFilters {
     search?: string;
 }
@@ -22,14 +23,16 @@ export declare const INVOICING_CUSTOMER_COLUMNS: InvoicingCustomerColumnConfig[]
 export declare const ALL_INVOICING_CUSTOMER_TAB_IDS: readonly ["all", "active", "trial", "at_risk"];
 export declare const toInvoicingCustomerTabId: (v: string) => "active" | "all" | "trial" | "at_risk";
 export type InvoicingCustomerTabId = ReturnType<typeof toInvoicingCustomerTabId>;
-export interface InvoicingCustomerListViewState extends FetchedState {
+export interface InvoicingCustomerListViewState {
     /** Selected status tab (CES-owned so it persists across page revisits). */
     activeTab: InvoicingCustomerTabId;
+    /** Per-tab rows, cursor and fetch state; each tab is its own `?status=` query. */
+    byTab: InvoicingListByTab;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingCustomerFilters;
-    ids: ID[];
-    nextCursor: string | null;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+export declare const INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS: readonly InvoicingCustomerTabId[];

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toInvoicingCustomerTabId = exports.ALL_INVOICING_CUSTOMER_TAB_IDS = exports.INVOICING_CUSTOMER_COLUMNS = exports.toInvoicingCustomerSortKey = exports.ALL_INVOICING_CUSTOMER_SORT_KEYS = void 0;
+exports.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS = exports.toInvoicingCustomerTabId = exports.ALL_INVOICING_CUSTOMER_TAB_IDS = exports.INVOICING_CUSTOMER_COLUMNS = exports.toInvoicingCustomerSortKey = exports.ALL_INVOICING_CUSTOMER_SORT_KEYS = void 0;
 const stringToUnion_1 = require("../../../commonStateTypes/stringToUnion");
 exports.ALL_INVOICING_CUSTOMER_SORT_KEYS = [
     'name',
@@ -28,3 +28,5 @@ exports.ALL_INVOICING_CUSTOMER_TAB_IDS = [
 ];
 const toInvoicingCustomerTabId = (v) => (0, stringToUnion_1.stringToUnion)(v, exports.ALL_INVOICING_CUSTOMER_TAB_IDS);
 exports.toInvoicingCustomerTabId = toInvoicingCustomerTabId;
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+exports.INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS = ['at_risk'];

package/lib/view/invoicing/invoicingDunningCaseListView/epics/fetchInvoicingDunningCaseListEpic.d.ts

@@ -5,4 +5,4 @@ import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchInvoicingDunningCaseList, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure } from '../invoicingDunningCaseListViewReducer';
 export type ActionType = ReturnType<typeof fetchInvoicingDunningCaseList> | ReturnType<typeof updateInvoicingDunningCaseList> | ReturnType<typeof updateInvoicingDunningCaseListFailure> | ReturnType<typeof updateInvoicingDunningCases>;
-export declare const fetchInvoicingDunningCaseListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoicingDunningCaseListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/invoicing/invoicingDunningCaseListView/epics/fetchInvoicingDunningCaseListEpic.js

@@ -6,9 +6,13 @@ const operators_1 = require("rxjs/operators");
 const dunningCaseReducer_1 = require("../../../../entity/invoicing/dunningCase/dunningCaseReducer");
 const responsePayload_1 = require("../../../../responsePayload");
 const invoicingApiHelper_1 = require("../../invoicingApiHelper");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingDunningCaseListViewReducer_1 = require("../invoicingDunningCaseListViewReducer");
-const buildQuery = (filters, cursor, sort) => {
+const buildQuery = (filters, cursor, sort, status) => {
     const params = new URLSearchParams();
+    if (status != null) {
+        params.set('status', status);
+    }
     if (filters.search != null && filters.search.length > 0) {
         params.set('search', filters.search);
     }
@@ -19,9 +23,15 @@ const buildQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoicingDunningCaseListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoicingDunningCaseListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseList.match), (0, operators_1.map)((action) => ({
+    action,
+    tabId: (0, invoicingListTabCache_1.invoicingListFetchTab)(state$.value.invoicingDunningCaseListViewState.activeTab, action.payload.tabId),
+})), 
+// Per tab: a newer fetch of the same tab replaces its in-flight one, while
+// another tab's request keeps running and lands in its own cache.
+(0, operators_1.groupBy)(({ tabId }) => tabId), (0, operators_1.mergeMap)((tabFetches$) => tabFetches$.pipe((0, operators_1.switchMap)(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/dunning`, buildQuery(filters, cursor, sort));
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/dunning`, buildQuery(filters, cursor, sort, (0, invoicingListTabCache_1.invoicingListStatusParam)(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];
@@ -31,11 +41,18 @@ const fetchInvoicingDunningCaseListEpic = (actions$, _state$, zeniAPI) => action
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return (0, rxjs_1.of)((0, invoicingDunningCaseListViewReducer_1.updateInvoicingDunningCaseListFailure)(response.status));
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingDunningCaseListViewReducer_1.updateInvoicingDunningCaseListFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch dunning case list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return (0, rxjs_1.of)((0, invoicingDunningCaseListViewReducer_1.updateInvoicingDunningCaseListFailure)({
+            status: response.status,
+            tabId,
+        }));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingDunningCaseListViewReducer_1.updateInvoicingDunningCaseListFailure)({
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch dunning case list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));
 exports.fetchInvoicingDunningCaseListEpic = fetchInvoicingDunningCaseListEpic;

package/lib/view/invoicing/invoicingDunningCaseListView/epics/fetchInvoicingDunningCaseListPageEpic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchInvoicingDunningCaseListPageEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingDunningCaseListViewReducer_1 = require("../invoicingDunningCaseListViewReducer");
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -20,8 +21,20 @@ const fetchInvoicingDunningCaseListPageEpic = (actions$, state$) => actions$.pip
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingDunningCaseListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push((0, invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseList)({ filters, sort }));
+    const tabId = (0, invoicingListTabCache_1.invoicingListSourceTab)(state.activeTab);
+    const tabFetch = (0, invoicingListTabCache_1.planInvoicingListTabFetch)((0, invoicingListTabCache_1.getInvoicingListTab)(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push((0, invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseList)({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push((0, invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseList)({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push((0, invoicingDunningCaseListViewReducer_1.fetchInvoicingDunningCaseCounts)());

package/lib/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewReducer.d.ts

@@ -9,11 +9,14 @@ export declare const fetchInvoicingDunningCaseList: import("@reduxjs/toolkit").A
     filters?: InvoicingDunningCaseFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingDunningCaseFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingDunningCaseListView/fetchInvoicingDunningCaseList", never, never>, fetchInvoicingDunningCaseListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingDunningCaseFilters;
@@ -26,6 +29,10 @@ export declare const fetchInvoicingDunningCaseList: import("@reduxjs/toolkit").A
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingDunningCaseListView/updateInvoicingDunningCaseList">, updateInvoicingDunningCaseListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingDunningCaseListView/updateInvoicingDunningCaseListFailure">, fetchInvoicingDunningCaseCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingDunningCaseListView/fetchInvoicingDunningCaseCounts">, updateInvoicingDunningCaseCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingDunningCaseListView/updateInvoicingDunningCaseCounts">, updateInvoicingDunningCaseCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingDunningCaseListView/updateInvoicingDunningCaseCountsFailure">, updateInvoicingDunningCaseFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingDunningCaseFilters, "invoicingDunningCaseListView/updateInvoicingDunningCaseFilters">, setInvoicingDunningCaseActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"paused" | "cancelled" | "scheduled" | "retrying" | "manual_review" | "resolved" | "all", "invoicingDunningCaseListView/setInvoicingDunningCaseActiveTab">;
+    tabId: string;
+}, "invoicingDunningCaseListView/updateInvoicingDunningCaseList">, updateInvoicingDunningCaseListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "invoicingDunningCaseListView/updateInvoicingDunningCaseListFailure">, fetchInvoicingDunningCaseCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingDunningCaseListView/fetchInvoicingDunningCaseCounts">, updateInvoicingDunningCaseCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingDunningCaseListView/updateInvoicingDunningCaseCounts">, updateInvoicingDunningCaseCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingDunningCaseListView/updateInvoicingDunningCaseCountsFailure">, updateInvoicingDunningCaseFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingDunningCaseFilters, "invoicingDunningCaseListView/updateInvoicingDunningCaseFilters">, setInvoicingDunningCaseActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"paused" | "cancelled" | "scheduled" | "retrying" | "manual_review" | "resolved" | "all", "invoicingDunningCaseListView/setInvoicingDunningCaseActiveTab">;
 declare const _default: import("redux").Reducer<InvoicingDunningCaseListViewState>;
 export default _default;

package/lib/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewReducer.js

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setInvoicingDunningCaseActiveTab = exports.updateInvoicingDunningCaseFilters = exports.updateInvoicingDunningCaseCountsFailure = exports.updateInvoicingDunningCaseCounts = exports.fetchInvoicingDunningCaseCounts = exports.updateInvoicingDunningCaseListFailure = exports.updateInvoicingDunningCaseList = exports.fetchInvoicingDunningCaseListPage = exports.fetchInvoicingDunningCaseList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
     activeTab: 'all',
-    ids: [],
-    nextCursor: null,
+    byTab: {},
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingDunningCaseListView = (0, toolkit_1.createSlice)({
     name: 'invoicingDunningCaseListView',
@@ -23,14 +18,9 @@ const invoicingDunningCaseListView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingDunningCaseList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                (0, invoicingListTabCache_1.startInvoicingListTabFetch)(draft.byTab, (0, invoicingListTabCache_1.invoicingListFetchTab)(draft.activeTab, action.payload.tabId), action.payload.keepExistingListItems);
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -39,12 +29,17 @@ const invoicingDunningCaseListView = (0, toolkit_1.createSlice)({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingDunningCaseListPage: {
             reducer(draft, action) {
+                // Another search or sort makes every cached tab stale.
+                if (!(0, invoicingListTabCache_1.isSameInvoicingListQuery)(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -59,16 +54,10 @@ const invoicingDunningCaseListView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingDunningCaseList(draft, action) {
-            draft.ids = action.payload.keepExistingListItems
-                ? [...new Set([...draft.ids, ...action.payload.ids])]
-                : action.payload.ids;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            (0, invoicingListTabCache_1.completeInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingDunningCaseListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingDunningCaseCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -86,8 +75,8 @@ const invoicingDunningCaseListView = (0, toolkit_1.createSlice)({
         updateInvoicingDunningCaseFilters(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.
+        // Select a status tab. The view dispatches the page fetch after, which loads
+        // the tab from the server only when its cache is empty or failed.
         setInvoicingDunningCaseActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },

package/lib/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewSelector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingDunningCaseListView = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const dunningCaseSelector_1 = require("../../../entity/invoicing/dunningCase/dunningCaseSelector");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const invoicingTabHelper_1 = require("../invoicingTabHelper");
 const invoicingDunningCaseListViewState_1 = require("./invoicingDunningCaseListViewState");
 /**
@@ -12,12 +13,8 @@ const invoicingDunningCaseListViewState_1 = require("./invoicingDunningCaseListV
  */
 exports.getInvoicingDunningCaseListView = (0, toolkit_1.createSelector)((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (state) => state.invoicingConfigViewState.dunningCaseStatusOptions, (dunningCaseState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
-    const allDunningCases = (0, dunningCaseSelector_1.getInvoicingDunningCasesByIds)(dunningCaseState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything).
-    const dunningCases = activeTab === 'all'
-        ? allDunningCases
-        : allDunningCases.filter((dunningCase) => dunningCase.status === activeTab);
+    const tab = (0, invoicingListTabCache_1.getInvoicingListTab)(listViewState.byTab, (0, invoicingListTabCache_1.invoicingListSourceTab)(activeTab));
+    const dunningCases = (0, dunningCaseSelector_1.getInvoicingDunningCasesByIds)(dunningCaseState, tab.ids);
     return {
         activeTab,
         columns: invoicingDunningCaseListViewState_1.INVOICING_DUNNING_CASE_COLUMNS,
@@ -25,9 +22,9 @@ exports.getInvoicingDunningCaseListView = (0, toolkit_1.createSelector)((state)
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
-        nextCursor: listViewState.nextCursor,
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
+        nextCursor: tab.nextCursor,
+        fetchState: tab.fetchState,
+        error: tab.error,
         statusOptions,
         tabIds: (0, invoicingTabHelper_1.invoicingTabIdsFromConfig)({
             allTabIds: invoicingDunningCaseListViewState_1.ALL_INVOICING_DUNNING_CASE_TAB_IDS,