@zeniai/client-epic-state 5.2.77 → 5.2.79

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

@@ -1,13 +1,18 @@
 import { of } from 'rxjs';
-import { catchError, filter, switchMap } from 'rxjs/operators';
+import { catchError, filter, groupBy, map, mergeMap, switchMap, } from 'rxjs/operators';
 import { updateAddresses } from '../../../../entity/address/addressReducer';
 import { extractInvoicingCustomerAddresses } from '../../../../entity/invoicing/invoicingCustomer/invoicingCustomerPayload';
 import { updateInvoicingCustomers } from '../../../../entity/invoicing/invoicingCustomer/invoicingCustomerReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../../invoicingListTabCache';
 import { fetchInvoicingCustomerList, updateInvoicingCustomerList, updateInvoicingCustomerListFailure, } from '../invoicingCustomerListViewReducer';
-const buildQuery = (filters, cursor, sort) => {
+import { INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS, } from '../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);
     }
@@ -18,9 +23,15 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingCustomerListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCustomerList.match), switchMap((action) => {
+export const fetchInvoicingCustomerListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCustomerList.match), map((action) => ({
+    action,
+    tabId: invoicingListFetchTab(state$.value.invoicingCustomerListViewState.activeTab, action.payload.tabId, 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.
+groupBy(({ tabId }) => tabId), mergeMap((tabFetches$) => tabFetches$.pipe(switchMap(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort));
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
@@ -31,10 +42,17 @@ export const fetchInvoicingCustomerListEpic = (actions$, _state$, zeniAPI) => ac
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingCustomerListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingCustomerListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch customer list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingCustomerListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingCustomerListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch customer list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

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

@@ -1,6 +1,8 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { getInvoicingListTab, invoicingListSourceTab, planInvoicingListTabFetch, } from '../../invoicingListTabCache';
 import { fetchInvoicingCustomerCounts, fetchInvoicingCustomerList, fetchInvoicingCustomerListPage, } from '../invoicingCustomerListViewReducer';
+import { INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS } from '../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).
@@ -17,8 +19,20 @@ export const fetchInvoicingCustomerListPageEpic = (actions$, state$) => actions$
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingCustomerListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push(fetchInvoicingCustomerList({ filters, sort }));
+    const tabId = invoicingListSourceTab(state.activeTab, INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS);
+    const tabFetch = planInvoicingListTabFetch(getInvoicingListTab(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push(fetchInvoicingCustomerList({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push(fetchInvoicingCustomerList({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push(fetchInvoicingCustomerCounts());

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

@@ -1,17 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { addToInvoicingListTabs, completeInvoicingListTabFetch, failInvoicingListTabFetch, invoicingListFetchTab, isSameInvoicingListQuery, startInvoicingListTabFetch, } from '../invoicingListTabCache';
+import { INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS, } from './invoicingCustomerListViewState';
 export const 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 = createSlice({
     name: 'invoicingCustomerListView',
@@ -19,14 +15,9 @@ const invoicingCustomerListView = createSlice({
     reducers: {
         fetchInvoicingCustomerList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                startInvoicingListTabFetch(draft.byTab, invoicingListFetchTab(draft.activeTab, action.payload.tabId, 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 {
@@ -35,12 +26,17 @@ const invoicingCustomerListView = 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 (!isSameInvoicingListQuery(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -55,16 +51,10 @@ const invoicingCustomerListView = 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;
+            completeInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingCustomerListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCustomerCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -82,8 +72,8 @@ const invoicingCustomerListView = 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;
         },
@@ -94,10 +84,9 @@ const invoicingCustomerListView = 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 (!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/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -1,7 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingCustomersByIds } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
+import { INVOICING_LIST_ALL_TAB, getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
-import { ALL_INVOICING_CUSTOMER_TAB_IDS, INVOICING_CUSTOMER_COLUMNS, } from './invoicingCustomerListViewState';
+import { ALL_INVOICING_CUSTOMER_TAB_IDS, INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS, INVOICING_CUSTOMER_COLUMNS, } from './invoicingCustomerListViewState';
 /**
  * Memoized so the denormalized `customers` array (and the wrapping view object)
  * keep referential identity until the customer entity slice or the list-view
@@ -10,22 +11,19 @@ import { ALL_INVOICING_CUSTOMER_TAB_IDS, INVOICING_CUSTOMER_COLUMNS, } from './i
  */
 export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (state) => state.invoicingConfigViewState.customerStatusOptions, (customerState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
-    const allCustomers = 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 = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab, INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS));
+    const tabRows = 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: 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,
@@ -38,3 +36,8 @@ export const getInvoicingCustomerListView = createSelector((state) => state.invo
         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.
+ */
+export const getInvoicingAllCustomers = (state) => getInvoicingCustomersByIds(state.invoicingCustomerState, getInvoicingListTab(state.invoicingCustomerListViewState.byTab, INVOICING_LIST_ALL_TAB).ids);

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

@@ -23,3 +23,5 @@ export const ALL_INVOICING_CUSTOMER_TAB_IDS = [
     'at_risk',
 ];
 export const toInvoicingCustomerTabId = (v) => stringToUnion(v, ALL_INVOICING_CUSTOMER_TAB_IDS);
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+export const INVOICING_CUSTOMER_CLIENT_FILTERED_TAB_IDS = ['at_risk'];

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

@@ -1,11 +1,15 @@
 import { of } from 'rxjs';
-import { catchError, filter, switchMap } from 'rxjs/operators';
+import { catchError, filter, groupBy, map, mergeMap, switchMap, } from 'rxjs/operators';
 import { updateInvoicingDunningCases } from '../../../../entity/invoicing/dunningCase/dunningCaseReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../../invoicingListTabCache';
 import { fetchInvoicingDunningCaseList, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, } from '../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);
     }
@@ -16,9 +20,15 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingDunningCaseListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingDunningCaseList.match), switchMap((action) => {
+export const fetchInvoicingDunningCaseListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingDunningCaseList.match), map((action) => ({
+    action,
+    tabId: 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.
+groupBy(({ tabId }) => tabId), mergeMap((tabFetches$) => tabFetches$.pipe(switchMap(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/dunning`, buildQuery(filters, cursor, sort));
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/dunning`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
@@ -28,10 +38,17 @@ export const fetchInvoicingDunningCaseListEpic = (actions$, _state$, zeniAPI) =>
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingDunningCaseListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingDunningCaseListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch dunning case list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingDunningCaseListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingDunningCaseListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch dunning case list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

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

@@ -1,5 +1,6 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { getInvoicingListTab, invoicingListSourceTab, planInvoicingListTabFetch, } from '../../invoicingListTabCache';
 import { fetchInvoicingDunningCaseCounts, fetchInvoicingDunningCaseList, fetchInvoicingDunningCaseListPage, } from '../invoicingDunningCaseListViewReducer';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -17,8 +18,20 @@ export const fetchInvoicingDunningCaseListPageEpic = (actions$, state$) => actio
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingDunningCaseListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push(fetchInvoicingDunningCaseList({ filters, sort }));
+    const tabId = invoicingListSourceTab(state.activeTab);
+    const tabFetch = planInvoicingListTabFetch(getInvoicingListTab(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push(fetchInvoicingDunningCaseList({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push(fetchInvoicingDunningCaseList({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push(fetchInvoicingDunningCaseCounts());

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

@@ -1,17 +1,12 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { completeInvoicingListTabFetch, failInvoicingListTabFetch, invoicingListFetchTab, isSameInvoicingListQuery, startInvoicingListTabFetch, } from '../invoicingListTabCache';
 export const 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 = createSlice({
     name: 'invoicingDunningCaseListView',
@@ -19,14 +14,9 @@ const invoicingDunningCaseListView = createSlice({
     reducers: {
         fetchInvoicingDunningCaseList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                startInvoicingListTabFetch(draft.byTab, 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 {
@@ -35,12 +25,17 @@ const invoicingDunningCaseListView = 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 (!isSameInvoicingListQuery(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -55,16 +50,10 @@ const invoicingDunningCaseListView = 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;
+            completeInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingDunningCaseListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingDunningCaseCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -82,8 +71,8 @@ const invoicingDunningCaseListView = 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/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewSelector.js

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingDunningCasesByIds } from '../../../entity/invoicing/dunningCase/dunningCaseSelector';
+import { getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
 import { ALL_INVOICING_DUNNING_CASE_TAB_IDS, INVOICING_DUNNING_CASE_COLUMNS, } from './invoicingDunningCaseListViewState';
 /**
@@ -9,12 +10,8 @@ import { ALL_INVOICING_DUNNING_CASE_TAB_IDS, INVOICING_DUNNING_CASE_COLUMNS, } f
  */
 export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (state) => state.invoicingConfigViewState.dunningCaseStatusOptions, (dunningCaseState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
-    const allDunningCases = 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 = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab));
+    const dunningCases = getInvoicingDunningCasesByIds(dunningCaseState, tab.ids);
     return {
         activeTab,
         columns: INVOICING_DUNNING_CASE_COLUMNS,
@@ -22,9 +19,9 @@ export const getInvoicingDunningCaseListView = createSelector((state) => state.i
         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: invoicingTabIdsFromConfig({
             allTabIds: ALL_INVOICING_DUNNING_CASE_TAB_IDS,

package/lib/esm/view/invoicing/invoicingListTabCache.js

@@ -0,0 +1,98 @@
+import { INVOICING_LIST_PAGE_SIZE, } from './invoicingApiHelper';
+export const INVOICING_LIST_ALL_TAB = 'all';
+const NOT_STARTED_TAB = Object.freeze({
+    ids: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+/** A tab's cache, or a not-started one when it was never fetched. */
+export const getInvoicingListTab = (byTab, tabId) => byTab[tabId] ?? NOT_STARTED_TAB;
+/**
+ * The cache a tab reads and fetches. A tab the list API cannot filter on (a
+ * derived grouping such as the customers' `at_risk`, not a stored status) is
+ * the `all` rows, filtered by the selector.
+ */
+export const invoicingListSourceTab = (tabId, clientFilteredTabIds = []) => clientFilteredTabIds.includes(tabId) ? INVOICING_LIST_ALL_TAB : tabId;
+/**
+ * The cache a list fetch fills: the tab the caller named, else the active tab's
+ * source. The reducer and the epic both resolve it, so they agree on the tab.
+ */
+export const invoicingListFetchTab = (activeTab, requestedTab, clientFilteredTabIds = []) => requestedTab ?? invoicingListSourceTab(activeTab, clientFilteredTabIds);
+/** The `status` query param for a source tab; `all` sends none. */
+export const invoicingListStatusParam = (sourceTab) => sourceTab === INVOICING_LIST_ALL_TAB ? undefined : sourceTab;
+/**
+ * Whether two list queries match, so their per-tab caches stay valid. A filter
+ * left unset and one cleared to `''` are the same query.
+ */
+export const isSameInvoicingListQuery = (a, b) => {
+    const aFilters = a.filters;
+    const bFilters = b.filters;
+    const keys = new Set([...Object.keys(aFilters), ...Object.keys(bFilters)]);
+    return ([...keys].every((key) => (aFilters[key] ?? '') === (bFilters[key] ?? '')) &&
+        a.sort?.field === b.sort?.field &&
+        a.sort?.dir === b.sort?.dir);
+};
+/**
+ * Fetch a tab that is empty or failed; top up one that holds less than a page
+ * while the server says there is more; leave a full or complete one cached.
+ * Runs on page/tab visits only, so a server returning short pages cannot loop.
+ */
+export function planInvoicingListTabFetch(tab, cacheOverride) {
+    if (cacheOverride) {
+        return { kind: 'firstPage' };
+    }
+    if (tab.fetchState === 'In-Progress') {
+        return { kind: 'none' };
+    }
+    if (tab.fetchState !== 'Completed') {
+        return { kind: 'firstPage' };
+    }
+    if (tab.ids.length < INVOICING_LIST_PAGE_SIZE && tab.nextCursor != null) {
+        return { cursor: tab.nextCursor, kind: 'nextPage' };
+    }
+    return { kind: 'none' };
+}
+const tabFor = (byTab, tabId) => {
+    byTab[tabId] ?? (byTab[tabId] = { ...NOT_STARTED_TAB, ids: [] });
+    return byTab[tabId];
+};
+export function startInvoicingListTabFetch(byTab, tabId, keepExistingListItems) {
+    const tab = tabFor(byTab, tabId);
+    if (!keepExistingListItems) {
+        tab.ids = [];
+        tab.nextCursor = null;
+    }
+    tab.fetchState = 'In-Progress';
+    tab.error = undefined;
+}
+export function completeInvoicingListTabFetch(byTab, tabId, page) {
+    const tab = tabFor(byTab, tabId);
+    tab.ids = page.keepExistingListItems
+        ? [...new Set([...tab.ids, ...page.ids])]
+        : page.ids;
+    tab.nextCursor = page.nextCursor;
+    tab.fetchState = 'Completed';
+    tab.error = undefined;
+}
+export function failInvoicingListTabFetch(byTab, tabId, error) {
+    const tab = tabFor(byTab, tabId);
+    tab.fetchState = 'Error';
+    tab.error = error;
+}
+/**
+ * A created record leads `all` and, when its status is known, that status's
+ * tab if already loaded. Returns false when `all` already had it.
+ */
+export function addToInvoicingListTabs(byTab, id, status) {
+    const all = tabFor(byTab, INVOICING_LIST_ALL_TAB);
+    if (all.ids.includes(id)) {
+        return false;
+    }
+    all.ids = [id, ...all.ids];
+    const statusTab = status != null ? byTab[status] : undefined;
+    if (statusTab != null && !statusTab.ids.includes(id)) {
+        statusTab.ids = [id, ...statusTab.ids];
+    }
+    return true;
+}

package/lib/esm/view/invoicing/invoicingOverview/epics/fetchInvoicingOverviewEpic.js

@@ -1,7 +1,7 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { INVOICING_LIST_ALL_TAB, getInvoicingListTab, } from '../../invoicingListTabCache';
 import { fetchInvoicingSubscriptionList } from '../../invoicingSubscriptionListView/invoicingSubscriptionListViewReducer';
-import { getInvoicingSubscriptionListView } from '../../invoicingSubscriptionListView/invoicingSubscriptionListViewSelector';
 import { fetchInvoicingSettings } from '../../settingsView/settingsViewReducer';
 import { getInvoicingSettingsFetchState } from '../../settingsView/settingsViewSelector';
 import { fetchInvoicingOverview, fetchInvoicingOverviewChurn, fetchInvoicingOverviewDashboardSummary, fetchInvoicingOverviewKPIs, fetchInvoicingOverviewMRR, fetchInvoicingOverviewPlanRevenue, fetchInvoicingOverviewRevenue, } from '../invoicingOverviewReducer';
@@ -44,12 +44,9 @@ export const fetchInvoicingOverviewEpic = (actions$, state$) => actions$.pipe(fi
     if (shouldFetch(getInvoicingSettingsFetchState(rootState), cacheOverride)) {
         overviewActions.push(fetchInvoicingSettings());
     }
-    const subscriptionListView = getInvoicingSubscriptionListView(rootState);
-    if (shouldFetch({
-        fetchState: subscriptionListView.fetchState,
-        error: subscriptionListView.error,
-    }, cacheOverride)) {
-        overviewActions.push(fetchInvoicingSubscriptionList({}));
+    const subscriptionsTab = getInvoicingListTab(rootState.invoicingSubscriptionListViewState.byTab, INVOICING_LIST_ALL_TAB);
+    if (shouldFetch(subscriptionsTab, cacheOverride)) {
+        overviewActions.push(fetchInvoicingSubscriptionList({ tabId: INVOICING_LIST_ALL_TAB }));
     }
     return concat(from(overviewActions));
 }));

package/lib/esm/view/invoicing/invoicingOverview/invoicingOverviewSelector.js

@@ -1,5 +1,6 @@
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
-import { getInvoicingSubscriptionListView } from '../invoicingSubscriptionListView/invoicingSubscriptionListViewSelector';
+import { getInvoicingSubscriptionsByIds } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
+import { INVOICING_LIST_ALL_TAB, getInvoicingListTab, } from '../invoicingListTabCache';
 import { getInvoicingSettings, getInvoicingSettingsFetchState, } from '../settingsView/settingsViewSelector';
 const PERIOD_OPTION_MONTHS = 12;
 function daysInMonth(year, month) {
@@ -25,10 +26,12 @@ export function buildPeriodOptions() {
 export const getInvoicingOverview = (state) => {
     const overview = state.invoicingOverviewState;
     const settingsFetchState = getInvoicingSettingsFetchState(state);
-    const subscriptionListView = getInvoicingSubscriptionListView(state);
+    // The overview waits on the unfiltered `all` subscriptions, not the tab the
+    // subscriptions list was left on.
+    const subscriptionsTab = getInvoicingListTab(state.invoicingSubscriptionListViewState.byTab, INVOICING_LIST_ALL_TAB);
     const subscriptionListFetchState = {
-        fetchState: subscriptionListView.fetchState,
-        error: subscriptionListView.error,
+        fetchState: subscriptionsTab.fetchState,
+        error: subscriptionsTab.error,
     };
     const reducedFetchState = reduceAllFetchState([
         overview.kpisFetchState,
@@ -56,7 +59,7 @@ export const getInvoicingOverview = (state) => {
             fetchState: settingsFetchState,
         },
         subscriptionList: {
-            data: subscriptionListView.subscriptions,
+            data: getInvoicingSubscriptionsByIds(state.invoicingSubscriptionState, subscriptionsTab.ids),
             fetchState: subscriptionListFetchState,
         },
         ...reducedFetchState,