@zeniai/client-epic-state 4.19.37-betaVR2 → 4.19.37-betaVR21

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

@@ -1,27 +1,68 @@
-import { of } from 'rxjs';
-import { catchError, debounceTime, filter, switchMap } from 'rxjs/operators';
+import { from, merge, of } from 'rxjs';
+import { catchError, debounceTime, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { convertToPeriod } from '../../../../commonStateTypes/timePeriod';
+import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
+import { updateTransactions } from '../../../../entity/transaction/transactionReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
-import { toManualSearchResult, } from '../../payload/missingReceiptsPayload';
+import { supportedTransactionPayloadToManualSearchResult } from '../../payload/missingReceiptsPayload';
 import { searchTransactionsForManualMatch, searchTransactionsForManualMatchFailure, searchTransactionsForManualMatchSuccess, } from '../../reducers/missingReceiptsViewReducer';
-export const searchTransactionsForManualMatchEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(searchTransactionsForManualMatch.match), debounceTime(300), switchMap((action) => {
-    const { query } = action.payload;
-    const searchQuery = JSON.stringify({
-        search_text: query,
-        search_fields: ['date', 'amount', 'vendor_name'],
-    });
-    const encodedQuery = encodeURIComponent(searchQuery);
-    return zeniAPI
-        .getJSON(`${zeniAPI.apiEndPoints.searchMicroServiceBaseUrl}/1.0/transaction-search?query=${encodedQuery}`)
-        .pipe(switchMap((response) => {
-        if (isSuccessResponse(response) && response.data != null) {
-            const results = response.data.transactions.map(toManualSearchResult);
-            return of(searchTransactionsForManualMatchSuccess(results));
+import { toTransactionsSortKey } from '../../types/transactionsViewState';
+/**
+ * `auto_categorized` for manual transaction search (Unmatched).
+ * Backend contract TBD — align with `fetchTransactionCategorizationEpic` (`selectedTab === 'autoCategorized'`)
+ * when the expense-automation API documents the intended filter for this flow.
+ */
+export const MANUAL_TRANSACTION_SEARCH_AUTO_CATEGORIZED = false;
+export const searchTransactionsForManualMatchEpic = (actions$, state$, zeniAPI) => {
+    const searchActions$ = actions$.pipe(filter(searchTransactionsForManualMatch.match));
+    const pagination$ = searchActions$.pipe(filter((a) => a.payload.pageToken != null));
+    const newSearch$ = searchActions$.pipe(filter((a) => a.payload.pageToken == null), debounceTime(300));
+    return merge(pagination$, newSearch$).pipe(switchMap((action) => {
+        const { query, pageToken } = action.payload;
+        const state = state$.value;
+        const { expenseAutomationViewState: { selectedPeriodByTenantId }, expenseAutomationMissingReceiptsViewState: { bulkUpload: { manualSearch, sortKey, sortOrder }, }, } = state;
+        const currentTenant = getCurrentTenant(state);
+        const selectedPeriod = selectedPeriodByTenantId[currentTenant.tenantId];
+        if (selectedPeriod == null) {
+            return of(searchTransactionsForManualMatchFailure({
+                error: createZeniAPIStatus('Unexpected Error', 'Manual search requires a selected accounting period.'),
+            }));
         }
-        return of(searchTransactionsForManualMatchFailure({
-            error: response.status,
-        }));
-    }), catchError((error) => of(searchTransactionsForManualMatchFailure({
-        error: createZeniAPIStatus('Unexpected Error', 'Search transactions for manual match errored: ' +
-            JSON.stringify(error)),
-    }))));
-}));
+        const period = convertToPeriod(selectedPeriod);
+        const queryParam = {
+            start_date: period.start,
+            end_date: period.end,
+            auto_categorized: MANUAL_TRANSACTION_SEARCH_AUTO_CATEGORIZED,
+            sort_by: toTransactionsSortKey(sortKey),
+            sort_order: sortOrder === 'ascending' ? 'asc' : 'desc',
+            page_token: pageToken ?? null,
+            page_size: manualSearch.pageSize,
+            search_text: query,
+        };
+        return zeniAPI
+            .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/expense-automation/transactions?query=${encodeURIComponent(JSON.stringify(queryParam))}`)
+            .pipe(mergeMap((response) => {
+            if (isSuccessResponse(response) && response.data != null) {
+                const { transactions, next_page_token, total_count } = response.data;
+                const append = pageToken != null;
+                const results = transactions.map(supportedTransactionPayloadToManualSearchResult);
+                const actionsOut = [
+                    updateTransactions(transactions, (value) => value.transaction_id, 'merge'),
+                    searchTransactionsForManualMatchSuccess({
+                        append,
+                        nextPageToken: next_page_token ?? null,
+                        results,
+                        totalCount: total_count,
+                    }),
+                ];
+                return from(actionsOut);
+            }
+            return of(searchTransactionsForManualMatchFailure({
+                error: response.status,
+            }));
+        }), catchError((error) => of(searchTransactionsForManualMatchFailure({
+            error: createZeniAPIStatus('Unexpected Error', 'Search transactions for manual match errored: ' +
+                JSON.stringify(error)),
+        }))));
+    }));
+};

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

@@ -1,41 +1,41 @@
-import { of, timer } from 'rxjs';
-import { catchError, filter, mergeMap, switchMap, takeUntil, takeWhile, } from 'rxjs/operators';
+import { EMPTY, from, merge, of, timer } from 'rxjs';
+import { catchError, debounceTime, filter, mergeMap, switchMap, takeUntil, } from 'rxjs/operators';
+import { updateTransactions } from '../../../../entity/transaction/transactionReducer';
 import { isSuccessResponse } from '../../../../responsePayload';
-import { toBatchStatus, } from '../../payload/missingReceiptsPayload';
-import { bulkUploadReceiptsSuccess, clearBulkUpload, fetchBulkUploadBatchDetails, pusherBatchStatusUpdate, updateBulkUploadBatchStatus, } from '../../reducers/missingReceiptsViewReducer';
+import { extractTransactionPayloadsFromBatchFiles, toBatchDetails, } from '../../payload/missingReceiptsPayload';
+import { bulkUploadReceiptsSuccess, clearBulkUpload, fetchBulkUploadBatchDetailsSuccess, fetchBulkUploadBatches, pusherBatchStatusUpdate, requestMissingReceiptsTabNavigation, } from '../../reducers/missingReceiptsViewReducer';
+/** First poll after upload; then interval while batch not resolved via Pusher or API. */
+const FALLBACK_FIRST_DELAY_MS = 30000;
+const FALLBACK_POLL_INTERVAL_MS = 10000;
+function isBatchDetailsCompletedStatus(status) {
+    return status.toLowerCase() === 'completed';
+}
 /**
- * Watches batch status using two strategies:
- * 1. Pusher (primary): Reacts to `pusherBatchStatusUpdate` dispatched by the UI layer
- *    when a Pusher event arrives. Immediately fetches full details on completion.
- * 2. Polling (fallback): Starts a relaxed 10s poll after upload success as a safety net
- *    in case the Pusher event is missed. Stops on completion or `clearBulkUpload`.
+ * On Pusher batch completion: refresh batch list (then fetchMultipleBatchDetailsEpic runs),
+ * and request switching to the Unmatched tab. Debounced to reduce duplicate refreshes.
  */
-// Pusher-driven: when Pusher delivers a completed status, fetch details
-export const pusherBatchStatusCompletionEpic = (actions$) => actions$.pipe(filter(pusherBatchStatusUpdate.match), filter((action) => action.payload.status === 'completed'), mergeMap(() => of(fetchBulkUploadBatchDetails())));
-// Polling fallback: relaxed interval as safety net
-const FALLBACK_POLL_INTERVAL_MS = 10000;
-export const pollBulkUploadBatchStatusEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(bulkUploadReceiptsSuccess.match), switchMap((action) => {
+export const pusherBatchStatusCompletionEpic = (actions$) => actions$.pipe(filter(pusherBatchStatusUpdate.match), filter((action) => action.payload.status === 'completed'), debounceTime(300), mergeMap(() => from([
+    fetchBulkUploadBatches(true),
+    requestMissingReceiptsTabNavigation({ tab: 'unmatched' }),
+])));
+export const pollBulkUploadBatchStatusEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(bulkUploadReceiptsSuccess.match), mergeMap((action) => {
     const { batchId } = action.payload;
-    return timer(0, FALLBACK_POLL_INTERVAL_MS).pipe(takeUntil(actions$.pipe(filter((a) => clearBulkUpload.match(a) ||
-        (pusherBatchStatusUpdate.match(a) &&
-            a.payload.status === 'completed')))), switchMap(() => zeniAPI
-        .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/receipts/batches/${batchId}/status`)
+    return timer(FALLBACK_FIRST_DELAY_MS, FALLBACK_POLL_INTERVAL_MS).pipe(takeUntil(merge(actions$.pipe(filter(clearBulkUpload.match)), actions$.pipe(filter(pusherBatchStatusUpdate.match), filter((a) => a.payload.batchId === batchId)), actions$.pipe(filter(fetchBulkUploadBatchDetailsSuccess.match), filter((a) => a.payload.batchId === batchId)))), switchMap(() => zeniAPI
+        .getJSON(`${zeniAPI.apiEndPoints.communicationAgentMicroServiceBaseUrl}/1.0/batches/${batchId}`)
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
-            const batchStatus = toBatchStatus(response.data);
-            const actions = [
-                updateBulkUploadBatchStatus(batchStatus),
-            ];
-            if (batchStatus.status === 'completed') {
-                actions.push(fetchBulkUploadBatchDetails());
+            if (isBatchDetailsCompletedStatus(response.data.status)) {
+                const actions = [];
+                const transactionPayloads = extractTransactionPayloadsFromBatchFiles(response.data.files);
+                if (transactionPayloads.length > 0) {
+                    actions.push(updateTransactions(transactionPayloads, (value) => value.transaction_id));
+                }
+                actions.push(fetchBulkUploadBatchDetailsSuccess(toBatchDetails(response.data, zeniAPI.apiEndPoints.fileMicroServiceBaseUrl)));
+                actions.push(fetchBulkUploadBatches(true));
+                actions.push(requestMissingReceiptsTabNavigation({ tab: 'unmatched' }));
+                return from(actions);
             }
-            return actions;
-        }
-        return [];
-    }), catchError(() => of()))), takeWhile((action) => {
-        if (fetchBulkUploadBatchDetails.match(action)) {
-            return false;
         }
-        return true;
-    }, true));
+        return EMPTY;
+    }), catchError(() => of()))));
 }));

