@zeniai/client-epic-state 5.0.64-betaSS1 → 5.0.65-betaML1

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

@@ -3,7 +3,7 @@ import recordGet from 'lodash/get';
 import uniq from 'lodash/uniq';
 import { toMonthYearPeriodId, } from '../../../commonStateTypes/timePeriod';
 import { isVendorTransaction } from '../../../entity/transaction/stateTypes/vendorTransaction';
-import { MAX_SELECTION_LIMIT, checkIfAllLineItemsAreCategoryClassFilled, filterAutoTabLineItems, mergeTabSpecificLineItems, removeTransactionFromTabView, setEntityRecommendationForLineIdInLocalData, toSetAllLineItemsToCategoryClass, toTransactionDetailLocalData, } from '../helpers/transactionCategorizationLocalDataHelper';
+import { filterAutoTabLineItems, mergeTabSpecificLineItems, removeTransactionFromTabView, setEntityRecommendationForLineIdInLocalData, shouldAutoSelectAndAdd, toSetAllLineItemsToCategoryClass, toTransactionDetailLocalData, } from '../helpers/transactionCategorizationLocalDataHelper';
 import { DEFAULT_COMPLETED_SUB_TAB, } from '../types/completedSubTab';
 export const initialTransactionTabViewState = {
     saveStatus: {
@@ -65,15 +65,20 @@ export const initialState = {
  *
  * Snapshot scope (deliberately narrow):
  * - Captured: `pageToken`, `totalCount`, `transactionIdsBySelectedPeriod`,
- *   `fetchState`, `error`. These are the keys the fetch epic's cache check
- *   reads to decide whether to short-circuit a sub-tab revisit.
+ *   `fetchState`, `error`, `scrollPosition`. The first five are the keys the
+ *   fetch epic's cache check reads to decide whether to short-circuit a
+ *   sub-tab revisit; `scrollPosition` is captured per sub-tab so revisiting
+ *   restores the user's last offset and switching to a never-visited sub-tab
+ *   starts at the top instead of inheriting the outgoing sub-tab's offset
+ *   (which would land the user at a meaningless row index against a
+ *   completely different list).
  * - Intentionally NOT captured (left in place on `autoCat` and inherited by
  *   the incoming sub-tab):
  *     - `uiState.searchString`, `uiState.sortKey`, `uiState.sortOrder`,
- *       `uiState.scrollPosition`, `uiState.nodeCollapseState`,
- *       `uiState.limit` — search and sort are user-applied preferences that
- *       persist across sub-tabs by design (a search query stays active when
- *       the user toggles between Manual / AI Accountant).
+ *       `uiState.nodeCollapseState`, `uiState.limit` — search and sort are
+ *       user-applied preferences that persist across sub-tabs by design (a
+ *       search query stays active when the user toggles between Manual / AI
+ *       Accountant).
  *     - `selectedCheckBoxTransactionIds` — selection state is intentionally
  *       cleared at the action source (the fetch epic / save flow), not
  *       by the snapshot path. Carrying selection across sub-tabs is safe
@@ -100,6 +105,7 @@ function snapshotAutoCategorizedTab(autoCat) {
         error: autoCat.error,
         fetchState: normalisedFetchState,
         pageToken: autoCat.uiState.pageToken,
+        scrollPosition: autoCat.uiState.scrollPosition,
         totalCount: { ...autoCat.uiState.totalCount },
         transactionIdsBySelectedPeriod,
     };
@@ -336,6 +342,7 @@ const expenseAutomationTransactionsView = createSlice({
                 if (cached != null) {
                     autoCat.uiState.pageToken = cached.pageToken;
                     autoCat.uiState.totalCount = { ...cached.totalCount };
+                    autoCat.uiState.scrollPosition = cached.scrollPosition;
                     autoCat.transactionIdsBySelectedPeriod = {
                         ...cached.transactionIdsBySelectedPeriod,
                     };
@@ -346,9 +353,15 @@ const expenseAutomationTransactionsView = createSlice({
                     // Sub-tab has never been visited — clear the active slot so the
                     // view-epic's `fetchState === 'Not-Started' || transactionIds.length
                     // === 0` cache check falls through and triggers a fresh page-1
-                    // fetch for the new dataset.
+                    // fetch for the new dataset. `scrollPosition` is reset to the top
+                    // so the incoming list isn't anchored to the outgoing sub-tab's
+                    // offset (different rows → previous offset is meaningless).
                     autoCat.uiState.pageToken = null;
                     autoCat.uiState.totalCount = {};
+                    autoCat.uiState.scrollPosition = {
+                        scrollTop: 0,
+                        scrollLeft: undefined,
+                    };
                     autoCat.transactionIdsBySelectedPeriod = {};
                     autoCat.fetchState = 'Not-Started';
                     autoCat.error = undefined;
@@ -407,12 +420,9 @@ const expenseAutomationTransactionsView = createSlice({
                     const selectedCheckBoxTransactionIds = draft.transactionCategorizationView[selectedTab]
                         .selectedCheckBoxTransactionIds;
                     if (selectedTransaction != null &&
-                        checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                        selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                        selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                        shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                         draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
-                            ...draft.transactionCategorizationView[selectedTab]
-                                .selectedCheckBoxTransactionIds,
+                            ...selectedCheckBoxTransactionIds,
                             transactionId,
                         ];
                     }
@@ -495,9 +505,26 @@ const expenseAutomationTransactionsView = createSlice({
                 const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
                     .transactionReviewLocalDataById, transactionId.id, undefined);
                 if (transactionLocalData != null) {
+                    const newLocalData = setEntityRecommendationForLineIdInLocalData(draft.transactionCategorizationView[selectedTab], transaction, transactionLocalData.transactionReviewLocalData, entity, lineIds, uncategorizedAccounts, action.payload.recommendationWithCOTByLineId, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled);
+                    // Release the per-line fetch flag for every line this fetch
+                    // covered. Done in-place on the freshly returned local data
+                    // (the helper produces a new mutable object), before we write
+                    // it back to the draft.
+                    lineIds.forEach((lineId) => {
+                        const lineItem = newLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            newLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
                     draft.transactionCategorizationView[selectedTab].transactionReviewLocalDataById[transaction.id] = {
                         transactionId: transaction.id,
-                        transactionReviewLocalData: setEntityRecommendationForLineIdInLocalData(draft.transactionCategorizationView[selectedTab], transaction, transactionLocalData.transactionReviewLocalData, entity, lineIds, uncategorizedAccounts, action.payload.recommendationWithCOTByLineId, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled),
+                        transactionReviewLocalData: newLocalData,
                     };
                     // Mark transaction as dirty (autofill happened)
                     if (!draft.transactionCategorizationView[selectedTab].transactionIdsWithUnsavedData.includes(transaction.id)) {
@@ -510,6 +537,99 @@ const expenseAutomationTransactionsView = createSlice({
                 }
             },
         },
+        // Start arm of the line-update recommendations fetch. Flips covered
+        // lines to In-Progress AND removes the transaction from
+        // selectedCheckBoxTransactionIds — the row is unchecked + disabled
+        // until either the success arm (recheck if limit allows) or the
+        // failure arm releases the per-line flag.
+        markCategoryClassRecommendationsInProgressForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds } = action.payload;
+                const tab = draft.transactionCategorizationView[selectedTab];
+                const transactionLocalData = recordGet(tab.transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'In-Progress',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+                // Uncheck on fetch start: the row's existing category/class are
+                // stale after a payee change, so we drop the auto-selection until
+                // fresh recommendations land.
+                if (tab.selectedCheckBoxTransactionIds.includes(transactionId.id)) {
+                    tab.selectedCheckBoxTransactionIds =
+                        tab.selectedCheckBoxTransactionIds.filter((id) => id !== transactionId.id);
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds) {
+                return { payload: { selectedTab, transactionId, lineIds } };
+            },
+        },
+        // Completed arm. Used by the epic when the HTTP call succeeds but the
+        // server returned no per-line recommendations — we still need to
+        // release the In-Progress flag so the skeleton resolves. Successful
+        // responses with recommendations go through
+        // setEntityRecommendationForLineIdsForCategorization instead (which
+        // also flips the lines to Completed).
+        markCategoryClassRecommendationsCompletedForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds } = action.payload;
+                const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
+                    .transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds) {
+                return { payload: { selectedTab, transactionId, lineIds } };
+            },
+        },
+        // Failure arm. Flips covered lines to Error so the skeleton resolves
+        // and downstream UI can react to the failure. The transaction stays
+        // unchecked from the start-arm action.
+        markCategoryClassRecommendationsFailureForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds, error } = action.payload;
+                const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
+                    .transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Error',
+                                    error,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds, error) {
+                return { payload: { selectedTab, transactionId, lineIds, error } };
+            },
+        },
         fetchTransactionCategorizationSuccess(draft, action) {
             const { selectedTab, refreshViewInBackground } = action.payload;
             if (draft.transactionCategorizationView[selectedTab].fetchState ===
@@ -605,9 +725,7 @@ const expenseAutomationTransactionsView = createSlice({
                     .selectedCheckBoxTransactionIds;
                 if (newTransactionLocalData.customer != null &&
                     newTransactionLocalData.customer.id != null &&
-                    checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                    selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                    selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                    shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                     draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
                         ...selectedCheckBoxTransactionIds,
                         transactionId,
@@ -681,9 +799,7 @@ const expenseAutomationTransactionsView = createSlice({
                     .selectedCheckBoxTransactionIds;
                 if (newTransactionLocalData.vendor != null &&
                     newTransactionLocalData.vendor.id != null &&
-                    checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                    selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                    selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                    shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                     draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
                         ...selectedCheckBoxTransactionIds,
                         transactionId,
@@ -916,5 +1032,5 @@ const expenseAutomationTransactionsView = createSlice({
         },
     },
 });
-export const { fetchTransactionCategorization, updateTransactionCategorizationUIState, initializeTransactionCategorizationViewLocalData, saveTransactionCategorizationLocalData, fetchTransactionCategorizationFailure, saveTransactionCategorization, updateTransactionCategorization, updateCurrentSelectedTransactionCategorizationTab, updateTransactionCategorizationCompletedSubTab, updateTransactionCategorizationSaveStatus, markTransactionAsNotMiscategorized, updateStatusForTransactionNotMiscategorizedUpdateForCategorization, updateSelectedVendorForTransaction, updateSelectedCustomerForTransaction, setAllItemsToCategoryClassInLocalDataForCategorization, updateTotalCountForTransactionCategorization, updateParentTotalCountForTab, fetchTransactionCategorizationSuccess, resetOtherTabsFetchState, fetchTransactionCategorizationView, updateSelectedCheckboxTransactionIds, clearExpenseAutomationTransactionsViewPerTabView, clearExpenseAutomationTransactionsView, setEntityRecommendationForLineIdsForCategorization, updateSelectedTransactionId, syncTransactionCategorizationFromDetailSave, backgroundRefetchReviewTab, updateTransactionCategorizationUploadReceiptState, uploadTransactionCategorizationReceiptSuccess, } = expenseAutomationTransactionsView.actions;
+export const { fetchTransactionCategorization, updateTransactionCategorizationUIState, initializeTransactionCategorizationViewLocalData, saveTransactionCategorizationLocalData, fetchTransactionCategorizationFailure, saveTransactionCategorization, updateTransactionCategorization, updateCurrentSelectedTransactionCategorizationTab, updateTransactionCategorizationCompletedSubTab, updateTransactionCategorizationSaveStatus, markTransactionAsNotMiscategorized, updateStatusForTransactionNotMiscategorizedUpdateForCategorization, updateSelectedVendorForTransaction, updateSelectedCustomerForTransaction, setAllItemsToCategoryClassInLocalDataForCategorization, updateTotalCountForTransactionCategorization, updateParentTotalCountForTab, fetchTransactionCategorizationSuccess, resetOtherTabsFetchState, fetchTransactionCategorizationView, updateSelectedCheckboxTransactionIds, clearExpenseAutomationTransactionsViewPerTabView, clearExpenseAutomationTransactionsView, setEntityRecommendationForLineIdsForCategorization, markCategoryClassRecommendationsInProgressForCategorization, markCategoryClassRecommendationsCompletedForCategorization, markCategoryClassRecommendationsFailureForCategorization, updateSelectedTransactionId, syncTransactionCategorizationFromDetailSave, backgroundRefetchReviewTab, updateTransactionCategorizationUploadReceiptState, uploadTransactionCategorizationReceiptSuccess, } = expenseAutomationTransactionsView.actions;
 export default expenseAutomationTransactionsView.reducer;

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

@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit';
 import omit from 'lodash/omit';
 import { reduceAllFetchState, reduceAnyFetchState, } from '../../../commonStateTypes/reduceFetchState';
 import { toMonthYearPeriodId } from '../../../commonStateTypes/timePeriod';
@@ -8,6 +9,29 @@ import { getAccountList, getNestedAccountListHierarchy, getUncategorizedAccounts
 import { getClassList, getNestedClassListHierarchy, } from '../../classList/classListSelector';
 import { getProjectList } from '../../projectList/projectListSelector';
 import { getAllSteps } from '../selectorTypes/expenseAutomationViewSelectorTypes';
+// Per-transaction "any line is fetching category/class recommendations?"
+// map for the active categorization tab. Memoized on the active tab's
+// transactionReviewLocalDataById reference, so steady state (no fetches
+// in flight) recomputes only when local data changes — and the row-table
+// can read a single map lookup per row instead of re-iterating the
+// row's lineItemById in the render path.
+export const getCategorizationInFlightRecommendationsByTransactionId = createSelector((state) => state.expenseAutomationTransactionsViewState
+    .selectedTransactionCategorizationTab, (state) => state.expenseAutomationTransactionsViewState
+    .transactionCategorizationView, (selectedTab, transactionCategorizationView) => {
+    const tab = transactionCategorizationView[selectedTab];
+    const result = {};
+    for (const [transactionId, data] of Object.entries(tab.transactionReviewLocalDataById)) {
+        const lineItems = Object.values(data.transactionReviewLocalData.lineItemById);
+        if (lineItems.some((lineItem) => lineItem.categoryClassRecommendationsFetchState?.fetchState ===
+            'In-Progress')) {
+            result[transactionId] = true;
+        }
+    }
+    return result;
+});
+// Page-level "any line on the active tab is in flight?" flag. Drives the
+// list-page Save disable.
+export const getCategorizationHasInFlightRecommendations = createSelector(getCategorizationInFlightRecommendationsByTransactionId, (inFlightByTransactionId) => Object.keys(inFlightByTransactionId).length > 0);
 export function getExpenseAutomationTransactionView(state) {
     const { accountState, classState, classListState, accountListState, expenseAutomationTransactionsViewState, expenseAutomationViewState, projectState, projectListState, transactionState, monthEndCloseChecksState, monthEndCloseChecksViewState, } = state;
     const { selectedTransactionCategorizationCompletedSubTab, selectedTransactionCategorizationTab, } = expenseAutomationTransactionsViewState;
@@ -103,6 +127,8 @@ export function getExpenseAutomationTransactionView(state) {
         : [];
     const transactionCompletionStatus = allSteps.find((step) => step.step === 'transaction_categorization')?.completionStatus;
     const completionStatus = transactionCompletionStatus ?? 'incomplete';
+    const inFlightCategoryClassRecommendationsByTransactionId = getCategorizationInFlightRecommendationsByTransactionId(state);
+    const hasInFlightCategoryClassRecommendations = getCategorizationHasInFlightRecommendations(state);
     return {
         version: 0,
         fetchState: fetchStatus.fetchState,
@@ -116,6 +142,8 @@ export function getExpenseAutomationTransactionView(state) {
         classList: allClasses,
         accountsHierarchyList,
         classHierarchyList,
+        hasInFlightCategoryClassRecommendations,
+        inFlightCategoryClassRecommendationsByTransactionId,
         isAccountingProjectsEnabled,
         projectList,
         transactionLocalData,

package/lib/esm/view/recommendation/fetchEntityRecommendationsForLineUpdateEpic.js

@@ -0,0 +1,78 @@
+import { concat, of, timer } from 'rxjs';
+import { catchError, debounce, filter, groupBy, mergeMap, switchMap, } from 'rxjs/operators';
+import { getIsAccountingClassesEnabled } from '../../entity/tenant/tenantSelector';
+import { getTransactionWithCOT, getTransactionWithCOTFromRecommendations, } from '../../entity/transaction/transactionHelper';
+import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
+import { getUncategorizedAccounts } from '../accountList/accountListSelector';
+import { markCategoryClassRecommendationsCompletedForCategorization, markCategoryClassRecommendationsFailureForCategorization, markCategoryClassRecommendationsInProgressForCategorization, setEntityRecommendationForLineIdsForCategorization, } from '../expenseAutomationView/reducers/transactionsViewReducer';
+import { markCategoryClassRecommendationsCompletedForTransactionDetail, markCategoryClassRecommendationsFailureForTransactionDetail, markCategoryClassRecommendationsInProgressForTransactionDetail, setEntityRecommendationForLineIdsForTransactionDetail, } from '../transactionDetail/transactionDetailReducer';
+import { buildRecommendationUrl, getRecommendationByLineIdWithCOTFromRecommendationPayloadWithCOT, } from './recommendationHelper';
+import { fetchEntityRecommendationsForLineUpdate } from './recommendationReducer';
+// Close the per-target groupBy bucket after this much idle time so inactive
+// groups don't accumulate forever (each group holds a Subject + a chain of
+// active subscribers; without a duration selector groupBy retains them for
+// the lifetime of the source observable, which is the lifetime of the app).
+// Picked at 60s to leave a generous window for re-fetches on the same
+// payee/transaction/line target while still bounding memory.
+const GROUP_INACTIVITY_TIMEOUT_MS = 60000;
+// Build the groupBy key. Same flow + same transaction + same line set
+// share a target so switchMap can cancel an in-flight prior fetch. Use
+// NUL (\u0000) as separator because it can never appear in transaction
+// or line ids (vs the `|` used in an earlier WIP which collides with
+// pipe-delimited synthetic ids).
+const SEPARATOR = '\u0000';
+const toGroupKey = (flowType, transactionId, lineIds) => `${flowType}${SEPARATOR}${transactionId}${SEPARATOR}${[...lineIds]
+    .sort((a, b) => a.localeCompare(b))
+    .join(SEPARATOR)}`;
+// Targeted recommendations fetch that drives the per-line skeleton, the
+// list-page row-checkbox uncheck/recheck, and the page-level Save
+// disable.
+//
+// Concurrency model:
+//   - groupBy by (flowType, transactionId, sorted lineIds) so distinct
+//     targets run in parallel.
+//   - inside each group, switchMap so a re-fetch on the SAME target
+//     cancels any prior in-flight request for that target.
+//   - groupBy duration selector closes idle groups to bound memory.
+export const fetchEntityRecommendationsForLineUpdateEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchEntityRecommendationsForLineUpdate.match), groupBy((action) => toGroupKey(action.payload.flowType, action.payload.transactionDetails.transactionId.id, action.payload.transactionDetails.lineIds), undefined, (group$) => group$.pipe(debounce(() => timer(GROUP_INACTIVITY_TIMEOUT_MS)))), mergeMap((group$) => group$.pipe(switchMap((action) => {
+    const { entity, amount, transactionDetails, flowType, selectedTab, isFetchCOT, isUncategorizedExpenseCategoryEnabled, } = action.payload;
+    const { transactionId, transaction, lineIds } = transactionDetails;
+    // Synchronously emit the start arm so the per-line skeleton +
+    // row uncheck happen before the HTTP request begins.
+    const startAction = flowType === 'categorization' && selectedTab != null
+        ? markCategoryClassRecommendationsInProgressForCategorization(selectedTab, transactionId, lineIds)
+        : markCategoryClassRecommendationsInProgressForTransactionDetail(transactionId, lineIds);
+    const url = buildRecommendationUrl(zeniAPI.apiEndPoints.accountMicroServiceBaseUrl, entity, amount, transactionDetails, isFetchCOT === true);
+    const httpStream$ = zeniAPI
+        .getJSON(url)
+        .pipe(mergeMap((response) => {
+        if (!isSuccessResponse(response) || response.data == null) {
+            return of(flowType === 'categorization' && selectedTab != null
+                ? markCategoryClassRecommendationsFailureForCategorization(selectedTab, transactionId, lineIds, response.status)
+                : markCategoryClassRecommendationsFailureForTransactionDetail(transactionId, lineIds, response.status));
+        }
+        const recommendationWithCOTByLineId = getRecommendationByLineIdWithCOTFromRecommendationPayloadWithCOT(response.data.recommendations, lineIds);
+        // HTTP 200 with no per-line recommendations: NOT an error.
+        // Flip lines to Completed so the skeleton resolves and
+        // downstream UI can treat this as "we tried, nothing to
+        // apply".
+        if (recommendationWithCOTByLineId == null) {
+            return of(flowType === 'categorization' && selectedTab != null
+                ? markCategoryClassRecommendationsCompletedForCategorization(selectedTab, transactionId, lineIds)
+                : markCategoryClassRecommendationsCompletedForTransactionDetail(transactionId, lineIds));
+        }
+        const transactionWithCOT = isFetchCOT === true
+            ? getTransactionWithCOTFromRecommendations(transaction, recommendationWithCOTByLineId)
+            : getTransactionWithCOT(transaction);
+        const uncategorizedIncomeExpense = getUncategorizedAccounts(state$.value.accountState, state$.value.accountListState, 'accountList');
+        if (flowType === 'categorization' && selectedTab != null) {
+            return of(setEntityRecommendationForLineIdsForCategorization(selectedTab, transactionId, transactionWithCOT, lineIds, entity, amount, recommendationWithCOTByLineId, uncategorizedIncomeExpense, isUncategorizedExpenseCategoryEnabled, getIsAccountingClassesEnabled(state$.value)));
+        }
+        return of(setEntityRecommendationForLineIdsForTransactionDetail(transactionId, transactionWithCOT, lineIds, entity, amount, recommendationWithCOTByLineId, uncategorizedIncomeExpense));
+    }), catchError((error) => of(flowType === 'categorization' && selectedTab != null
+        ? markCategoryClassRecommendationsFailureForCategorization(selectedTab, transactionId, lineIds, createZeniAPIStatus('Unexpected Error', 'fetchEntityRecommendationsForLineUpdate failed: ' +
+            JSON.stringify(error)))
+        : markCategoryClassRecommendationsFailureForTransactionDetail(transactionId, lineIds, createZeniAPIStatus('Unexpected Error', 'fetchEntityRecommendationsForLineUpdate failed: ' +
+            JSON.stringify(error))))));
+    return concat(of(startAction), httpStream$);
+}))));

package/lib/esm/view/recommendation/recommendationHelper.js

@@ -1,4 +1,5 @@
 import { transformRecommendation, transformRecommendationWithCOT, } from '../../entity/transaction/payloadTypes/transactionPayload';
+import { getActualTransactionID } from '../transactionDetail/transactionDetailState';
 export const getRecommendationFromRecommendationPayload = (payload) => {
     if (payload == null || payload.length === 0) {
         return undefined;
@@ -37,6 +38,34 @@ export const getRecommendationWithCOTFromRecommendationPayloadWithCOT = (payload
     });
     return recommendations;
 };
+// Pluralized URL segment for entity types. Mirrors the legacy
+// fetchEntityRecommendationsByTransactionIdEpic.toEntityTypeURL.
+const toEntityTypeUrlSegment = (entityType) => `${entityType}s`;
+// Build the recommendations URL for a single entity + transaction target.
+// Centralizes the URL shape so the legacy
+// fetchEntityRecommendationsByTransactionIdEpic and the new
+// fetchEntityRecommendationsForLineUpdateEpic stay in lockstep.
+export const buildRecommendationUrl = (accountMicroServiceBaseUrl, entity, amount, transactionDetails, isFetchCOT) => {
+    const entityQuery = {
+        entity_name: entity.name,
+        entity_type: entity.type,
+    };
+    // Entity-id-null case: server expects entity_name / entity_type query
+    // instead of the {entityType}/{qboId}/recommendations path.
+    if (entity.qboId === entity.name) {
+        return `${accountMicroServiceBaseUrl}/1.0/recommendations?query=${encodeURIComponent(JSON.stringify(entityQuery))}`;
+    }
+    const query = {
+        amount,
+        transaction_id: getActualTransactionID(transactionDetails.transactionId.id),
+        transaction_type: transactionDetails.transaction.type,
+        line_ids: transactionDetails.lineIds,
+    };
+    if (isFetchCOT === true) {
+        query.include_cot = true;
+    }
+    return `${accountMicroServiceBaseUrl}/1.0/${toEntityTypeUrlSegment(entity.type)}/${entity.qboId}/recommendations?query=${encodeURIComponent(JSON.stringify(query))}`;
+};
 export const getRecommendationByLineIdWithCOTFromRecommendationPayloadWithCOT = (recommendationPayload, lineIds) => {
     if (recommendationPayload.length === 0) {
         return undefined;

package/lib/esm/view/recommendation/recommendationReducer.js

@@ -33,6 +33,41 @@ const recommendation = createSlice({
                 };
             },
         },
+        // Targeted recommendations fetch fired when the user changes the
+        // payee/customer on a single transaction line (or the JE sibling set
+        // for that change). Routed by `fetchEntityRecommendationsForLineUpdateEpic`
+        // which uses groupBy + switchMap to keep fetches for distinct targets
+        // running in parallel while same-target re-fetches still cancel each
+        // other. The flowType discriminator selects the categorization vs
+        // detail slice for the per-line In-Progress / Completed / Error state.
+        fetchEntityRecommendationsForLineUpdate: {
+            reducer(draft, action) {
+                const { entity } = action.payload;
+                const key = getEntityRecommendationKey(entity.type, entity.id);
+                // Unconditional flip to In-Progress; the previous variant only
+                // seeded when missing, which left stale fetchStates when a prior
+                // fetch had already populated the entity entry.
+                draft.recommendationByEntity[key] = {
+                    ...(draft.recommendationByEntity[key] ??
+                        initialEntityRecommendationState),
+                    fetchState: 'In-Progress',
+                    error: undefined,
+                };
+            },
+            prepare(entity, amount, transactionDetails, flowType, selectedTab, isFetchCOT = false, isUncategorizedExpenseCategoryEnabled) {
+                return {
+                    payload: {
+                        entity,
+                        amount,
+                        transactionDetails,
+                        flowType,
+                        selectedTab,
+                        isFetchCOT,
+                        isUncategorizedExpenseCategoryEnabled,
+                    },
+                };
+            },
+        },
         fetchRecommendationByEntityName: {
             reducer(draft, action) {
                 const { entityName, entityType } = action.payload;
@@ -111,7 +146,7 @@ const recommendation = createSlice({
         },
     },
 });
-export const { fetchEntityRecommendationsByTransactionId, fetchRecommendationByEntityName, fetchRecommendationByEntityId, updateRecommendationForEntity, updateRecommendationForEntityFailure, indicateReadyToInitializeRecommendation, clearRecommendation, } = recommendation.actions;
+export const { fetchEntityRecommendationsByTransactionId, fetchEntityRecommendationsForLineUpdate, fetchRecommendationByEntityName, fetchRecommendationByEntityId, updateRecommendationForEntity, updateRecommendationForEntityFailure, indicateReadyToInitializeRecommendation, clearRecommendation, } = recommendation.actions;
 export default recommendation.reducer;
 const doUpdateRecommendationForEntity = (draft, entityId, entityType, payload) => {
     const key = getEntityRecommendationKey(entityType, entityId);

package/lib/esm/view/transactionDetail/transactionDetailReducer.js

@@ -365,6 +365,21 @@ const transactionDetail = createSlice({
                 const detail = recordGet(draft.transactionDetailById, key, undefined);
                 if (detail != null) {
                     const newLocalData = setEntityRecommendationForLineIdInLocalData(transaction, detail.transactionDetailLocalData, action.payload.entity, lineIds, uncategorizedIncomeExpense, recommendationWithCOTByLineId);
+                    // Release the per-line fetch flag for every line this fetch
+                    // covered so the inline skeleton resolves and the page-level
+                    // Save button can re-enable.
+                    lineIds.forEach((lineId) => {
+                        const lineItem = newLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            newLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
                     draft.transactionDetailById[key] = {
                         ...detail,
                         transactionDetailLocalData: newLocalData,
@@ -385,6 +400,84 @@ const transactionDetail = createSlice({
                 };
             },
         },
+        // Start arm of the line-update recommendations fetch for the detail
+        // page. Flips covered lines to In-Progress; detail page has no
+        // checkbox, so no auto-uncheck side effect.
+        markCategoryClassRecommendationsInProgressForTransactionDetail: {
+            reducer(draft, action) {
+                const { transactionId, lineIds } = action.payload;
+                const key = getTransactionDetailKey(transactionId);
+                const detail = recordGet(draft.transactionDetailById, key, undefined);
+                if (detail != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = detail.transactionDetailLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            detail.transactionDetailLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'In-Progress',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(transactionId, lineIds) {
+                return { payload: { transactionId, lineIds } };
+            },
+        },
+        // Completed arm. Used when the HTTP call succeeded but the server
+        // returned no per-line recommendations — still need to release the
+        // In-Progress flag.
+        markCategoryClassRecommendationsCompletedForTransactionDetail: {
+            reducer(draft, action) {
+                const { transactionId, lineIds } = action.payload;
+                const key = getTransactionDetailKey(transactionId);
+                const detail = recordGet(draft.transactionDetailById, key, undefined);
+                if (detail != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = detail.transactionDetailLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            detail.transactionDetailLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(transactionId, lineIds) {
+                return { payload: { transactionId, lineIds } };
+            },
+        },
+        markCategoryClassRecommendationsFailureForTransactionDetail: {
+            reducer(draft, action) {
+                const { transactionId, lineIds, error } = action.payload;
+                const key = getTransactionDetailKey(transactionId);
+                const detail = recordGet(draft.transactionDetailById, key, undefined);
+                if (detail != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = detail.transactionDetailLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            detail.transactionDetailLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Error',
+                                    error,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(transactionId, lineIds, error) {
+                return { payload: { transactionId, lineIds, error } };
+            },
+        },
         removeEntityRecommendationForLineIdForTransactionDetail: {
             reducer(draft, action) {
                 const { transaction, lineId } = action.payload;
@@ -656,7 +749,7 @@ const transactionDetail = createSlice({
         },
     },
 });
-export const { downloadAccountingProviderAttachment, downloadAccountingProviderAttachmentSuccess, downloadAccountingProviderAttachmentFailure, fetchTransactionDetail, updateTransactionDetailFetchState, removeTransactionDetail, clearTransactionDetail, uploadMissingAttachmentSuccess, updateTransactionDetail, updateTransactionDetailSaveStatus, clearTransactionDetailSaveStatus, markTransactionAsNotMiscategorized, deleteTransactionAttachment, deleteTransactionAttachmentFailure, deleteTransactionAttachmentSuccess, updateStatusForTransactionNotMiscategorizedUpdate, updateStatusConsolidatedSaveTransactionDetail, updateTransactionStateIfUpdateActionNotAllowed, saveTransactionDetail, initializeTransactionDetailLocalData, saveTransactionDetailLocalData, clearTransactionDetailLocalData, resetLineItemsCategoryClassInLocalData, setAllLineItemsToCategoryClassInLocalData, setAllLineItemsLocalDataIsUpdateAllChecked, setEntityRecommendationForLineIdsForTransactionDetail, removeEntityRecommendationForLineIdForTransactionDetail, updateSelectedVendor, updateSelectedCustomer, resetVendor, resetSelectedCustomer, updateLocalDataWithTransactionsUpdateWithVendorCheckbox, updateVendorToAllLineItems, resetAllLineItemsToVendor, updateLatestSelectedEntity, updateVendorBulkRecommendationsFetchStatus, setIsVendorUpdateAllChecked, } = transactionDetail.actions;
+export const { downloadAccountingProviderAttachment, downloadAccountingProviderAttachmentSuccess, downloadAccountingProviderAttachmentFailure, fetchTransactionDetail, updateTransactionDetailFetchState, removeTransactionDetail, clearTransactionDetail, uploadMissingAttachmentSuccess, updateTransactionDetail, updateTransactionDetailSaveStatus, clearTransactionDetailSaveStatus, markTransactionAsNotMiscategorized, deleteTransactionAttachment, deleteTransactionAttachmentFailure, deleteTransactionAttachmentSuccess, updateStatusForTransactionNotMiscategorizedUpdate, updateStatusConsolidatedSaveTransactionDetail, updateTransactionStateIfUpdateActionNotAllowed, saveTransactionDetail, initializeTransactionDetailLocalData, saveTransactionDetailLocalData, clearTransactionDetailLocalData, resetLineItemsCategoryClassInLocalData, setAllLineItemsToCategoryClassInLocalData, setAllLineItemsLocalDataIsUpdateAllChecked, setEntityRecommendationForLineIdsForTransactionDetail, markCategoryClassRecommendationsInProgressForTransactionDetail, markCategoryClassRecommendationsCompletedForTransactionDetail, markCategoryClassRecommendationsFailureForTransactionDetail, removeEntityRecommendationForLineIdForTransactionDetail, updateSelectedVendor, updateSelectedCustomer, resetVendor, resetSelectedCustomer, updateLocalDataWithTransactionsUpdateWithVendorCheckbox, updateVendorToAllLineItems, resetAllLineItemsToVendor, updateLatestSelectedEntity, updateVendorBulkRecommendationsFetchStatus, setIsVendorUpdateAllChecked, } = transactionDetail.actions;
 export default transactionDetail.reducer;
 function getUpdatedEntityLocalData(detail, updates, entity, resetRecommendations, type) {
     const key = type === 'customer' ? 'customerUpdates' : 'vendorUpdates';

package/lib/esm/view/transactionDetail/transactionDetailSelector.js

@@ -10,6 +10,26 @@ import { getAccountList, getNestedAccountListHierarchy, } from '../accountList/a
 import { getClassList, getNestedClassListHierarchy, } from '../classList/classListSelector';
 import { getProjectList, } from '../projectList/projectListSelector';
 import { getAllLinkedTransactions, getTransactionDetailKey, initialSupportedTransactionDetail, } from './transactionDetailState';
+// "Any line on this transaction is fetching category/class recommendations?"
+// Inlined as a plain function because the upstream selector
+// `getTransactionDetail` is also un-memoized and the iteration is O(lines)
+// — typically <10. Exported standalone so consumers that only need the
+// flag (e.g. footer save-disable) can avoid materializing the whole
+// detail report.
+export const getDetailInFlightRecommendations = (state, transactionId) => {
+    const detailKey = getTransactionDetailKey(transactionId);
+    const detail = recordGet(state.transactionDetailState.transactionDetailById, detailKey, undefined);
+    if (detail == null) {
+        return false;
+    }
+    for (const lineItem of Object.values(detail.transactionDetailLocalData.lineItemById)) {
+        if (lineItem.categoryClassRecommendationsFetchState?.fetchState ===
+            'In-Progress') {
+            return true;
+        }
+    }
+    return false;
+};
 export const getTransactionDetail = (state, transactionId, fetchLinkedTransactions = true) => {
     const { transactionDetailState, transactionState, vendorState, vendorListState, accountState, classState, classListState, accountListState, projectState, projectListState, } = state;
     const detailKey = getTransactionDetailKey(transactionId);
@@ -72,6 +92,7 @@ export const getTransactionDetail = (state, transactionId, fetchLinkedTransactio
         : [];
     const transactionDetailAnyUpdateStatus = reduceUpdateFetchStates(transactionDetail);
     const vendors = getVendorsByVendorIds(vendorState, vendorListState.vendorIds);
+    const hasInFlightCategoryClassRecommendations = getDetailInFlightRecommendations(state, transactionId);
     return {
         reportId: 'transaction_detail',
         reportTitle: 'Transaction Detail',
@@ -87,6 +108,7 @@ export const getTransactionDetail = (state, transactionId, fetchLinkedTransactio
         classHierarchyList,
         accountsHierarchyList,
         classList: classList,
+        hasInFlightCategoryClassRecommendations,
         isAccountingClassesEnabled,
         isAccountingProjectsEnabled,
         projectList,