@zeniai/client-epic-state 5.2.77 → 5.2.79

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)());

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,
     };