@zeniai/client-epic-state 5.2.78 → 5.2.79

package/lib/esm/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListEpic.js

@@ -1,13 +1,17 @@
 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 { extractInvoicingSubscriptionAddresses } from '../../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionPayload';
 import { updateInvoicingSubscriptions } from '../../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../../invoicingListTabCache';
 import { fetchInvoicingSubscriptionList, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, } from '../invoicingSubscriptionListViewReducer';
-const buildQuery = (filters, cursor, sort) => {
+const buildQuery = (filters, cursor, sort, status) => {
     const params = new URLSearchParams();
+    if (status != null) {
+        params.set('status', status);
+    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }
@@ -27,10 +31,18 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSubscriptionList.match), switchMap((action) => {
+export const fetchInvoicingSubscriptionListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSubscriptionList.match), map((action) => ({
+    action,
+    tabId: invoicingListFetchTab(state$.value.invoicingSubscriptionListViewState.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/subscriptions`, buildQuery(filters, cursor, sort));
-    return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
+    return zeniAPI
+        .getJSON(apiUrl)
+        .pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
             return [
@@ -40,10 +52,17 @@ export const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) =
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingSubscriptionListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingSubscriptionListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingSubscriptionListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingSubscriptionListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

package/lib/esm/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListPageEpic.js

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

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewReducer.js

@@ -1,17 +1,12 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { addToInvoicingListTabs, 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 invoicingSubscriptionListView = createSlice({
     name: 'invoicingSubscriptionListView',
@@ -19,14 +14,9 @@ const invoicingSubscriptionListView = createSlice({
     reducers: {
         fetchInvoicingSubscriptionList: {
             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 invoicingSubscriptionListView = createSlice({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingSubscriptionListPage: {
             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 invoicingSubscriptionListView = createSlice({
             },
         },
         updateInvoicingSubscriptionList(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);
         },
         updateInvoicingSubscriptionListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingSubscriptionCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -82,8 +71,8 @@ const invoicingSubscriptionListView = createSlice({
         updateInvoicingSubscriptionFilters(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.
         setInvoicingSubscriptionActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },
@@ -92,10 +81,9 @@ const invoicingSubscriptionListView = createSlice({
         // doubles as the per-tab count key (tab ids mirror InvoicingSubscriptionStatus).
         addInvoicingSubscriptionToList(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/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingSubscriptionsByIds } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
+import { getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
 import { runningInvoicingActionId } from '../runningInvoicingActionId';
 import { ALL_INVOICING_SUBSCRIPTION_TAB_IDS, INVOICING_SUBSCRIPTION_COLUMNS, } from './invoicingSubscriptionListViewState';
@@ -12,20 +13,16 @@ import { ALL_INVOICING_SUBSCRIPTION_TAB_IDS, INVOICING_SUBSCRIPTION_COLUMNS, } f
  */
 export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (state) => state.invoicingConfigViewState.subscriptionStatusOptions, (state) => state.invoicingConfigViewState, (state) => state.editInvoicingSubscriptionDetailViewState.actionStateById, (subscriptionState, listViewState, statusOptions, configState, actionStateById) => {
     const { activeTab } = listViewState;
-    const allSubscriptions = getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything).
-    const subscriptions = activeTab === 'all'
-        ? allSubscriptions
-        : allSubscriptions.filter((subscription) => subscription.status === activeTab);
+    const tab = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab));
+    const subscriptions = getInvoicingSubscriptionsByIds(subscriptionState, tab.ids);
     return {
         runningActionId: runningInvoicingActionId(actionStateById),
         activeTab,
         columns: INVOICING_SUBSCRIPTION_COLUMNS,
         subscriptions,
-        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,

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

@@ -10,11 +10,14 @@ export declare const fetchInvoicingCouponList: import("@reduxjs/toolkit").Action
     filters?: InvoicingCouponFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingCouponFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingCouponView/fetchInvoicingCouponList", never, never>, fetchInvoicingCouponListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingCouponFilters;
@@ -27,7 +30,11 @@ 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">, setInvoicingCouponActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "inactive" | "all", "invoicingCouponView/setInvoicingCouponActiveTab">, addInvoicingCouponToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    tabId: string;
+}, "invoicingCouponView/updateInvoicingCouponList">, updateInvoicingCouponListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "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">;

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

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
+const couponViewState_1 = require("./couponViewState");
 // The discounts-list tabs look up counts by tab id ('active' / 'inactive'),
 // while a coupon's status is 'active' | 'expired' | 'archived'. Collapse the
 // non-active statuses onto the 'inactive' tab; a newly created coupon with no
@@ -12,17 +14,11 @@ function couponStatusToTabCountKey(status) {
     return status == null || status === 'active' ? 'active' : 'inactive';
 }
 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 couponView = (0, toolkit_1.createSlice)({
     name: 'invoicingCouponView',
@@ -30,14 +26,9 @@ const couponView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingCouponList: {
             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, couponViewState_1.INVOICING_COUPON_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 {
@@ -46,12 +37,17 @@ const couponView = (0, toolkit_1.createSlice)({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingCouponListPage: {
             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;
             },
@@ -66,16 +62,10 @@ const couponView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingCouponList(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);
         },
         updateInvoicingCouponListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCouponCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -93,8 +83,8 @@ 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.
+        // 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.
         setInvoicingCouponActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },
@@ -103,10 +93,9 @@ const couponView = (0, toolkit_1.createSlice)({
         // the same id/counts, so only creates dispatch this.
         addInvoicingCouponToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.ids.includes(id)) {
+            if (!(0, invoicingListTabCache_1.addToInvoicingListTabs)(draft.byTab, id, couponStatusToTabCountKey(status))) {
                 return;
             }
-            draft.ids = [id, ...draft.ids];
             draft.counts.all += 1;
             const tabCountKey = couponStatusToTabCountKey(status);
             draft.counts[tabCountKey] = (draft.counts[tabCountKey] ?? 0) + 1;

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

@@ -2,21 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingCouponListView = exports.getInvoicingCouponCounts = exports.getInvoicingCouponListFilters = exports.getInvoicingCouponListHasMore = exports.getInvoicingCouponListNextCursor = exports.getInvoicingCouponListFetchState = exports.getInvoicingCouponListItems = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const invoicingTabHelper_1 = require("../invoicingTabHelper");
 const runningInvoicingActionId_1 = require("../runningInvoicingActionId");
 const couponViewState_1 = require("./couponViewState");
-const getInvoicingCouponListItems = (state) => state.invoicingCouponViewState.ids
-    .map((id) => state.invoicingCouponState.couponByID[id])
+// These read the unfiltered `all` cache, so a picker never narrows to
+// whichever tab the discounts list was left on.
+const allCouponsTab = (state) => (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCouponViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB);
+const getInvoicingCouponListItems = (state) => allCouponsTab(state)
+    .ids.map((id) => state.invoicingCouponState.couponByID[id])
     .filter((item) => item != null);
 exports.getInvoicingCouponListItems = getInvoicingCouponListItems;
 const getInvoicingCouponListFetchState = (state) => ({
-    fetchState: state.invoicingCouponViewState.fetchState,
-    error: state.invoicingCouponViewState.error,
+    fetchState: allCouponsTab(state).fetchState,
+    error: allCouponsTab(state).error,
 });
 exports.getInvoicingCouponListFetchState = getInvoicingCouponListFetchState;
-const getInvoicingCouponListNextCursor = (state) => state.invoicingCouponViewState.nextCursor;
+const getInvoicingCouponListNextCursor = (state) => allCouponsTab(state).nextCursor;
 exports.getInvoicingCouponListNextCursor = getInvoicingCouponListNextCursor;
-const getInvoicingCouponListHasMore = (state) => state.invoicingCouponViewState.nextCursor != null;
+const getInvoicingCouponListHasMore = (state) => allCouponsTab(state).nextCursor != null;
 exports.getInvoicingCouponListHasMore = getInvoicingCouponListHasMore;
 const getInvoicingCouponListFilters = (state) => state.invoicingCouponViewState.filters;
 exports.getInvoicingCouponListFilters = getInvoicingCouponListFilters;
@@ -30,20 +34,15 @@ exports.getInvoicingCouponCounts = getInvoicingCouponCounts;
  */
 exports.getInvoicingCouponListView = (0, toolkit_1.createSelector)((state) => state.invoicingCouponState, (state) => state.invoicingCouponViewState, (state) => state.invoicingConfigViewState.discountStatusOptions, (state) => state.invoicingConfigViewState.discountLifecycleActionOptions, (state) => state.editInvoicingCouponDetailViewState.actionStateById, (couponState, listViewState, statusOptions, discountLifecycleActionOptions, actionStateById) => {
     const { activeTab } = listViewState;
-    const allCoupons = listViewState.ids
+    const tab = (0, invoicingListTabCache_1.getInvoicingListTab)(listViewState.byTab, (0, invoicingListTabCache_1.invoicingListSourceTab)(activeTab, couponViewState_1.INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS));
+    const tabRows = tab.ids
         .map((id) => couponState.couponByID[id])
         .filter((item) => item != null);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side. 'all' shows everything and 'inactive' is the
-    // FE-derived composite of every non-active status (undefined included);
-    // every other tab is a real backend status and matches exactly — without
-    // that, config-supplied tabs like `expired` and `archived` would each show
-    // the whole non-active set.
-    const coupons = activeTab === 'all'
-        ? allCoupons
-        : activeTab === 'inactive'
-            ? allCoupons.filter((coupon) => coupon.status !== 'active')
-            : allCoupons.filter((coupon) => coupon.status === activeTab);
+    // `inactive` groups every non-active status, which the list API cannot
+    // filter on, so it is the `all` rows filtered here.
+    const coupons = activeTab === 'inactive'
+        ? tabRows.filter((coupon) => coupon.status !== 'active')
+        : tabRows;
     return {
         activeTab,
         columns: couponViewState_1.INVOICING_COUPON_COLUMNS,
@@ -51,7 +50,7 @@ exports.getInvoicingCouponListView = (0, toolkit_1.createSelector)((state) => st
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
-        nextCursor: listViewState.nextCursor,
+        nextCursor: tab.nextCursor,
         discountLifecycleActionOptions,
         statusOptions,
         tabIds: (0, invoicingTabHelper_1.invoicingTabIdsFromConfig)({
@@ -60,8 +59,8 @@ exports.getInvoicingCouponListView = (0, toolkit_1.createSelector)((state) => st
             statusOptions,
         }),
         runningActionId: (0, runningInvoicingActionId_1.runningInvoicingActionId)(actionStateById),
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
+        fetchState: tab.fetchState,
+        error: tab.error,
         sort: listViewState.sort,
         version: 1.0,
     };

package/lib/view/invoicing/couponView/couponViewState.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 InvoicingCouponFilters {
     search?: string;
 }
@@ -22,13 +23,15 @@ export declare const INVOICING_COUPON_COLUMNS: InvoicingCouponColumnConfig[];
 export declare const ALL_INVOICING_COUPON_TAB_IDS: readonly ["all", "active", "inactive"];
 export declare const toInvoicingCouponTabId: (v: string) => "active" | "inactive" | "all";
 export type InvoicingCouponTabId = ReturnType<typeof toInvoicingCouponTabId>;
-export interface InvoicingCouponViewState extends FetchedState {
+export interface InvoicingCouponViewState {
     /** Selected status tab (CES-owned so it persists across page revisits). */
     activeTab: InvoicingCouponTabId;
+    /** Per-tab rows, cursor and fetch state; each tab is its own `?status=` query. */
+    byTab: InvoicingListByTab;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingCouponFilters;
-    ids: ID[];
-    nextCursor: string | null;
     sort?: InvoicingListSort;
 }
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+export declare const INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS: readonly InvoicingCouponTabId[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toInvoicingCouponTabId = exports.ALL_INVOICING_COUPON_TAB_IDS = exports.INVOICING_COUPON_COLUMNS = exports.toInvoicingCouponSortKey = exports.ALL_INVOICING_COUPON_SORT_KEYS = void 0;
+exports.INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS = exports.toInvoicingCouponTabId = exports.ALL_INVOICING_COUPON_TAB_IDS = exports.INVOICING_COUPON_COLUMNS = exports.toInvoicingCouponSortKey = exports.ALL_INVOICING_COUPON_SORT_KEYS = void 0;
 const stringToUnion_1 = require("../../../commonStateTypes/stringToUnion");
 exports.ALL_INVOICING_COUPON_SORT_KEYS = [
     'code',
@@ -33,3 +33,5 @@ exports.ALL_INVOICING_COUPON_TAB_IDS = [
 ];
 const toInvoicingCouponTabId = (v) => (0, stringToUnion_1.stringToUnion)(v, exports.ALL_INVOICING_COUPON_TAB_IDS);
 exports.toInvoicingCouponTabId = toInvoicingCouponTabId;
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+exports.INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS = ['inactive'];

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

@@ -5,4 +5,4 @@ import { RootState } from '../../../rootStateTypes';
 import { ZeniAPI } from '../../../zeniAPI';
 import { fetchInvoicingCouponCounts, fetchInvoicingCouponList, fetchInvoicingCouponListPage, updateInvoicingCouponCounts, updateInvoicingCouponCountsFailure, updateInvoicingCouponList, updateInvoicingCouponListFailure } from './couponViewReducer';
 export type ActionType = ReturnType<typeof fetchInvoicingCouponList> | ReturnType<typeof fetchInvoicingCouponListPage> | ReturnType<typeof fetchInvoicingCouponCounts> | ReturnType<typeof updateInvoicingCouponList> | ReturnType<typeof updateInvoicingCouponListFailure> | ReturnType<typeof updateInvoicingCouponCounts> | ReturnType<typeof updateInvoicingCouponCountsFailure> | ReturnType<typeof updateInvoicingCoupons>;
-export declare const fetchInvoicingCouponListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoicingCouponListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

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

@@ -6,13 +6,18 @@ const operators_1 = require("rxjs/operators");
 const couponReducer_1 = require("../../../entity/invoicing/coupon/couponReducer");
 const responsePayload_1 = require("../../../responsePayload");
 const invoicingApiHelper_1 = require("../invoicingApiHelper");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const couponViewReducer_1 = require("./couponViewReducer");
+const couponViewState_1 = require("./couponViewState");
 /**
  * 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).
  */
-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);
     }
@@ -23,9 +28,15 @@ const buildQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoicingCouponListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(couponViewReducer_1.fetchInvoicingCouponList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoicingCouponListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(couponViewReducer_1.fetchInvoicingCouponList.match), (0, operators_1.map)((action) => ({
+    action,
+    tabId: (0, invoicingListTabCache_1.invoicingListFetchTab)(state$.value.invoicingCouponViewState.activeTab, action.payload.tabId, couponViewState_1.INVOICING_COUPON_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/discounts`, buildQuery(filters, cursor, sort));
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/discounts`, 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 ?? [];
@@ -35,11 +46,18 @@ const fetchInvoicingCouponListEpic = (actions$, _state$, zeniAPI) => actions$.pi
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return (0, rxjs_1.of)((0, couponViewReducer_1.updateInvoicingCouponListFailure)(response.status));
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, couponViewReducer_1.updateInvoicingCouponListFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch discount list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return (0, rxjs_1.of)((0, couponViewReducer_1.updateInvoicingCouponListFailure)({
+            status: response.status,
+            tabId,
+        }));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, couponViewReducer_1.updateInvoicingCouponListFailure)({
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch discount list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));
 exports.fetchInvoicingCouponListEpic = fetchInvoicingCouponListEpic;

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchInvoicingCouponListPageEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const couponViewReducer_1 = require("./couponViewReducer");
+const couponViewState_1 = require("./couponViewState");
 /**
  * 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).
@@ -15,8 +17,20 @@ const fetchInvoicingCouponListPageEpic = (actions$, state$) => actions$.pipe((0,
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingCouponViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push((0, couponViewReducer_1.fetchInvoicingCouponList)({ filters, sort }));
+    const tabId = (0, invoicingListTabCache_1.invoicingListSourceTab)(state.activeTab, couponViewState_1.INVOICING_COUPON_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, couponViewReducer_1.fetchInvoicingCouponList)({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push((0, couponViewReducer_1.fetchInvoicingCouponList)({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push((0, couponViewReducer_1.fetchInvoicingCouponCounts)());