@zeniai/client-epic-state 5.2.78 → 5.2.79

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCreateInvoiceFormView = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
 const addressSelector_1 = require("../../../entity/address/addressSelector");
 const invoicingCatalogSelector_1 = require("../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector");
 const invoicingCatalogListViewSelector_1 = require("../invoicingCatalogListView/invoicingCatalogListViewSelector");
@@ -33,6 +34,25 @@ const hasPerUnitRate = (pricingModel) => pricingModel == null ||
 const planNamePrefillPrice = (pricePoint) => hasPerUnitRate(pricePoint.pricingModel)
     ? (0, invoicingCatalogSelector_1.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 = (0, toolkit_1.createSelector)(invoicingCatalogListViewSelector_1.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.
@@ -64,7 +84,7 @@ const getCreateInvoiceFormView = (state) => {
     const catalogListView = (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogListView)(state);
     return {
         fieldHelp: (0, invoicingConfigViewSelector_1.invoicingFieldHelpForGroup)(state, 'invoice'),
-        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingCustomerListView)(state).customers.map((customer) => ({
+        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingAllCustomers)(state).map((customer) => ({
             billingAddress: customer.billingAddressId != null
                 ? (0, addressSelector_1.getAddressByAddressId)(state.addressState, customer.billingAddressId)
                 : undefined,
@@ -73,19 +93,7 @@ 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: (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.products),
         savedInvoiceId: createInvoiceState.createdInvoiceId,
         settings: (0, settingsViewSelector_1.getInvoicingSettings)(state),

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

@@ -5,6 +5,7 @@ const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const invoicingCatalogListViewReducer_1 = require("../../invoicingCatalogListView/invoicingCatalogListViewReducer");
 const invoicingCustomerListViewReducer_1 = require("../../invoicingCustomerListView/invoicingCustomerListViewReducer");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const settingsViewReducer_1 = require("../../settingsView/settingsViewReducer");
 const createInvoiceReducer_1 = require("../createInvoiceReducer");
 /**
@@ -24,14 +25,16 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 const fetchCreateInvoiceFormPageEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(createInvoiceReducer_1.fetchCreateInvoiceFormPage.match), (0, operators_1.mergeMap)((action) => {
     const { cacheOverride } = action.payload;
     const state = state$.value;
-    const customerState = state.invoicingCustomerListViewState;
+    // The customer picker reads the unfiltered `all` cache.
+    const customerTab = (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCustomerListViewState.byTab, invoicingListTabCache_1.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((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({
             filters: {},
             keepExistingListItems: false,
+            tabId: invoicingListTabCache_1.INVOICING_LIST_ALL_TAB,
         }));
     }
     if (shouldFetch({ fetchState: catalogState.fetchState, error: catalogState.error }, cacheOverride)) {

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

@@ -287,7 +287,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
         addons: catalogItemOptionsOfType('addon'),
         charges: catalogItemOptionsOfType('charge'),
         coupons: (0, couponViewSelector_1.getInvoicingCouponListItems)(state).map(toInvoicingCouponOption),
-        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingCustomerListView)(state).customers.map(toInvoicingCustomerOption),
+        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingAllCustomers)(state).map(toInvoicingCustomerOption),
         localData,
         mode,
         plans: planPrices.map(toInvoicingPlanOption),

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

@@ -4,8 +4,10 @@ exports.fetchInvoicingSubscriptionDetailPageEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const couponViewReducer_1 = require("../couponView/couponViewReducer");
+const couponViewSelector_1 = require("../couponView/couponViewSelector");
 const invoicingCatalogListViewReducer_1 = require("../invoicingCatalogListView/invoicingCatalogListViewReducer");
 const invoicingConfigViewReducer_1 = require("../invoicingConfigView/invoicingConfigViewReducer");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSubscriptionDetailViewReducer");
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -50,12 +52,13 @@ const fetchInvoicingSubscriptionDetailPageEpic = (actions$, state$) => actions$.
             keepExistingListItems: false,
         }));
     }
-    const couponListState = state.invoicingCouponViewState;
-    if (shouldFetch({
-        error: couponListState.error,
-        fetchState: couponListState.fetchState,
-    }, cacheOverride)) {
-        pageActions.push((0, couponViewReducer_1.fetchInvoicingCouponList)({ filters: {}, keepExistingListItems: false }));
+    // The coupon picker reads the unfiltered `all` cache.
+    if (shouldFetch((0, couponViewSelector_1.getInvoicingCouponListFetchState)(state), cacheOverride)) {
+        pageActions.push((0, couponViewReducer_1.fetchInvoicingCouponList)({
+            filters: {},
+            keepExistingListItems: false,
+            tabId: invoicingListTabCache_1.INVOICING_LIST_ALL_TAB,
+        }));
     }
     return pageActions.length > 0 ? (0, rxjs_1.from)(pageActions) : rxjs_1.EMPTY;
 }));

package/lib/view/invoicing/invoicingCreditNoteListView/epics/fetchInvoicingCreditNoteListEpic.d.ts

@@ -5,4 +5,4 @@ import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchInvoicingCreditNoteList, updateInvoicingCreditNoteList, updateInvoicingCreditNoteListFailure } from '../invoicingCreditNoteListViewReducer';
 export type ActionType = ReturnType<typeof fetchInvoicingCreditNoteList> | ReturnType<typeof updateInvoicingCreditNoteList> | ReturnType<typeof updateInvoicingCreditNoteListFailure> | ReturnType<typeof updateInvoicingCreditNotes>;
-export declare const fetchInvoicingCreditNoteListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoicingCreditNoteListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

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

@@ -6,9 +6,13 @@ const operators_1 = require("rxjs/operators");
 const creditNoteReducer_1 = require("../../../../entity/invoicing/creditNote/creditNoteReducer");
 const responsePayload_1 = require("../../../../responsePayload");
 const invoicingApiHelper_1 = require("../../invoicingApiHelper");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingCreditNoteListViewReducer_1 = require("../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);
     }
@@ -22,9 +26,15 @@ const buildQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoicingCreditNoteListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingCreditNoteListViewReducer_1.fetchInvoicingCreditNoteList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoicingCreditNoteListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingCreditNoteListViewReducer_1.fetchInvoicingCreditNoteList.match), (0, operators_1.map)((action) => ({
+    action,
+    tabId: (0, invoicingListTabCache_1.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.
+(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/credits`, buildQuery(filters, cursor, sort));
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/credits`, buildQuery(filters, cursor, sort, (0, invoicingListTabCache_1.invoicingListStatusParam)(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];
@@ -34,11 +44,18 @@ const fetchInvoicingCreditNoteListEpic = (actions$, _state$, zeniAPI) => actions
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return (0, rxjs_1.of)((0, invoicingCreditNoteListViewReducer_1.updateInvoicingCreditNoteListFailure)(response.status));
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingCreditNoteListViewReducer_1.updateInvoicingCreditNoteListFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch credit note list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return (0, rxjs_1.of)((0, invoicingCreditNoteListViewReducer_1.updateInvoicingCreditNoteListFailure)({
+            status: response.status,
+            tabId,
+        }));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingCreditNoteListViewReducer_1.updateInvoicingCreditNoteListFailure)({
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch credit note list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));
 exports.fetchInvoicingCreditNoteListEpic = fetchInvoicingCreditNoteListEpic;

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

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

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

@@ -9,11 +9,14 @@ export declare const fetchInvoicingCreditNoteList: import("@reduxjs/toolkit").Ac
     filters?: InvoicingCreditNoteFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingCreditNoteFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingCreditNoteListView/fetchInvoicingCreditNoteList", never, never>, fetchInvoicingCreditNoteListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingCreditNoteFilters;
@@ -26,6 +29,10 @@ export declare const fetchInvoicingCreditNoteList: import("@reduxjs/toolkit").Ac
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingCreditNoteListView/updateInvoicingCreditNoteList">, updateInvoicingCreditNoteListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteListFailure">, fetchInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/fetchInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCreditNoteListView/updateInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteCountsFailure">, updateInvoicingCreditNoteFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCreditNoteFilters, "invoicingCreditNoteListView/updateInvoicingCreditNoteFilters">, setInvoicingCreditNoteActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"adjusted" | "refunded" | "refund_due" | "voided" | "all", "invoicingCreditNoteListView/setInvoicingCreditNoteActiveTab">;
+    tabId: string;
+}, "invoicingCreditNoteListView/updateInvoicingCreditNoteList">, updateInvoicingCreditNoteListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "invoicingCreditNoteListView/updateInvoicingCreditNoteListFailure">, fetchInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCreditNoteListView/fetchInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCreditNoteListView/updateInvoicingCreditNoteCounts">, updateInvoicingCreditNoteCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCreditNoteListView/updateInvoicingCreditNoteCountsFailure">, updateInvoicingCreditNoteFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCreditNoteFilters, "invoicingCreditNoteListView/updateInvoicingCreditNoteFilters">, setInvoicingCreditNoteActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"adjusted" | "refunded" | "refund_due" | "voided" | "all", "invoicingCreditNoteListView/setInvoicingCreditNoteActiveTab">;
 declare const _default: import("redux").Reducer<InvoicingCreditNoteListViewState>;
 export default _default;

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

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setInvoicingCreditNoteActiveTab = exports.updateInvoicingCreditNoteFilters = exports.updateInvoicingCreditNoteCountsFailure = exports.updateInvoicingCreditNoteCounts = exports.fetchInvoicingCreditNoteCounts = exports.updateInvoicingCreditNoteListFailure = exports.updateInvoicingCreditNoteList = exports.fetchInvoicingCreditNoteListPage = exports.fetchInvoicingCreditNoteList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
     activeTab: 'all',
-    ids: [],
-    nextCursor: null,
+    byTab: {},
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingCreditNoteListView = (0, toolkit_1.createSlice)({
     name: 'invoicingCreditNoteListView',
@@ -23,14 +18,9 @@ const invoicingCreditNoteListView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingCreditNoteList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                (0, invoicingListTabCache_1.startInvoicingListTabFetch)(draft.byTab, (0, invoicingListTabCache_1.invoicingListFetchTab)(draft.activeTab, action.payload.tabId), action.payload.keepExistingListItems);
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -39,12 +29,17 @@ const invoicingCreditNoteListView = (0, toolkit_1.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 (!(0, invoicingListTabCache_1.isSameInvoicingListQuery)(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -59,16 +54,10 @@ const invoicingCreditNoteListView = (0, toolkit_1.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;
+            (0, invoicingListTabCache_1.completeInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingCreditNoteListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCreditNoteCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -86,8 +75,8 @@ const invoicingCreditNoteListView = (0, toolkit_1.createSlice)({
         updateInvoicingCreditNoteFilters(draft, action) {
             draft.filters = action.payload;
         },
-        // Select a status tab. The list API ignores `status` (returns all statuses),
-        // so the selector filters rows to this tab client-side — no refetch needed.
+        // 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/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewSelector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingCreditNoteListView = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const creditNoteSelector_1 = require("../../../entity/invoicing/creditNote/creditNoteSelector");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const invoicingTabHelper_1 = require("../invoicingTabHelper");
 const invoicingCreditNoteListViewState_1 = require("./invoicingCreditNoteListViewState");
 /**
@@ -12,12 +13,8 @@ const invoicingCreditNoteListViewState_1 = require("./invoicingCreditNoteListVie
  */
 exports.getInvoicingCreditNoteListView = (0, toolkit_1.createSelector)((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (state) => state.invoicingConfigViewState.creditNoteStatusOptions, (state) => state.invoicingConfigViewState.creditNoteTypeOptions, (creditNoteState, listViewState, statusOptions, typeOptions) => {
     const { activeTab } = listViewState;
-    const allCreditNotes = (0, creditNoteSelector_1.getInvoicingCreditNotesByIds)(creditNoteState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything).
-    const creditNotes = activeTab === 'all'
-        ? allCreditNotes
-        : allCreditNotes.filter((creditNote) => creditNote.status === activeTab);
+    const tab = (0, invoicingListTabCache_1.getInvoicingListTab)(listViewState.byTab, (0, invoicingListTabCache_1.invoicingListSourceTab)(activeTab));
+    const creditNotes = (0, creditNoteSelector_1.getInvoicingCreditNotesByIds)(creditNoteState, tab.ids);
     return {
         activeTab,
         columns: invoicingCreditNoteListViewState_1.INVOICING_CREDIT_NOTE_COLUMNS,
@@ -25,15 +22,15 @@ exports.getInvoicingCreditNoteListView = (0, toolkit_1.createSelector)((state) =
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
-        nextCursor: listViewState.nextCursor,
+        nextCursor: tab.nextCursor,
         statusOptions,
         typeOptions,
         tabIds: (0, invoicingTabHelper_1.invoicingTabIdsFromConfig)({
             allTabIds: invoicingCreditNoteListViewState_1.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,
     };

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

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

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

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

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

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

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

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

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

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