package/lib/esm/view/expenseAutomationView/payload/missingReceiptsPayload.js

@@ -1,14 +1,20 @@
+import { toURL } from '../../../commonPayloadTypes/urlPayload';
+import { getTransactionPayloadAmount, } from '../../../entity/transaction/payloadTypes/transactionPayload';
 // -- Converter functions --
-export function toBatchFile(payload) {
+export function toBatchFile(payload, filesEndPoint) {
     return {
         attachmentId: payload.attachment_id,
         candidates: payload.candidates?.map((c) => ({
             transactionId: c.transaction_id,
             matchScore: c.match_score,
         })),
+        fileDownloadUrl: payload.file_id != null && filesEndPoint != null
+            ? `${filesEndPoint}/1.0/files/${payload.file_id}?query=${encodeURIComponent(JSON.stringify({ download_file: true }))}`
+            : null,
         fileId: payload.file_id,
         filePreviewUrl: payload.file_preview_url,
         filename: payload.filename,
+        matchSource: payload.match_source,
         matchedTransactionId: payload.matched_transaction?.transaction_id,
         status: payload.status,
     };
@@ -39,11 +45,12 @@ export function extractTransactionPayloadsFromBatchFiles(files) {
 function matchedTransactionPayloadToSupportedTransactionPayload(payload) {
     return {
         transaction_id: payload.transaction_id,
-        transaction_type: payload.transaction_type,
-        transaction_date: payload.transaction_date,
+        transaction_type: payload.transaction_type ?? 'expense',
+        transaction_date: payload.transaction_date ?? '',
         currency_code: payload.currency_code,
         total_amount: payload.amount,
         vendor_name: payload.vendor_name,
+        logo: payload.vendor_logo == null ? undefined : toURL(payload.vendor_logo),
     };
 }
 export function toBatchSummary(payload) {
@@ -55,22 +62,19 @@ export function toBatchSummary(payload) {
         total: payload.total,
     };
 }
-export function toBatchStatus(payload) {
-    return {
-        batchId: payload.batch_id,
-        progress: payload.progress,
-        status: payload.status,
-    };
-}
-export function toBatchDetails(payload) {
+export function toBatchDetails(payload, filesEndPoint) {
     return {
         batchId: payload.batch_id,
         createdAt: payload.created_at,
-        files: payload.files.map(toBatchFile),
+        files: payload.files.map((f) => toBatchFile(f, filesEndPoint)),
         status: payload.status,
         summary: toBatchSummary(payload.summary),
     };
 }
+/** Batch list `status` is a string from the API — compare case-insensitively. */
+export function isBatchListStatusCompleted(status) {
+    return status.toLowerCase() === 'completed';
+}
 export function toBatchListItem(payload) {
     return {
         batchId: payload.batch_id,
@@ -83,15 +87,18 @@ export function toBatchListItem(payload) {
         totalFiles: payload.total_files,
     };
 }
-export function toManualSearchResult(payload) {
+/** Maps expense-automation transaction rows to manual-search list rows (Unmatched tab). */
+export function supportedTransactionPayloadToManualSearchResult(payload) {
+    const amountPayload = getTransactionPayloadAmount(payload);
     return {
-        amount: payload.amount,
-        currencyCode: payload.currency,
-        entityId: payload.entity_id,
-        memo: payload.memo,
+        amount: amountPayload.amount,
+        currencyCode: amountPayload.currencyCode,
+        entityId: payload.vendor_id ?? payload.customer_id ?? '',
+        memo: payload.transaction_memo ?? '',
         transactionDate: payload.transaction_date,
         transactionId: payload.transaction_id,
         transactionType: payload.transaction_type,
-        vendorName: payload.vendor_name,
+        vendorName: payload.vendor_name ?? '',
+        vendorLogo: toURL(payload.logo)?.href,
     };
 }

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

@@ -1,7 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toMonthYearPeriodId } from '../../../commonStateTypes/timePeriod';
+export const getCompletedTransactionsCacheKey = (periodId, sortKey, sortOrder, subTab) => `completed-${subTab}-${sortKey}-${sortOrder === 'ascending' ? 'asc' : 'desc'}-${periodId}`;
 export const initialBulkUploadState = {
     batchDetailsById: {},
+    batchDetailsPaginationState: { fetchState: 'Not-Started', error: undefined },
     batchListByPeriod: {},
     batchListFetchState: { fetchState: 'Not-Started', error: undefined },
     batchStatusById: {},
@@ -10,10 +12,15 @@ export const initialBulkUploadState = {
     confirmMatchStatus: { fetchState: 'Not-Started', error: undefined },
     currentBatchId: undefined,
     currentResultsTab: 'unmatched',
+    failedBatchDetailIds: [],
     manualSearch: {
         fetchState: { fetchState: 'Not-Started', error: undefined },
+        isLoadingMore: false,
+        nextPageToken: null,
+        pageSize: 25,
         results: [],
         searchQuery: '',
+        totalCount: 0,
     },
     phase: 'idle',
     sortKey: 'date',
@@ -23,6 +30,7 @@ export const initialBulkUploadState = {
 };
 export const initialState = {
     bulkUpload: initialBulkUploadState,
+    pendingMissingReceiptsTabNavigation: null,
     uploadReceiptStatusById: {},
     refreshStatus: {
         fetchState: 'Not-Started',
@@ -175,14 +183,16 @@ const expenseAutomationMissingReceiptsView = createSlice({
             };
             draft.bulkUpload.phase = 'idle';
         },
-        updateBulkUploadBatchStatus(draft, action) {
-            const batchStatus = action.payload;
-            draft.bulkUpload.batchStatusById[batchStatus.batchId] = batchStatus;
-        },
         pusherBatchStatusUpdate(draft, action) {
             const batchStatus = action.payload;
             draft.bulkUpload.batchStatusById[batchStatus.batchId] = batchStatus;
         },
+        requestMissingReceiptsTabNavigation(draft, action) {
+            draft.pendingMissingReceiptsTabNavigation = action.payload.tab;
+        },
+        clearMissingReceiptsTabNavigation(draft) {
+            draft.pendingMissingReceiptsTabNavigation = null;
+        },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         fetchBulkUploadBatchDetails(_draft) {
             // trigger epic, no state change needed
@@ -199,6 +209,58 @@ 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 = {
+                fetchState: 'In-Progress',
+                error: undefined,
+            };
+        },
+        fetchMoreBatchDetails(_draft) {
+            _draft.bulkUpload.batchDetailsPaginationState = {
+                fetchState: 'In-Progress',
+                error: undefined,
+            };
+        },
+        fetchMoreBatchDetailsComplete(draft) {
+            draft.bulkUpload.batchDetailsPaginationState = {
+                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 = {
+                fetchState: 'Error',
+                error: action.payload.error,
+            };
         },
         fetchBulkUploadBatches: {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -273,7 +335,6 @@ const expenseAutomationMissingReceiptsView = createSlice({
         },
         setBulkUploadCompletedSubTab(draft, action) {
             draft.bulkUpload.completedSubTab = action.payload;
-            draft.bulkUpload.completedTransactionsByPeriod = {};
         },
         setBulkUploadSortConfig(draft, action) {
             draft.bulkUpload.sortKey = action.payload.sortKey;
@@ -281,28 +342,51 @@ const expenseAutomationMissingReceiptsView = createSlice({
         },
         clearBulkUpload(draft) {
             Object.assign(draft.bulkUpload, initialBulkUploadState);
+            draft.pendingMissingReceiptsTabNavigation = null;
         },
         searchTransactionsForManualMatch: {
             reducer(draft, action) {
-                draft.bulkUpload.manualSearch.searchQuery = action.payload.query;
-                draft.bulkUpload.manualSearch.fetchState = {
-                    fetchState: 'In-Progress',
-                    error: undefined,
-                };
-                draft.bulkUpload.manualSearch.results = [];
+                const { query, pageToken } = action.payload;
+                const isLoadMore = pageToken != null;
+                draft.bulkUpload.manualSearch.searchQuery = query;
+                if (isLoadMore) {
+                    draft.bulkUpload.manualSearch.isLoadingMore = true;
+                }
+                else {
+                    draft.bulkUpload.manualSearch.isLoadingMore = false;
+                    draft.bulkUpload.manualSearch.results = [];
+                    draft.bulkUpload.manualSearch.nextPageToken = null;
+                    draft.bulkUpload.manualSearch.totalCount = 0;
+                    draft.bulkUpload.manualSearch.fetchState = {
+                        fetchState: 'In-Progress',
+                        error: undefined,
+                    };
+                }
             },
-            prepare(query) {
-                return { payload: { query } };
+            prepare(query, pageToken) {
+                return { payload: { query, pageToken: pageToken ?? undefined } };
             },
         },
         searchTransactionsForManualMatchSuccess(draft, action) {
-            draft.bulkUpload.manualSearch.results = action.payload;
+            const { append, nextPageToken, results, totalCount } = action.payload;
+            if (append) {
+                const merged = [...draft.bulkUpload.manualSearch.results, ...results];
+                const byId = new Map(merged.map((r) => [r.transactionId, r]));
+                draft.bulkUpload.manualSearch.results = Array.from(byId.values());
+            }
+            else {
+                draft.bulkUpload.manualSearch.results = results;
+            }
+            draft.bulkUpload.manualSearch.nextPageToken = nextPageToken;
+            draft.bulkUpload.manualSearch.totalCount = totalCount;
+            draft.bulkUpload.manualSearch.isLoadingMore = false;
             draft.bulkUpload.manualSearch.fetchState = {
                 fetchState: 'Completed',
                 error: undefined,
             };
         },
         searchTransactionsForManualMatchFailure(draft, action) {
+            draft.bulkUpload.manualSearch.isLoadingMore = false;
             draft.bulkUpload.manualSearch.fetchState = {
                 fetchState: 'Error',
                 error: action.payload.error,
@@ -328,15 +412,16 @@ const expenseAutomationMissingReceiptsView = createSlice({
                     }
                 }
             },
-            prepare(pageToken) {
-                return { payload: { pageToken } };
+            prepare(pageToken, cacheOverride) {
+                return { payload: { pageToken, cacheOverride } };
             },
         },
         fetchCompletedTransactionsSuccess(draft, action) {
             const { transactionIds, nextPageToken, totalCount, selectedPeriod, isInitialLoad } = action.payload;
             const periodId = toMonthYearPeriodId(selectedPeriod);
+            const cacheKey = getCompletedTransactionsCacheKey(periodId, draft.bulkUpload.sortKey, draft.bulkUpload.sortOrder, draft.bulkUpload.completedSubTab);
             if (isInitialLoad) {
-                draft.bulkUpload.completedTransactionsByPeriod[periodId] = {
+                draft.bulkUpload.completedTransactionsByPeriod[cacheKey] = {
                     transactionIds,
                     nextPageToken,
                     totalCount,
@@ -344,7 +429,7 @@ const expenseAutomationMissingReceiptsView = createSlice({
                 };
             }
             else {
-                const existing = draft.bulkUpload.completedTransactionsByPeriod[periodId];
+                const existing = draft.bulkUpload.completedTransactionsByPeriod[cacheKey];
                 if (existing != null) {
                     existing.transactionIds.push(...transactionIds);
                     existing.nextPageToken = nextPageToken;
@@ -352,7 +437,7 @@ const expenseAutomationMissingReceiptsView = createSlice({
                     existing.fetchState = { fetchState: 'Completed', error: undefined };
                 }
                 else {
-                    draft.bulkUpload.completedTransactionsByPeriod[periodId] = {
+                    draft.bulkUpload.completedTransactionsByPeriod[cacheKey] = {
                         transactionIds,
                         nextPageToken,
                         totalCount,
@@ -363,7 +448,8 @@ const expenseAutomationMissingReceiptsView = createSlice({
         },
         fetchCompletedTransactionsFailure(draft, action) {
             const periodId = toMonthYearPeriodId(action.payload.selectedPeriod);
-            const existing = draft.bulkUpload.completedTransactionsByPeriod[periodId];
+            const cacheKey = getCompletedTransactionsCacheKey(periodId, draft.bulkUpload.sortKey, draft.bulkUpload.sortOrder, draft.bulkUpload.completedSubTab);
+            const existing = draft.bulkUpload.completedTransactionsByPeriod[cacheKey];
             if (existing != null) {
                 existing.fetchState = {
                     fetchState: 'Error',
@@ -371,7 +457,7 @@ const expenseAutomationMissingReceiptsView = createSlice({
                 };
             }
             else {
-                draft.bulkUpload.completedTransactionsByPeriod[periodId] = {
+                draft.bulkUpload.completedTransactionsByPeriod[cacheKey] = {
                     fetchState: { fetchState: 'Error', error: action.payload.error },
                     nextPageToken: null,
                     totalCount: 0,
@@ -383,7 +469,7 @@ const expenseAutomationMissingReceiptsView = createSlice({
 });
 export const { fetchMissingReceipts, fetchMissingReceiptsSuccess, fetchMissingReceiptsFailure, uploadMissingReceiptSuccess, updateMissingReceiptUploadState, updateMissingReceiptsUIState, markMissingReceiptAsDone, clearExpenseAutomationMissingReceiptsView, 
 // Bulk Upload
-bulkUploadReceipts, updateBulkUploadProgress, bulkUploadReceiptsSuccess, bulkUploadReceiptsFailure, updateBulkUploadBatchStatus, pusherBatchStatusUpdate, fetchBulkUploadBatchDetails, fetchBulkUploadBatchDetailsSuccess, fetchBulkUploadBatchDetailsFailure, storeBatchDetails, fetchBulkUploadBatches, fetchBulkUploadBatchesSuccess, fetchBulkUploadBatchesFailure, confirmBulkUploadMatch, confirmBulkUploadMatchSuccess, confirmBulkUploadMatchFailure, setBulkUploadResultsTab, setBulkUploadCompletedSubTab, setBulkUploadSortConfig, clearBulkUpload, searchTransactionsForManualMatch, searchTransactionsForManualMatchSuccess, searchTransactionsForManualMatchFailure, clearManualSearchResults, 
+bulkUploadReceipts, updateBulkUploadProgress, bulkUploadReceiptsSuccess, bulkUploadReceiptsFailure, pusherBatchStatusUpdate, requestMissingReceiptsTabNavigation, clearMissingReceiptsTabNavigation, fetchBulkUploadBatchDetails, fetchBulkUploadBatchDetailsSuccess, fetchBulkUploadBatchDetailsFailure, storeBatchDetails, batchDetailFetchFailed, setInitialBatchDetailsLoading, fetchMoreBatchDetails, fetchMoreBatchDetailsComplete, fetchMoreBatchDetailsFailure, fetchBulkUploadBatches, fetchBulkUploadBatchesSuccess, fetchBulkUploadBatchesFailure, confirmBulkUploadMatch, confirmBulkUploadMatchSuccess, confirmBulkUploadMatchFailure, setBulkUploadResultsTab, setBulkUploadCompletedSubTab, setBulkUploadSortConfig, clearBulkUpload, searchTransactionsForManualMatch, searchTransactionsForManualMatchSuccess, searchTransactionsForManualMatchFailure, clearManualSearchResults, 
 // Completed Transactions
 fetchCompletedTransactions, fetchCompletedTransactionsSuccess, fetchCompletedTransactionsFailure, } = expenseAutomationMissingReceiptsView.actions;
 export default expenseAutomationMissingReceiptsView.reducer;