@zeniai/client-epic-state 5.1.69 → 5.1.70

package/lib/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewReducer.js

@@ -1,17 +1,23 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearInvoicingTransactionListView = exports.addInvoicingTransactionToList = exports.updateInvoicingTransactionFilters = exports.updateInvoicingTransactionListFailure = exports.updateInvoicingTransactionList = exports.fetchInvoicingTransactionListPage = exports.fetchInvoicingTransactionList = exports.initialState = void 0;
+exports.clearInvoicingTransactionListView = exports.addInvoicingTransactionToList = exports.setInvoicingTransactionActiveTab = exports.updateInvoicingTransactionFilters = exports.updateInvoicingTransactionListFailure = exports.updateInvoicingTransactionList = exports.fetchInvoicingTransactionListPage = exports.fetchInvoicingTransactionList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
+const invoicingTransactionListViewState_1 = require("./invoicingTransactionListViewState");
+/**
+ * Whether two transaction-list queries share the same base (tab-independent)
+ * query. When the base query changes (search / customer / status / sort) every
+ * per-tab cache is stale, so the reducer resets them all.
+ */
+const sameTransactionBaseQuery = (a, b) => a.filters.customerId === b.filters.customerId &&
+    a.filters.status === b.filters.status &&
+    a.filters.search === b.filters.search &&
+    a.sort?.field === b.sort?.field &&
+    a.sort?.dir === b.sort?.dir;
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
-    ids: [],
-    nextCursor: null,
+    activeTab: 'all',
+    byTab: (0, invoicingTransactionListViewState_1.makeInvoicingTransactionIdsByTab)(),
     filters: {},
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingTransactionListView = (0, toolkit_1.createSlice)({
     name: 'invoicingTransactionListView',
@@ -19,14 +25,15 @@ const invoicingTransactionListView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingTransactionList: {
             reducer(draft, action) {
+                const tab = draft.byTab[draft.activeTab];
                 if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
+                    tab.ids = [];
+                    tab.nextCursor = null;
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
+                tab.fetchState = 'In-Progress';
+                tab.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -41,6 +48,12 @@ const invoicingTransactionListView = (0, toolkit_1.createSlice)({
         },
         fetchInvoicingTransactionListPage: {
             reducer(draft, action) {
+                // A different base query invalidates every tab's cache — reset so the
+                // page epic's shouldFetch refetches the active tab instead of showing
+                // rows fetched under a stale search/customer/status/sort.
+                if (!sameTransactionBaseQuery(draft, action.payload)) {
+                    draft.byTab = (0, invoicingTransactionListViewState_1.makeInvoicingTransactionIdsByTab)();
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -55,34 +68,52 @@ const invoicingTransactionListView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingTransactionList(draft, action) {
-            draft.ids = action.payload.keepExistingListItems
-                ? [...new Set([...draft.ids, ...action.payload.ids])]
+            const tab = draft.byTab[draft.activeTab];
+            tab.ids = action.payload.keepExistingListItems
+                ? [...new Set([...tab.ids, ...action.payload.ids])]
                 : action.payload.ids;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            tab.nextCursor = action.payload.nextCursor;
+            tab.fetchState = 'Completed';
+            tab.error = undefined;
         },
         updateInvoicingTransactionListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            const tab = draft.byTab[draft.activeTab];
+            tab.fetchState = 'Error';
+            tab.error = action.payload;
         },
         updateInvoicingTransactionFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a type tab. The view dispatches the follow-up
+        // fetchInvoicingTransactionListPage so the page epic fetches the tab when
+        // its cache is empty and reuses it when already loaded.
+        setInvoicingTransactionActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly recorded payment's transaction in the cached list so the
-        // payments page shows it without refetching. The list view has no counts
-        // slice, so we only prepend the id (dedup/no-op if already present).
+        // payments page shows it without refetching. The payload carries no type,
+        // so prepend to the 'all' tab and the tab currently in view (dedup/no-op if
+        // already present); other tabs refetch fresh on their next visit.
         addInvoicingTransactionToList(draft, action) {
             const id = action.payload;
-            if (draft.ids.includes(id)) {
-                return;
+            const prependTo = (tabId) => {
+                const tab = draft.byTab[tabId];
+                if (!tab.ids.includes(id)) {
+                    tab.ids = [id, ...tab.ids];
+                }
+            };
+            prependTo('all');
+            if (draft.activeTab !== 'all') {
+                prependTo(draft.activeTab);
             }
-            draft.ids = [id, ...draft.ids];
         },
         clearInvoicingTransactionListView(draft) {
-            Object.assign(draft, exports.initialState);
+            draft.activeTab = 'all';
+            draft.byTab = (0, invoicingTransactionListViewState_1.makeInvoicingTransactionIdsByTab)();
+            draft.filters = {};
+            draft.sort = undefined;
         },
     },
 });
-_a = invoicingTransactionListView.actions, exports.fetchInvoicingTransactionList = _a.fetchInvoicingTransactionList, exports.fetchInvoicingTransactionListPage = _a.fetchInvoicingTransactionListPage, exports.updateInvoicingTransactionList = _a.updateInvoicingTransactionList, exports.updateInvoicingTransactionListFailure = _a.updateInvoicingTransactionListFailure, exports.updateInvoicingTransactionFilters = _a.updateInvoicingTransactionFilters, exports.addInvoicingTransactionToList = _a.addInvoicingTransactionToList, exports.clearInvoicingTransactionListView = _a.clearInvoicingTransactionListView;
+_a = invoicingTransactionListView.actions, exports.fetchInvoicingTransactionList = _a.fetchInvoicingTransactionList, exports.fetchInvoicingTransactionListPage = _a.fetchInvoicingTransactionListPage, exports.updateInvoicingTransactionList = _a.updateInvoicingTransactionList, exports.updateInvoicingTransactionListFailure = _a.updateInvoicingTransactionListFailure, exports.updateInvoicingTransactionFilters = _a.updateInvoicingTransactionFilters, exports.setInvoicingTransactionActiveTab = _a.setInvoicingTransactionActiveTab, exports.addInvoicingTransactionToList = _a.addInvoicingTransactionToList, exports.clearInvoicingTransactionListView = _a.clearInvoicingTransactionListView;
 exports.default = invoicingTransactionListView.reducer;

package/lib/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewSelector.d.ts

@@ -4,6 +4,7 @@ import { RootState } from '../../../reducer';
 import { InvoicingListSort } from '../invoicingApiHelper';
 import { InvoicingTransactionColumnConfig, InvoicingTransactionFilters, InvoicingTransactionTabId } from './invoicingTransactionListViewState';
 export interface InvoicingTransactionListView extends SelectorView {
+    activeTab: InvoicingTransactionTabId;
     columns: InvoicingTransactionColumnConfig[];
     filters: InvoicingTransactionFilters;
     nextCursor: string | null;

package/lib/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewSelector.js

@@ -9,14 +9,18 @@ const invoicingTransactionListViewState_1 = require("./invoicingTransactionListV
  * object) keep referential identity until the transaction entity slice or the
  * list-view slice actually change.
  */
-exports.getInvoicingTransactionListView = (0, toolkit_1.createSelector)((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (transactionState, listViewState) => ({
-    columns: invoicingTransactionListViewState_1.INVOICING_TRANSACTION_COLUMNS,
-    transactions: (0, invoicingTransactionSelector_1.getInvoicingTransactionsByIds)(transactionState, listViewState.ids),
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    tabIds: invoicingTransactionListViewState_1.INVOICING_TRANSACTION_TABS,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+exports.getInvoicingTransactionListView = (0, toolkit_1.createSelector)((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (transactionState, listViewState) => {
+    const activeTabState = listViewState.byTab[listViewState.activeTab];
+    return {
+        activeTab: listViewState.activeTab,
+        columns: invoicingTransactionListViewState_1.INVOICING_TRANSACTION_COLUMNS,
+        transactions: (0, invoicingTransactionSelector_1.getInvoicingTransactionsByIds)(transactionState, activeTabState.ids),
+        filters: listViewState.filters,
+        nextCursor: activeTabState.nextCursor,
+        fetchState: activeTabState.fetchState,
+        error: activeTabState.error,
+        tabIds: invoicingTransactionListViewState_1.INVOICING_TRANSACTION_TABS,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewState.d.ts

@@ -1,10 +1,9 @@
-import { FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { InvoicingListSort } from '../invoicingApiHelper';
 export interface InvoicingTransactionFilters {
     customerId?: ID;
     search?: string;
     status?: string;
-    type?: string;
 }
 export declare const ALL_INVOICING_TRANSACTION_SORT_KEYS: readonly ["transaction", "customer", "method", "date", "type", "gateway", "status", "amount"];
 export declare const toInvoicingTransactionSortKey: (v: string) => "date" | "amount" | "status" | "type" | "transaction" | "customer" | "gateway" | "method";
@@ -31,10 +30,25 @@ export type InvoicingTransactionTabId = ReturnType<typeof toInvoicingTransaction
  * display order.
  */
 export declare const INVOICING_TRANSACTION_TABS: InvoicingTransactionTabId[];
-export interface InvoicingTransactionListViewState extends FetchedState {
-    filters: InvoicingTransactionFilters;
+/**
+ * Per-tab cache slice. Each `type` tab is a separate server query (the backend
+ * filters by `type`), so its loaded ids, pagination cursor and fetch state are
+ * cached independently. Mirrors the `userListByType` per-key cache pattern.
+ */
+export interface InvoicingTransactionTabState extends FetchStateAndError {
     ids: ID[];
     nextCursor: string | null;
+}
+export type InvoicingTransactionIdsByTab = Record<InvoicingTransactionTabId, InvoicingTransactionTabState>;
+export interface InvoicingTransactionListViewState {
+    /** Selected type tab (CES-owned so it persists across page revisits). */
+    activeTab: InvoicingTransactionTabId;
+    /** Per-tab cached ids + cursor + fetch state. */
+    byTab: InvoicingTransactionIdsByTab;
+    /** Base query shared across tabs (search / customer / status). */
+    filters: InvoicingTransactionFilters;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }
+export declare const makeInvoicingTransactionTabState: () => InvoicingTransactionTabState;
+export declare const makeInvoicingTransactionIdsByTab: () => InvoicingTransactionIdsByTab;

package/lib/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INVOICING_TRANSACTION_TABS = exports.toInvoicingTransactionTabId = exports.ALL_INVOICING_TRANSACTION_TAB_IDS = exports.INVOICING_TRANSACTION_COLUMNS = exports.toInvoicingTransactionSortKey = exports.ALL_INVOICING_TRANSACTION_SORT_KEYS = void 0;
+exports.makeInvoicingTransactionIdsByTab = exports.makeInvoicingTransactionTabState = exports.INVOICING_TRANSACTION_TABS = exports.toInvoicingTransactionTabId = exports.ALL_INVOICING_TRANSACTION_TAB_IDS = exports.INVOICING_TRANSACTION_COLUMNS = exports.toInvoicingTransactionSortKey = exports.ALL_INVOICING_TRANSACTION_SORT_KEYS = void 0;
 const stringToUnion_1 = require("../../../commonStateTypes/stringToUnion");
 exports.ALL_INVOICING_TRANSACTION_SORT_KEYS = [
     'transaction',
@@ -42,3 +42,15 @@ exports.toInvoicingTransactionTabId = toInvoicingTransactionTabId;
 exports.INVOICING_TRANSACTION_TABS = [
     ...exports.ALL_INVOICING_TRANSACTION_TAB_IDS,
 ];
+const makeInvoicingTransactionTabState = () => ({
+    ids: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+exports.makeInvoicingTransactionTabState = makeInvoicingTransactionTabState;
+const makeInvoicingTransactionIdsByTab = () => exports.ALL_INVOICING_TRANSACTION_TAB_IDS.reduce((acc, tabId) => {
+    acc[tabId] = (0, exports.makeInvoicingTransactionTabState)();
+    return acc;
+}, {});
+exports.makeInvoicingTransactionIdsByTab = makeInvoicingTransactionIdsByTab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.1.69",
+  "version": "5.1.70",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",