@zeniai/client-epic-state 5.2.78 → 5.2.79

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

@@ -1,5 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { addToInvoicingListTabs, completeInvoicingListTabFetch, failInvoicingListTabFetch, invoicingListFetchTab, isSameInvoicingListQuery, startInvoicingListTabFetch, } from '../invoicingListTabCache';
+import { INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS, } from './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
@@ -8,17 +10,11 @@ function couponStatusToTabCountKey(status) {
     return status == null || status === 'active' ? 'active' : 'inactive';
 }
 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 couponView = createSlice({
     name: 'invoicingCouponView',
@@ -26,14 +22,9 @@ const couponView = createSlice({
     reducers: {
         fetchInvoicingCouponList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                startInvoicingListTabFetch(draft.byTab, invoicingListFetchTab(draft.activeTab, action.payload.tabId, 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 {
@@ -42,12 +33,17 @@ const couponView = 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 (!isSameInvoicingListQuery(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -62,16 +58,10 @@ const couponView = 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;
+            completeInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingCouponListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCouponCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -89,8 +79,8 @@ const couponView = 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;
         },
@@ -99,10 +89,9 @@ const couponView = createSlice({
         // the same id/counts, so only creates dispatch this.
         addInvoicingCouponToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.ids.includes(id)) {
+            if (!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/esm/view/invoicing/couponView/couponViewSelector.js

@@ -1,16 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { INVOICING_LIST_ALL_TAB, getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
 import { runningInvoicingActionId } from '../runningInvoicingActionId';
-import { ALL_INVOICING_COUPON_TAB_IDS, INVOICING_COUPON_COLUMNS, } from './couponViewState';
-export const getInvoicingCouponListItems = (state) => state.invoicingCouponViewState.ids
-    .map((id) => state.invoicingCouponState.couponByID[id])
+import { ALL_INVOICING_COUPON_TAB_IDS, INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS, INVOICING_COUPON_COLUMNS, } from './couponViewState';
+// These read the unfiltered `all` cache, so a picker never narrows to
+// whichever tab the discounts list was left on.
+const allCouponsTab = (state) => getInvoicingListTab(state.invoicingCouponViewState.byTab, INVOICING_LIST_ALL_TAB);
+export const getInvoicingCouponListItems = (state) => allCouponsTab(state)
+    .ids.map((id) => state.invoicingCouponState.couponByID[id])
     .filter((item) => item != null);
 export const getInvoicingCouponListFetchState = (state) => ({
-    fetchState: state.invoicingCouponViewState.fetchState,
-    error: state.invoicingCouponViewState.error,
+    fetchState: allCouponsTab(state).fetchState,
+    error: allCouponsTab(state).error,
 });
-export const getInvoicingCouponListNextCursor = (state) => state.invoicingCouponViewState.nextCursor;
-export const getInvoicingCouponListHasMore = (state) => state.invoicingCouponViewState.nextCursor != null;
+export const getInvoicingCouponListNextCursor = (state) => allCouponsTab(state).nextCursor;
+export const getInvoicingCouponListHasMore = (state) => allCouponsTab(state).nextCursor != null;
 export const getInvoicingCouponListFilters = (state) => state.invoicingCouponViewState.filters;
 export const getInvoicingCouponCounts = (state) => state.invoicingCouponViewState.counts;
 /**
@@ -21,20 +25,15 @@ export const getInvoicingCouponCounts = (state) => state.invoicingCouponViewStat
  */
 export const getInvoicingCouponListView = 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 = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab, 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: INVOICING_COUPON_COLUMNS,
@@ -42,7 +41,7 @@ export const getInvoicingCouponListView = createSelector((state) => state.invoic
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
-        nextCursor: listViewState.nextCursor,
+        nextCursor: tab.nextCursor,
         discountLifecycleActionOptions,
         statusOptions,
         tabIds: invoicingTabIdsFromConfig({
@@ -51,8 +50,8 @@ export const getInvoicingCouponListView = createSelector((state) => state.invoic
             statusOptions,
         }),
         runningActionId: runningInvoicingActionId(actionStateById),
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
+        fetchState: tab.fetchState,
+        error: tab.error,
         sort: listViewState.sort,
         version: 1.0,
     };

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

@@ -28,3 +28,5 @@ export const ALL_INVOICING_COUPON_TAB_IDS = [
     'inactive',
 ];
 export const toInvoicingCouponTabId = (v) => stringToUnion(v, ALL_INVOICING_COUPON_TAB_IDS);
+/** Tabs the list API cannot filter on: they read the `all` rows, filtered here. */
+export const INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS = ['inactive'];

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

@@ -1,15 +1,20 @@
 import { of } from 'rxjs';
-import { catchError, filter, switchMap } from 'rxjs/operators';
+import { catchError, filter, groupBy, map, mergeMap, switchMap, } from 'rxjs/operators';
 import { updateInvoicingCoupons } from '../../../entity/invoicing/coupon/couponReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../invoicingListTabCache';
 import { fetchInvoicingCouponList, updateInvoicingCouponList, updateInvoicingCouponListFailure, } from './couponViewReducer';
+import { INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS, } from './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);
     }
@@ -20,9 +25,15 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingCouponListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCouponList.match), switchMap((action) => {
+export const fetchInvoicingCouponListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCouponList.match), map((action) => ({
+    action,
+    tabId: invoicingListFetchTab(state$.value.invoicingCouponViewState.activeTab, action.payload.tabId, 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.
+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/discounts`, buildQuery(filters, cursor, sort));
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/discounts`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
@@ -32,10 +43,17 @@ export const fetchInvoicingCouponListEpic = (actions$, _state$, zeniAPI) => acti
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingCouponListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingCouponListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch discount list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingCouponListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingCouponListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch discount list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

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

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

package/lib/esm/view/invoicing/createInvoice/createInvoiceSelector.js

@@ -1,8 +1,9 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { invoicingPricePointDisplayAmount } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { invoicingFieldHelpForGroup } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
+import { getInvoicingAllCustomers } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
 import { getInvoicingSettings } from '../settingsView/settingsViewSelector';
 /**
  * Pricing models whose single-unit amount is a true per-unit rate — the only
@@ -30,6 +31,25 @@ const hasPerUnitRate = (pricingModel) => pricingModel == null ||
 const planNamePrefillPrice = (pricePoint) => hasPerUnitRate(pricePoint.pricingModel)
     ? invoicingPricePointDisplayAmount(pricePoint)?.amount
     : undefined;
+/**
+ * Plans, add-ons and one-time charges, one option per price point. Memoized on
+ * the catalog list view so the options keep their identity while the form draft
+ * changes on every keystroke.
+ */
+const getCreateInvoicePlanNames = createSelector(getInvoicingCatalogListView, (catalogListView) => [...catalogListView.plans, ...catalogListView.products].flatMap((item) => (item.subFamilies ?? [])
+    .filter((subFamily) => (subFamily.name ?? '') !== '')
+    .map((subFamily) => ({
+    // A price point with no flag is taxable, as subscription billing reads it.
+    catalogLine: {
+        entityId: subFamily.id,
+        // The item's kind is `type`; `itemType` is set on its price points.
+        entityType: item.type ?? subFamily.itemType ?? 'plan',
+        isTaxed: subFamily.isTaxable ?? true,
+    },
+    planName: item.name ?? '',
+    price: planNamePrefillPrice(subFamily),
+    subFamilyName: subFamily.name ?? '',
+}))));
 /**
  * Display name for a customer option: company, else the full name, else the
  * email, else the raw id.
@@ -61,7 +81,7 @@ export const getCreateInvoiceFormView = (state) => {
     const catalogListView = getInvoicingCatalogListView(state);
     return {
         fieldHelp: invoicingFieldHelpForGroup(state, 'invoice'),
-        customers: getInvoicingCustomerListView(state).customers.map((customer) => ({
+        customers: getInvoicingAllCustomers(state).map((customer) => ({
             billingAddress: customer.billingAddressId != null
                 ? getAddressByAddressId(state.addressState, customer.billingAddressId)
                 : undefined,
@@ -70,19 +90,7 @@ export const getCreateInvoiceFormView = (state) => {
             name: customerDisplayName(customer),
         })),
         localData: createInvoiceState.formDraft,
-        planNames: catalogListView.plans.flatMap((plan) => (plan.subFamilies ?? [])
-            .filter((subFamily) => (subFamily.name ?? '') !== '')
-            .map((subFamily) => ({
-            // A price point with no flag is taxable, as subscription billing reads it.
-            catalogLine: {
-                entityId: subFamily.id,
-                entityType: plan.itemType ?? 'plan',
-                isTaxed: subFamily.isTaxable ?? true,
-            },
-            planName: plan.name ?? '',
-            price: planNamePrefillPrice(subFamily),
-            subFamilyName: subFamily.name ?? '',
-        }))),
+        planNames: getCreateInvoicePlanNames(state),
         products: getInvoicingCatalogPrices(catalogListView.products),
         savedInvoiceId: createInvoiceState.createdInvoiceId,
         settings: getInvoicingSettings(state),

package/lib/esm/view/invoicing/createInvoice/epics/fetchCreateInvoiceFormPageEpic.js

@@ -2,6 +2,7 @@ import { from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { fetchInvoicingCatalogPlanList, fetchInvoicingCatalogProductList, } from '../../invoicingCatalogListView/invoicingCatalogListViewReducer';
 import { fetchInvoicingCustomerList } from '../../invoicingCustomerListView/invoicingCustomerListViewReducer';
+import { INVOICING_LIST_ALL_TAB, getInvoicingListTab, } from '../../invoicingListTabCache';
 import { fetchInvoicingSettings } from '../../settingsView/settingsViewReducer';
 import { fetchCreateInvoiceFormPage } from '../createInvoiceReducer';
 /**
@@ -21,14 +22,16 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 export const fetchCreateInvoiceFormPageEpic = (actions$, state$) => actions$.pipe(filter(fetchCreateInvoiceFormPage.match), mergeMap((action) => {
     const { cacheOverride } = action.payload;
     const state = state$.value;
-    const customerState = state.invoicingCustomerListViewState;
+    // The customer picker reads the unfiltered `all` cache.
+    const customerTab = getInvoicingListTab(state.invoicingCustomerListViewState.byTab, INVOICING_LIST_ALL_TAB);
     const catalogState = state.invoicingCatalogListViewState;
     const settingsState = state.invoicingSettingsViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: customerState.fetchState, error: customerState.error }, cacheOverride)) {
+    if (shouldFetch({ fetchState: customerTab.fetchState, error: customerTab.error }, cacheOverride)) {
         pageActions.push(fetchInvoicingCustomerList({
             filters: {},
             keepExistingListItems: false,
+            tabId: INVOICING_LIST_ALL_TAB,
         }));
     }
     if (shouldFetch({ fetchState: catalogState.fetchState, error: catalogState.error }, cacheOverride)) {

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewSelector.js

@@ -5,7 +5,7 @@ import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
+import { getInvoicingAllCustomers } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
 import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
@@ -280,7 +280,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
         addons: catalogItemOptionsOfType('addon'),
         charges: catalogItemOptionsOfType('charge'),
         coupons: getInvoicingCouponListItems(state).map(toInvoicingCouponOption),
-        customers: getInvoicingCustomerListView(state).customers.map(toInvoicingCustomerOption),
+        customers: getInvoicingAllCustomers(state).map(toInvoicingCustomerOption),
         localData,
         mode,
         plans: planPrices.map(toInvoicingPlanOption),

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/fetchInvoicingSubscriptionDetailPageEpic.js

@@ -1,8 +1,10 @@
 import { EMPTY, from } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
 import { fetchInvoicingCouponList } from '../couponView/couponViewReducer';
+import { getInvoicingCouponListFetchState } from '../couponView/couponViewSelector';
 import { fetchInvoicingCatalogPlanList } from '../invoicingCatalogListView/invoicingCatalogListViewReducer';
 import { fetchInvoicingConfig } from '../invoicingConfigView/invoicingConfigViewReducer';
+import { INVOICING_LIST_ALL_TAB } from '../invoicingListTabCache';
 import { fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, } from './editInvoicingSubscriptionDetailViewReducer';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -47,12 +49,13 @@ export const fetchInvoicingSubscriptionDetailPageEpic = (actions$, state$) => ac
             keepExistingListItems: false,
         }));
     }
-    const couponListState = state.invoicingCouponViewState;
-    if (shouldFetch({
-        error: couponListState.error,
-        fetchState: couponListState.fetchState,
-    }, cacheOverride)) {
-        pageActions.push(fetchInvoicingCouponList({ filters: {}, keepExistingListItems: false }));
+    // The coupon picker reads the unfiltered `all` cache.
+    if (shouldFetch(getInvoicingCouponListFetchState(state), cacheOverride)) {
+        pageActions.push(fetchInvoicingCouponList({
+            filters: {},
+            keepExistingListItems: false,
+            tabId: INVOICING_LIST_ALL_TAB,
+        }));
     }
     return pageActions.length > 0 ? from(pageActions) : EMPTY;
 }));

package/lib/esm/view/invoicing/invoicingCreditNoteListView/epics/fetchInvoicingCreditNoteListEpic.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 { updateInvoicingCreditNotes } from '../../../../entity/invoicing/creditNote/creditNoteReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../../invoicingListTabCache';
 import { fetchInvoicingCreditNoteList, updateInvoicingCreditNoteList, updateInvoicingCreditNoteListFailure, } from '../invoicingCreditNoteListViewReducer';
-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);
     }
@@ -19,9 +23,15 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingCreditNoteListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCreditNoteList.match), switchMap((action) => {
+export const fetchInvoicingCreditNoteListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCreditNoteList.match), map((action) => ({
+    action,
+    tabId: invoicingListFetchTab(state$.value.invoicingCreditNoteListViewState.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/credits`, buildQuery(filters, cursor, sort));
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/credits`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
@@ -31,10 +41,17 @@ export const fetchInvoicingCreditNoteListEpic = (actions$, _state$, zeniAPI) =>
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingCreditNoteListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingCreditNoteListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch credit note list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingCreditNoteListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingCreditNoteListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch credit note list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

package/lib/esm/view/invoicing/invoicingCreditNoteListView/epics/fetchInvoicingCreditNoteListPageEpic.js

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

package/lib/esm/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewReducer.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 invoicingCreditNoteListView = createSlice({
     name: 'invoicingCreditNoteListView',
@@ -19,14 +14,9 @@ const invoicingCreditNoteListView = createSlice({
     reducers: {
         fetchInvoicingCreditNoteList: {
             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 invoicingCreditNoteListView = createSlice({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingCreditNoteListPage: {
             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 invoicingCreditNoteListView = createSlice({
             },
         },
         updateInvoicingCreditNoteList(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);
         },
         updateInvoicingCreditNoteListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCreditNoteCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -82,8 +71,8 @@ const invoicingCreditNoteListView = createSlice({
         updateInvoicingCreditNoteFilters(draft, action) {
             draft.filters = action.payload;
         },
-        // Select a status tab. The list API ignores `status` (returns all statuses),
-        // so the selector filters rows to this tab client-side — no refetch needed.
+        // 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.
         setInvoicingCreditNoteActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },

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

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingCreditNotesByIds } from '../../../entity/invoicing/creditNote/creditNoteSelector';
+import { getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
 import { ALL_INVOICING_CREDIT_NOTE_TAB_IDS, INVOICING_CREDIT_NOTE_COLUMNS, } from './invoicingCreditNoteListViewState';
 /**
@@ -9,12 +10,8 @@ import { ALL_INVOICING_CREDIT_NOTE_TAB_IDS, INVOICING_CREDIT_NOTE_COLUMNS, } fro
  */
 export const getInvoicingCreditNoteListView = createSelector((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (state) => state.invoicingConfigViewState.creditNoteStatusOptions, (state) => state.invoicingConfigViewState.creditNoteTypeOptions, (creditNoteState, listViewState, statusOptions, typeOptions) => {
     const { activeTab } = listViewState;
-    const allCreditNotes = getInvoicingCreditNotesByIds(creditNoteState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything).
-    const creditNotes = activeTab === 'all'
-        ? allCreditNotes
-        : allCreditNotes.filter((creditNote) => creditNote.status === activeTab);
+    const tab = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab));
+    const creditNotes = getInvoicingCreditNotesByIds(creditNoteState, tab.ids);
     return {
         activeTab,
         columns: INVOICING_CREDIT_NOTE_COLUMNS,
@@ -22,15 +19,15 @@ export const getInvoicingCreditNoteListView = createSelector((state) => state.in
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
-        nextCursor: listViewState.nextCursor,
+        nextCursor: tab.nextCursor,
         statusOptions,
         typeOptions,
         tabIds: invoicingTabIdsFromConfig({
             allTabIds: ALL_INVOICING_CREDIT_NOTE_TAB_IDS,
             statusOptions,
         }),
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
+        fetchState: tab.fetchState,
+        error: tab.error,
         sort: listViewState.sort,
         version: 1.0,
     };