@zeniai/client-epic-state 4.19.37-betaVR17 → 4.19.37-betaVR19

package/lib/esm/view/expenseAutomationView/epics/missingReceipts/fetchMoreBatchDetailsEpic.js

@@ -1,5 +1,6 @@
+import orderBy from 'lodash/orderBy';
 import { concat, of } from 'rxjs';
-import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { catchError, exhaustMap, filter } from 'rxjs/operators';
 import { toMonthYearPeriodId } from '../../../../commonStateTypes/timePeriod';
 import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
 import { createZeniAPIStatus } from '../../../../responsePayload';
@@ -7,7 +8,9 @@ import { isBatchListStatusCompleted } from '../../payload/missingReceiptsPayload
 import { fetchMoreBatchDetails, fetchMoreBatchDetailsComplete, fetchMoreBatchDetailsFailure, } from '../../reducers/missingReceiptsViewReducer';
 import { fetchBatchDetailsByIds } from './fetchMultipleBatchDetailsEpic';
 const MORE_BATCH_PAGE_SIZE = 4;
-export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchMoreBatchDetails.match), mergeMap(() => {
+export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchMoreBatchDetails.match), 
+/** One page at a time — avoids duplicate loads if IO + scroll fallback both fire. */
+exhaustMap(() => {
     const state = state$.value;
     const { expenseAutomationViewState: { selectedPeriodByTenantId }, expenseAutomationMissingReceiptsViewState: { bulkUpload }, } = state;
     const currentTenant = getCurrentTenant(state);
@@ -18,11 +21,10 @@ export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$
     const periodId = toMonthYearPeriodId(selectedPeriod);
     const batchList = bulkUpload.batchListByPeriod[periodId] ?? [];
     const failedIds = new Set(bulkUpload.failedBatchDetailIds);
-    const unfetchedBatchIds = batchList
-        .filter((batch) => isBatchListStatusCompleted(batch.status) &&
+    const unfetchedBatches = batchList.filter((batch) => isBatchListStatusCompleted(batch.status) &&
         bulkUpload.batchDetailsById[batch.batchId] == null &&
-        !failedIds.has(batch.batchId))
-        .map((batch) => batch.batchId);
+        !failedIds.has(batch.batchId));
+    const unfetchedBatchIds = orderBy(unfetchedBatches, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     if (unfetchedBatchIds.length === 0) {
         return of(fetchMoreBatchDetailsComplete());
     }

package/lib/esm/view/expenseAutomationView/epics/missingReceipts/fetchMultipleBatchDetailsEpic.js

@@ -1,3 +1,4 @@
+import orderBy from 'lodash/orderBy';
 import { EMPTY, concat, from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateTransactions } from '../../../../entity/transaction/transactionReducer';
@@ -9,7 +10,6 @@ export function fetchBatchDetailsByIds(batchIds, zeniAPI) {
     if (batchIds.length === 0) {
         return EMPTY;
     }
-    console.log('fetchBatchDetailsByIds', batchIds);
     return from(batchIds).pipe(mergeMap((batchId) => zeniAPI
         .getJSON(`${zeniAPI.apiEndPoints.communicationAgentMicroServiceBaseUrl}/1.0/batches/${batchId}`)
         .pipe(mergeMap((response) => {
@@ -32,10 +32,10 @@ export function fetchBatchDetailsByIds(batchIds, zeniAPI) {
 export const fetchMultipleBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchBulkUploadBatchesSuccess.match), mergeMap((action) => {
     const batchList = action.payload.batchList;
     const { batchDetailsById } = state$.value.expenseAutomationMissingReceiptsViewState.bulkUpload;
-    const completedBatchIds = batchList
-        .filter((batch) => isBatchListStatusCompleted(batch.status) &&
-        batchDetailsById[batch.batchId] == null)
-        .map((batch) => batch.batchId);
+    /** Oldest first — matches primary-batch selection in missingReceiptsSelector (chronological). */
+    const completedBatchesMissingDetails = batchList.filter((batch) => isBatchListStatusCompleted(batch.status) &&
+        batchDetailsById[batch.batchId] == null);
+    const completedBatchIds = orderBy(completedBatchesMissingDetails, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     const batchIdsToFetch = completedBatchIds.slice(0, INITIAL_BATCH_PAGE_SIZE);
     if (batchIdsToFetch.length === 0) {
         return EMPTY;

package/lib/esm/view/expenseAutomationView/reducers/missingReceiptsViewReducer.js

@@ -205,12 +205,25 @@ const expenseAutomationMissingReceiptsView = createSlice({
         storeBatchDetails(draft, action) {
             const details = action.payload;
             draft.bulkUpload.batchDetailsById[details.batchId] = details;
+            /**
+             * Multi-batch fetch paths use `storeBatchDetails` (not `fetchBulkUploadBatchDetailsSuccess`).
+             * Without this, `phase` stays `matching` after upload forever and the Unmatched tab keeps
+             * showing the skeleton (`bulkUploadPhase === 'matching'` in web-components).
+             */
+            if (draft.bulkUpload.phase === 'matching' &&
+                draft.bulkUpload.currentBatchId === details.batchId) {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         batchDetailFetchFailed(draft, action) {
             const { batchId } = action.payload;
             if (!draft.bulkUpload.failedBatchDetailIds.includes(batchId)) {
                 draft.bulkUpload.failedBatchDetailIds.push(batchId);
             }
+            if (draft.bulkUpload.phase === 'matching' &&
+                draft.bulkUpload.currentBatchId === batchId) {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         setInitialBatchDetailsLoading(draft) {
             draft.bulkUpload.batchDetailsPaginationState = {
@@ -229,6 +242,15 @@ const expenseAutomationMissingReceiptsView = createSlice({
                 fetchState: 'Completed',
                 error: undefined,
             };
+            const currentId = draft.bulkUpload.currentBatchId;
+            const currentDetails = currentId != null
+                ? draft.bulkUpload.batchDetailsById[currentId]
+                : undefined;
+            if (draft.bulkUpload.phase === 'matching' &&
+                currentId != null &&
+                currentDetails?.status === 'completed') {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         fetchMoreBatchDetailsFailure(draft, action) {
             draft.bulkUpload.batchDetailsPaginationState = {

package/lib/esm/view/expenseAutomationView/selectors/missingReceiptsSelector.js

@@ -60,9 +60,9 @@ export function getExpenseAutomationMissingReceiptsView(state) {
     const batchListChronological = orderBy(batchList, (b) => new Date(b.createdAt).valueOf(), 'asc');
     /**
      * Primary "Unmatched" batch = first completed batch in chronological order, preferring the
-     * first batch that still has un_matched/no_match work when any completed batch has such work
-     * (so a newer fully-matched batch does not hide older unmatched receipts). If an earlier batch
-     * in that order has no details yet (still loading), we return undefined until it resolves.
+     * first batch that still has un_matched/no_match work when any completed batch has such work.
+     * Batches without details yet: wait if the list row still reports unmatched work; otherwise skip
+     * so we do not block the whole tab while older rows are not fetched yet.
      */
     const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchListChronological, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
     /** During upload/matching, the in-flight batch may not appear in batchList yet — prefer currentBatchId. */
@@ -115,9 +115,13 @@ export function getExpenseAutomationMissingReceiptsView(state) {
         }
         : { total: 0, processed: 0, percentage: 0 };
     const batchListFetchState = bulkUpload.batchListFetchState;
+    /**
+     * When primary batch is not resolved yet, still aggregate unmatched files from every batch
+     * that has details loaded (otherwise past is empty and receipts vanish from the UI).
+     */
     const pastBatches = unmatchedSectionBatchId != null
         ? batchList.filter((b) => b.batchId !== unmatchedSectionBatchId)
-        : [];
+        : batchList;
     const pastUnmatchedFiles = pastBatches.flatMap((b) => {
         const details = bulkUpload.batchDetailsById[b.batchId];
         if (details == null) {
@@ -189,10 +193,18 @@ export function getExpenseAutomationMissingReceiptsView(state) {
 function batchDetailsHasUnmatchedWork(details) {
     return details.files.some((f) => f.status === 'un_matched' || f.status === 'no_match');
 }
+/** List row summary before batch details load — aligns with unmatched / possible-match work. */
+function batchListItemHasUnmatchedWork(batch) {
+    return batch.noMatchCount > 0 || batch.possibleMatchesCount > 0;
+}
 /**
  * `batchList` must be in chronological order (oldest first). Picks the primary batch for the
- * top "Unmatched" section. Skips failed detail fetches. Stops at the first batch with no details
- * yet (still loading) so we do not choose a later batch until earlier chronological rows resolve.
+ * top "Unmatched" section. Skips failed detail fetches.
+ *
+ * If details are not loaded for an older batch but the list row reports no unmatched work, we
+ * skip that batch so newer batches with loaded details can be primary (avoids an empty tab when
+ * the first fetch page only loaded newer batches). If the list reports unmatched work but details
+ * are still loading, we wait (undefined) so primary order stays correct once details arrive.
  */
 function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetailsById, failedBatchDetailIds) {
     const failedIds = new Set(failedBatchDetailIds);
@@ -201,9 +213,12 @@ function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetail
             return false;
         }
         const d = batchDetailsById[b.batchId];
-        return (d != null &&
+        if (d != null &&
             d.status === 'completed' &&
-            batchDetailsHasUnmatchedWork(d));
+            batchDetailsHasUnmatchedWork(d)) {
+            return true;
+        }
+        return d == null && batchListItemHasUnmatchedWork(b);
     });
     for (const batch of batchListChronological) {
         if (failedIds.has(batch.batchId)) {
@@ -211,7 +226,10 @@ function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetail
         }
         const details = batchDetailsById[batch.batchId];
         if (details == null) {
-            return undefined;
+            if (batchListItemHasUnmatchedWork(batch)) {
+                return undefined;
+            }
+            continue;
         }
         if (details.status !== 'completed') {
             continue;

package/lib/view/expenseAutomationView/epics/missingReceipts/fetchMoreBatchDetailsEpic.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchMoreBatchDetailsEpic = void 0;
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const timePeriod_1 = require("../../../../commonStateTypes/timePeriod");
@@ -10,7 +14,9 @@ const missingReceiptsPayload_1 = require("../../payload/missingReceiptsPayload")
 const missingReceiptsViewReducer_1 = require("../../reducers/missingReceiptsViewReducer");
 const fetchMultipleBatchDetailsEpic_1 = require("./fetchMultipleBatchDetailsEpic");
 const MORE_BATCH_PAGE_SIZE = 4;
-const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchMoreBatchDetails.match), (0, operators_1.mergeMap)(() => {
+const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchMoreBatchDetails.match), 
+/** One page at a time — avoids duplicate loads if IO + scroll fallback both fire. */
+(0, operators_1.exhaustMap)(() => {
     const state = state$.value;
     const { expenseAutomationViewState: { selectedPeriodByTenantId }, expenseAutomationMissingReceiptsViewState: { bulkUpload }, } = state;
     const currentTenant = (0, tenantSelector_1.getCurrentTenant)(state);
@@ -21,11 +27,10 @@ const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((
     const periodId = (0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod);
     const batchList = bulkUpload.batchListByPeriod[periodId] ?? [];
     const failedIds = new Set(bulkUpload.failedBatchDetailIds);
-    const unfetchedBatchIds = batchList
-        .filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
+    const unfetchedBatches = batchList.filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
         bulkUpload.batchDetailsById[batch.batchId] == null &&
-        !failedIds.has(batch.batchId))
-        .map((batch) => batch.batchId);
+        !failedIds.has(batch.batchId));
+    const unfetchedBatchIds = (0, orderBy_1.default)(unfetchedBatches, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     if (unfetchedBatchIds.length === 0) {
         return (0, rxjs_1.of)((0, missingReceiptsViewReducer_1.fetchMoreBatchDetailsComplete)());
     }

package/lib/view/expenseAutomationView/epics/missingReceipts/fetchMultipleBatchDetailsEpic.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchMultipleBatchDetailsEpic = void 0;
 exports.fetchBatchDetailsByIds = fetchBatchDetailsByIds;
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const transactionReducer_1 = require("../../../../entity/transaction/transactionReducer");
@@ -13,7 +17,6 @@ function fetchBatchDetailsByIds(batchIds, zeniAPI) {
     if (batchIds.length === 0) {
         return rxjs_1.EMPTY;
     }
-    console.log('fetchBatchDetailsByIds', batchIds);
     return (0, rxjs_1.from)(batchIds).pipe((0, operators_1.mergeMap)((batchId) => zeniAPI
         .getJSON(`${zeniAPI.apiEndPoints.communicationAgentMicroServiceBaseUrl}/1.0/batches/${batchId}`)
         .pipe((0, operators_1.mergeMap)((response) => {
@@ -36,10 +39,10 @@ function fetchBatchDetailsByIds(batchIds, zeniAPI) {
 const fetchMultipleBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchBulkUploadBatchesSuccess.match), (0, operators_1.mergeMap)((action) => {
     const batchList = action.payload.batchList;
     const { batchDetailsById } = state$.value.expenseAutomationMissingReceiptsViewState.bulkUpload;
-    const completedBatchIds = batchList
-        .filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
-        batchDetailsById[batch.batchId] == null)
-        .map((batch) => batch.batchId);
+    /** Oldest first — matches primary-batch selection in missingReceiptsSelector (chronological). */
+    const completedBatchesMissingDetails = batchList.filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
+        batchDetailsById[batch.batchId] == null);
+    const completedBatchIds = (0, orderBy_1.default)(completedBatchesMissingDetails, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     const batchIdsToFetch = completedBatchIds.slice(0, INITIAL_BATCH_PAGE_SIZE);
     if (batchIdsToFetch.length === 0) {
         return rxjs_1.EMPTY;

package/lib/view/expenseAutomationView/reducers/missingReceiptsViewReducer.js

@@ -210,12 +210,25 @@ const expenseAutomationMissingReceiptsView = (0, toolkit_1.createSlice)({
         storeBatchDetails(draft, action) {
             const details = action.payload;
             draft.bulkUpload.batchDetailsById[details.batchId] = details;
+            /**
+             * Multi-batch fetch paths use `storeBatchDetails` (not `fetchBulkUploadBatchDetailsSuccess`).
+             * Without this, `phase` stays `matching` after upload forever and the Unmatched tab keeps
+             * showing the skeleton (`bulkUploadPhase === 'matching'` in web-components).
+             */
+            if (draft.bulkUpload.phase === 'matching' &&
+                draft.bulkUpload.currentBatchId === details.batchId) {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         batchDetailFetchFailed(draft, action) {
             const { batchId } = action.payload;
             if (!draft.bulkUpload.failedBatchDetailIds.includes(batchId)) {
                 draft.bulkUpload.failedBatchDetailIds.push(batchId);
             }
+            if (draft.bulkUpload.phase === 'matching' &&
+                draft.bulkUpload.currentBatchId === batchId) {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         setInitialBatchDetailsLoading(draft) {
             draft.bulkUpload.batchDetailsPaginationState = {
@@ -234,6 +247,15 @@ const expenseAutomationMissingReceiptsView = (0, toolkit_1.createSlice)({
                 fetchState: 'Completed',
                 error: undefined,
             };
+            const currentId = draft.bulkUpload.currentBatchId;
+            const currentDetails = currentId != null
+                ? draft.bulkUpload.batchDetailsById[currentId]
+                : undefined;
+            if (draft.bulkUpload.phase === 'matching' &&
+                currentId != null &&
+                currentDetails?.status === 'completed') {
+                draft.bulkUpload.phase = 'completed';
+            }
         },
         fetchMoreBatchDetailsFailure(draft, action) {
             draft.bulkUpload.batchDetailsPaginationState = {

package/lib/view/expenseAutomationView/selectors/missingReceiptsSelector.js

@@ -66,9 +66,9 @@ function getExpenseAutomationMissingReceiptsView(state) {
     const batchListChronological = (0, orderBy_1.default)(batchList, (b) => new Date(b.createdAt).valueOf(), 'asc');
     /**
      * Primary "Unmatched" batch = first completed batch in chronological order, preferring the
-     * first batch that still has un_matched/no_match work when any completed batch has such work
-     * (so a newer fully-matched batch does not hide older unmatched receipts). If an earlier batch
-     * in that order has no details yet (still loading), we return undefined until it resolves.
+     * first batch that still has un_matched/no_match work when any completed batch has such work.
+     * Batches without details yet: wait if the list row still reports unmatched work; otherwise skip
+     * so we do not block the whole tab while older rows are not fetched yet.
      */
     const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchListChronological, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
     /** During upload/matching, the in-flight batch may not appear in batchList yet — prefer currentBatchId. */
@@ -121,9 +121,13 @@ function getExpenseAutomationMissingReceiptsView(state) {
         }
         : { total: 0, processed: 0, percentage: 0 };
     const batchListFetchState = bulkUpload.batchListFetchState;
+    /**
+     * When primary batch is not resolved yet, still aggregate unmatched files from every batch
+     * that has details loaded (otherwise past is empty and receipts vanish from the UI).
+     */
     const pastBatches = unmatchedSectionBatchId != null
         ? batchList.filter((b) => b.batchId !== unmatchedSectionBatchId)
-        : [];
+        : batchList;
     const pastUnmatchedFiles = pastBatches.flatMap((b) => {
         const details = bulkUpload.batchDetailsById[b.batchId];
         if (details == null) {
@@ -195,10 +199,18 @@ function getExpenseAutomationMissingReceiptsView(state) {
 function batchDetailsHasUnmatchedWork(details) {
     return details.files.some((f) => f.status === 'un_matched' || f.status === 'no_match');
 }
+/** List row summary before batch details load — aligns with unmatched / possible-match work. */
+function batchListItemHasUnmatchedWork(batch) {
+    return batch.noMatchCount > 0 || batch.possibleMatchesCount > 0;
+}
 /**
  * `batchList` must be in chronological order (oldest first). Picks the primary batch for the
- * top "Unmatched" section. Skips failed detail fetches. Stops at the first batch with no details
- * yet (still loading) so we do not choose a later batch until earlier chronological rows resolve.
+ * top "Unmatched" section. Skips failed detail fetches.
+ *
+ * If details are not loaded for an older batch but the list row reports no unmatched work, we
+ * skip that batch so newer batches with loaded details can be primary (avoids an empty tab when
+ * the first fetch page only loaded newer batches). If the list reports unmatched work but details
+ * are still loading, we wait (undefined) so primary order stays correct once details arrive.
  */
 function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetailsById, failedBatchDetailIds) {
     const failedIds = new Set(failedBatchDetailIds);
@@ -207,9 +219,12 @@ function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetail
             return false;
         }
         const d = batchDetailsById[b.batchId];
-        return (d != null &&
+        if (d != null &&
             d.status === 'completed' &&
-            batchDetailsHasUnmatchedWork(d));
+            batchDetailsHasUnmatchedWork(d)) {
+            return true;
+        }
+        return d == null && batchListItemHasUnmatchedWork(b);
     });
     for (const batch of batchListChronological) {
         if (failedIds.has(batch.batchId)) {
@@ -217,7 +232,10 @@ function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetail
         }
         const details = batchDetailsById[batch.batchId];
         if (details == null) {
-            return undefined;
+            if (batchListItemHasUnmatchedWork(batch)) {
+                return undefined;
+            }
+            continue;
         }
         if (details.status !== 'completed') {
             continue;

package/package.json

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