@zeniai/client-epic-state 5.1.83 → 5.1.84-beta1ND

package/lib/esm/view/spendManagement/billPay/billList/billListSelector.js

@@ -4,7 +4,7 @@ import orderBy from 'lodash/orderBy';
 import { toAttributeTypeStrict, } from '../../../../entity/approvalRule/approvalRuleState';
 import { getUserByUserId } from '../../../../entity/user/userSelector';
 import { dateNow } from '../../../../zeniDayJS';
-import { isAwaitingMarkAsPaid, isBulkProcessing, isSodAdminFallbackEligibleForStep, } from '../../helpers';
+import { isAwaitingMarkAsPaid, isBulkProcessing, } from '../../helpers';
 import { applyAdvancedFiltersOnList, isBillListDownloadable, } from '../../spendManagementFilterHelpers';
 import { getSelectedWithdrawFromAccount } from '../billDetailView/billDetailViewSelector';
 import { getBillPayConfigBotEmail } from '../billPayConfig/billPayConfigSelector';
@@ -290,7 +290,7 @@ export const getApproversOrRejectors = (billTransaction, entityApprovalStatusSta
     };
     if (billTransaction.entityApprovalId !== null) {
         const entityApprovalStatus = entityApprovalStatusState.entityApprovalStatusById[billTransaction.entityApprovalId];
-        const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, sodExcludedApproverUserId, } = entityApprovalStatus;
+        const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, } = entityApprovalStatus;
         const isBillSerailized = areApprovalsSerialized === true &&
             currentPendingStepIndex != null &&
             currentPendingStepIndex > -1;
@@ -318,20 +318,23 @@ export const getApproversOrRejectors = (billTransaction, entityApprovalStatusSta
                 if (isBillSerailized) {
                     requireApprovalInfo = [stepsApprovalStatus[currentPendingStepIndex]];
                 }
+                const pendingActivitiesList = [];
                 requireApprovalInfo.forEach((approvalStep) => {
-                    if (approvers.displayPendingApproverAsAdmin === true) {
-                        return;
-                    }
                     const pendingActivities = approvalStep.actorsActivity.filter((activity) => activity.activity === 'pending');
-                    const sodDisplayAsAdmin = isSodAdminFallbackEligibleForStep(sodExcludedApproverUserId, isAdminFallbackApprover, approvalStep.actorsActivity);
-                    const activitiesToShow = isBillSerailized
-                        ? pendingActivities
-                        : pendingActivities.slice(0, 1);
-                    if (sodDisplayAsAdmin) {
-                        approvers.displayPendingApproverAsAdmin = true;
-                        return;
+                    //if isBillSerailized, we need to show all the approvers in currentPendingStepIndex
+                    if (isBillSerailized) {
+                        pendingActivitiesList.push(...pendingActivities);
+                    }
+                    else {
+                        //if not isBillSerailized, we need to show all the first approvers in each steps_approval_status
+                        const pendingActivity = pendingActivities[0];
+                        if (pendingActivity != null) {
+                            pendingActivitiesList.push(pendingActivity);
+                        }
                     }
-                    activitiesToShow.forEach((activity) => {
+                });
+                if (pendingActivitiesList.length > 0) {
+                    pendingActivitiesList.forEach((activity) => {
                         const user = getUserByUserId(userState, activity.userId);
                         if (user != null) {
                             approvers.users.push(user);
@@ -343,7 +346,7 @@ export const getApproversOrRejectors = (billTransaction, entityApprovalStatusSta
                             }
                         }
                     });
-                });
+                }
             }
         }
     }

package/lib/esm/view/spendManagement/billPay/editBillView/editBillViewSelector.js

@@ -29,7 +29,7 @@ import { getDuplicateBills, } from '../billPayReview/billPayReviewSelector';
 import { getBillPaySetupApproverView } from '../billPaySetupApproverView/billPaySetupApproverViewSelector';
 import { getPreviousBills, } from '../previousBills/previousBillsSelector';
 export const getEditBillDetail = (state, isVendorRecommendationFeatureEnabled, isZeniAccountsEnabled, billId) => {
-    const { accountListState, accountState, bankAccountState, billDetailViewState, paymentAccountListState, billTransactionState, billPayConfigState, classListState, classState, editBillDetailViewState, paymentAccountState, vendorState, tenantState, companyState, userState, commonHistoryState, contactState, paymentInstrumentState, recurringBillState, depositAccountListState, depositAccountState, plaidAccountViewState, } = state;
+    const { accountListState, accountState, bankAccountState, billDetailViewState, paymentAccountListState, billTransactionState, billPayConfigState, classListState, classState, editBillDetailViewState, paymentAccountState, vendorState, tenantState, companyState, userState, commonHistoryState, contactState, paymentInstrumentState, recurringBillState, depositAccountListState, depositAccountState, billPaySetupApproverViewState, plaidAccountViewState, } = state;
     const transaction = recordGet(billTransactionState.transactionById, billId ?? '', undefined);
     let recommendations = {};
     if (billId != null) {
@@ -177,6 +177,7 @@ export const getEditBillDetail = (state, isVendorRecommendationFeatureEnabled, i
                 const fetchStateList = [
                     sourceBillDetail.fetchStatus,
                     accountListState.byReportId.billPayAccountList,
+                    billPaySetupApproverViewState,
                 ];
                 if (getIsAccountingClassesEnabled(state)) {
                     fetchStateList.push(classListState);
@@ -197,6 +198,7 @@ export const getEditBillDetail = (state, isVendorRecommendationFeatureEnabled, i
     else {
         const newBillFetchStateList = [
             accountListState.byReportId.billPayAccountList,
+            billPaySetupApproverViewState,
         ];
         if (getIsAccountingClassesEnabled(state)) {
             newBillFetchStateList.push(classListState);

package/lib/esm/view/spendManagement/billPay/editBillView/epics/fetchEditBillDetailPageEpic.js

@@ -8,6 +8,7 @@ import { fetchVendorTypeList } from '../../../../vendorTypeList/vendorTypeListRe
 import { fetchDepositAccountList } from '../../../zeniAccounts/depositAccountList/depositAccountListReducer';
 import { fetchPaymentAccountList } from '../../../zeniAccounts/paymentAccountList/paymentAccountListReducer';
 import { fetchBillPayConfig } from '../../billPayConfig/billPayConfigReducer';
+import { fetchBillPaySetupApproverView } from '../../billPaySetupApproverView/billPaySetupApproverViewReducer';
 import { fetchBillAndInitializeLocalStore, fetchEditBillDetailPage, updateShowAutofill, } from '../editBillViewReducer';
 export const fetchEditBillDetailPageEpic = (actions$, state$) => actions$.pipe(filter(fetchEditBillDetailPage.match), mergeMap((action) => {
     const { cacheOverride, billId, isShowDeletedBillsEnabled, hasZeniAssistAccess, isInternationalWireEnabled, } = action.payload;
@@ -37,6 +38,10 @@ export const fetchEditBillDetailPageEpic = (actions$, state$) => actions$.pipe(f
         else {
             billDetailActions.push(updateShowAutofill(true));
         }
+        // Side-fetch from the edit-bill page bootstrap. The triggering
+        // action doesn't carry the V3 flag, so we explicitly target v1
+        // here; tenants on v3 re-fetch through their own screen connector.
+        billDetailActions.push(fetchBillPaySetupApproverView(true, true, false));
     }
     else {
         if (state.ownerListState.fetchState !== 'In-Progress' &&
@@ -75,6 +80,15 @@ export const fetchEditBillDetailPageEpic = (actions$, state$) => actions$.pipe(f
         if (billId != null) {
             billDetailActions.push(fetchBillAndInitializeLocalStore(billId, false, isShowDeletedBillsEnabled, hasZeniAssistAccess));
         }
+        const approvalViewFetchState = state.billPaySetupApproverViewState.fetchState;
+        // While opening New Bill Refresh Approval Rules and Payment Accounts
+        if (approvalViewFetchState !== 'In-Progress' &&
+            approvalViewFetchState !== 'Completed') {
+            // Side-fetch from the edit-bill page bootstrap. The triggering
+            // action doesn't carry the V3 flag, so we explicitly target v1
+            // here; tenants on v3 re-fetch through their own screen connector.
+            billDetailActions.push(fetchBillPaySetupApproverView(true, true, false));
+        }
     }
     return concat(from(billDetailActions));
 }));

package/lib/esm/view/spendManagement/commonSetup/setupViewReducer.js

@@ -111,8 +111,7 @@ const setupView = createSlice({
         saveSetupViewDataInLocalStore(draft, action) {
             const setupViewLocalData = action.payload;
             if (setupViewLocalData.companyDetails != null) {
-                const syncToken = setupViewLocalData.companyDetails.syncToken ??
-                    draft.companyDetails.localData?.syncToken;
+                const syncToken = setupViewLocalData.companyDetails.syncToken ?? draft.companyDetails.localData?.syncToken;
                 draft.companyDetails.localData = {
                     ...setupViewLocalData.companyDetails,
                     ...(syncToken != null ? { syncToken } : {}),

package/lib/esm/view/spendManagement/helpers.js

@@ -5,32 +5,6 @@ import { endDate, isHoliday, startDate, } from '../../commonStateTypes/workingDa
 import { VERIFIED_PAYMENT_ACCOUNT_PROVIDER_VERIFICATION_STATUS } from '../../entity/paymentAccount/paymentAccountState';
 import { hasBillPayAccess, hasBillPayAdminLevelAccess, hasReimbursementAccess, hasReimbursementAdminLevelAccess, } from '../../entity/userRole/userRoleType';
 import { date as zeniDate } from '../../zeniDayJS';
-const getUserActorId = (activity) => activity.actor?.userId ?? activity.userId;
-export const isUserActorOnApprovalStep = (userId, stepActorsActivity) => stepActorsActivity.some((activity) => getUserActorId(activity) === userId);
-export const isSodExcludedViewerBlocked = (sodExcludedApproverUserId, signedInUserId, stepActorsActivity = []) => sodExcludedApproverUserId != null &&
-    signedInUserId != null &&
-    signedInUserId === sodExcludedApproverUserId &&
-    isUserActorOnApprovalStep(sodExcludedApproverUserId, stepActorsActivity);
-export const isSodAdminFallbackEligibleForStep = (sodExcludedApproverUserId, isAdminFallbackApprover, stepActorsActivity = []) => {
-    if (sodExcludedApproverUserId == null || isAdminFallbackApprover !== true) {
-        return false;
-    }
-    const pendingResolvedApprovers = stepActorsActivity.filter((activity) => activity.activity === 'pending' && getUserActorId(activity) != null);
-    return (pendingResolvedApprovers.length > 0 &&
-        pendingResolvedApprovers.every((activity) => getUserActorId(activity) === sodExcludedApproverUserId));
-};
-const isSodExcludedUserSolePendingApproverOnStep = (sodExcludedApproverUserId, stepActorsActivity = []) => {
-    if (sodExcludedApproverUserId == null) {
-        return false;
-    }
-    const pendingResolvedApprovers = stepActorsActivity.filter((activity) => activity.activity === 'pending' && getUserActorId(activity) != null);
-    return (pendingResolvedApprovers.length > 0 &&
-        pendingResolvedApprovers.every((activity) => getUserActorId(activity) === sodExcludedApproverUserId));
-};
-export const shouldShowSodAdminLabel = (sodExcludedApproverUserId, stepActorsActivity = [], entitySubjectUserId) => sodExcludedApproverUserId != null &&
-    entitySubjectUserId != null &&
-    sodExcludedApproverUserId === entitySubjectUserId &&
-    isSodExcludedUserSolePendingApproverOnStep(sodExcludedApproverUserId, stepActorsActivity);
 export const getLatestApprovalDate = (allActivities) => {
     let allStepsWithStatus = [];
     let allApprovedActions = [];

package/lib/esm/view/spendManagement/reimbursement/editRemiView/epics/fetchEditRemiDetailPageEpic.js

@@ -6,6 +6,7 @@ import { fetchUserFinancialAccount } from '../../../../userFinancialAccount/user
 import { getLatestCreatedUserBankAccount } from '../../../../userFinancialAccount/userFinancialAccountSelector';
 import { fetchMerchantList } from '../../../merchantList/merchantListReducer';
 import { fetchReimbursementConfig } from '../../reimbursementConfig/reimbursementConfigReducer';
+import { fetchRemiSetupApproverView } from '../../remiSetupApproverView/remiSetupApproverViewReducer';
 import { fetchEditRemiDetailPage, fetchRemiAndInitializeLocalStore, updatesPaymentToInLocalStore, } from '../editRemiViewReducer';
 export const fetchEditRemiDetailPageEpic = (actions$, state$) => actions$.pipe(filter(fetchEditRemiDetailPage.match), mergeMap((action) => {
     const { cacheOverride, isLimitedCategoryEnabled, reimbursementId, isShowDeletedReimbursementEnabled, } = action.payload;
@@ -58,6 +59,17 @@ export const fetchEditRemiDetailPageEpic = (actions$, state$) => actions$.pipe(f
         if (reimbursementId != null) {
             remiDetailActions.push(fetchRemiAndInitializeLocalStore(reimbursementId, false, isShowDeletedReimbursementEnabled));
         }
+        else {
+            const approvalRules = state.remiSetupApproverViewState;
+            if (approvalRules.fetchState !== 'Completed' &&
+                approvalRules.fetchState !== 'In-Progress') {
+                // Side-fetch from the edit-reim page bootstrap. The
+                // triggering action doesn't carry the V3 flag, so we
+                // explicitly target v1; v3 tenants re-fetch via their
+                // own screen connector.
+                remiDetailActions.push(fetchRemiSetupApproverView(true, false, false, false));
+            }
+        }
     }
     return concat(from(remiDetailActions));
 }));

package/lib/esm/view/spendManagement/reimbursement/remiDetailView/remiDetailViewSelector.js

@@ -7,7 +7,7 @@ import { getEntityApprovalStatusByIds } from '../../../../entity/entityApprovalS
 import { getUserByUserId } from '../../../../entity/user/userSelector';
 import { getUserRoleByUserId } from '../../../../entity/userRole/userRoleSelector';
 import { getActivityHistory, } from '../../commonHistoryView/commonHistorySelector';
-import { getLatestApprovalDate, isSodAdminFallbackEligibleForStep, isSodExcludedViewerBlocked, shouldShowSodAdminLabel, } from '../../helpers';
+import { getLatestApprovalDate } from '../../helpers';
 import { getActivityRealTimeApproval, } from '../../realTimeApprovalView/realTimeApprovalSelector';
 import { getReimbursementConfigByKey } from '../reimbursementConfig/reimbursementConfigSelector';
 import { REIMBURSEMENT_PAYMENT_NUMBER_OF_DAYS } from '../reimbursementConfig/reimbursementConfigState';
@@ -110,8 +110,7 @@ export const getRemiDetailView = (state, reimbursementId) => {
     };
 };
 export const getRemiActivities = (state, reimbursementId, billStageCode) => {
-    const { remiDetailViewState, approvalRuleState, entityApprovalStatusState, userState, reimbursementState, } = state;
-    const reimburseeUserId = reimbursementState.reimbursementById[reimbursementId]?.reimburseeUserId;
+    const { remiDetailViewState, approvalRuleState, entityApprovalStatusState, userState, } = state;
     const remiTransactionDetails = recordGet(remiDetailViewState.remiDetailById, reimbursementId, undefined);
     let remiActivities = [];
     if (remiTransactionDetails != null) {
@@ -145,7 +144,7 @@ export const getRemiActivities = (state, reimbursementId, billStageCode) => {
             const approvalRules = getApprovalRulesByIds(approvalRuleState, remiTransactionDetails.approvalRuleIds);
             const entityApprovalStatusByIds = getEntityApprovalStatusByIds(entityApprovalStatusState, remiTransactionDetails.entityApprovalIds);
             remiActivities = entityApprovalStatusByIds.map((entityApprovalStatus) => {
-                const { approvalRuleId, entityType, createTime, updateTime, stepsApprovalStatus, areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, isRealTimeApprovalEnabled, sodExcludedApproverUserId, } = entityApprovalStatus;
+                const { approvalRuleId, entityType, createTime, updateTime, stepsApprovalStatus, areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, isRealTimeApprovalEnabled, } = entityApprovalStatus;
                 const approvalRule = approvalRules.find((rule) => rule.approvalRuleId === approvalRuleId);
                 return {
                     approvalRuleId,
@@ -157,23 +156,21 @@ export const getRemiActivities = (state, reimbursementId, billStageCode) => {
                     isAdminFallbackApprover,
                     currentPendingStepIndex,
                     isRealTimeApprovalEnabled,
-                    sodExcludedApproverUserId,
                     entityApprovalId: entityApprovalStatus.entityApprovalId,
                     stepsWithStatus: stepsApprovalStatus.map((step) => {
-                        const actorsActivity = step.actorsActivity.map((activity) => ({
-                            ...activity,
-                            actor: getUserByUserId(userState, activity.userId),
-                        }));
                         return {
                             ...step,
                             actors: step.actors
                                 .map((actor) => getUserByUserId(userState, actor.userId))
                                 .filter((user) => user != null),
                             nonUserActors: step.actors.filter((actor) => actor.userId == null && actor.type !== 'user'),
-                            actorsActivity,
+                            actorsActivity: step.actorsActivity.map((activity) => {
+                                return {
+                                    ...activity,
+                                    actor: getUserByUserId(userState, activity.userId),
+                                };
+                            }),
                             isOriginalApprovalStep: step.isOriginalApprovalStep,
-                            displayPendingApproverAsAdmin: isSodAdminFallbackEligibleForStep(sodExcludedApproverUserId, isAdminFallbackApprover, actorsActivity),
-                            showSodAdminLabel: shouldShowSodAdminLabel(sodExcludedApproverUserId, actorsActivity, reimburseeUserId),
                         };
                     }),
                 };
@@ -186,7 +183,7 @@ export const checkApproveRejectBtnShow = (remiActivities, isUserAdmin, signedInU
     let isApprovalorRejectBtnVisible = false;
     let rejectedId = -1;
     const stepsWithStatusData = remiActivities[0].stepsWithStatus;
-    const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, sodExcludedApproverUserId, } = remiActivities[0];
+    const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, } = remiActivities[0];
     for (const [index, stepWithStatus] of stepsWithStatusData.entries()) {
         if (stepWithStatus.action === 'require_approval') {
             for (const actorActivity of stepWithStatus.actorsActivity) {
@@ -222,39 +219,27 @@ export const checkApproveRejectBtnShow = (remiActivities, isUserAdmin, signedInU
                         break;
                     }
                 }
-                const sodBlocked = isSodExcludedViewerBlocked(sodExcludedApproverUserId, signedInUser?.userId, pendingStep.actorsActivity);
                 for (const actorActivity of pendingStep.actorsActivity) {
-                    if (!sodBlocked &&
-                        actorActivity.actor?.userId === signedInUser?.userId &&
+                    if (actorActivity.actor?.userId === signedInUser?.userId &&
                         isAllActivitiesPending) {
                         isApprovalorRejectBtnVisible = true;
                     }
                     else if (actorActivity.subType === 'admin' &&
                         isUserAdmin &&
-                        isAllActivitiesPending &&
-                        signedInUser?.userId != null &&
-                        signedInUser.userId !== sodExcludedApproverUserId) {
+                        isAllActivitiesPending) {
                         isApprovalorRejectBtnVisible = true;
                     }
+                    // admin will be fallback approver if vendor-owner/manager are not assigned any user id
                     else if (actorActivity.type === 'attribute' &&
                         (actorActivity.subType === 'manager' ||
                             actorActivity.subType === 'vendor_owner' ||
                             actorActivity.subType === 'manager_of_manager') &&
                         actorActivity.userId === null &&
                         isAdminFallbackApprover === true &&
-                        isUserAdmin &&
-                        signedInUser?.userId != null &&
-                        signedInUser.userId !== sodExcludedApproverUserId) {
+                        isUserAdmin === true) {
                         isApprovalorRejectBtnVisible = true;
                     }
                 }
-                if (!isApprovalorRejectBtnVisible &&
-                    isUserAdmin &&
-                    signedInUser?.userId != null &&
-                    signedInUser.userId !== sodExcludedApproverUserId &&
-                    pendingStep.displayPendingApproverAsAdmin === true) {
-                    isApprovalorRejectBtnVisible = true;
-                }
             }
         }
     }
@@ -268,39 +253,27 @@ export const checkApproveRejectBtnShow = (remiActivities, isUserAdmin, signedInU
                         break;
                     }
                 }
-                const sodBlocked = isSodExcludedViewerBlocked(sodExcludedApproverUserId, signedInUser?.userId, stepWithStatus.actorsActivity);
                 for (const actorActivity of stepWithStatus.actorsActivity) {
-                    if (!sodBlocked &&
-                        actorActivity.actor?.userId === signedInUser?.userId &&
+                    if (actorActivity.actor?.userId === signedInUser?.userId &&
                         isAllActivitiesPending) {
                         isApprovalorRejectBtnVisible = true;
                     }
                     else if (actorActivity.subType === 'admin' &&
                         isUserAdmin &&
-                        isAllActivitiesPending &&
-                        signedInUser?.userId != null &&
-                        signedInUser.userId !== sodExcludedApproverUserId) {
+                        isAllActivitiesPending) {
                         isApprovalorRejectBtnVisible = true;
                     }
+                    // admin will be fallback approver if vendor-owner/manager are not assigned any user id
                     else if (actorActivity.type === 'attribute' &&
                         (actorActivity.subType === 'manager' ||
                             actorActivity.subType === 'vendor_owner' ||
                             actorActivity.subType === 'manager_of_manager') &&
                         actorActivity.userId === null &&
                         isAdminFallbackApprover === true &&
-                        isUserAdmin &&
-                        signedInUser?.userId != null &&
-                        signedInUser.userId !== sodExcludedApproverUserId) {
+                        isUserAdmin === true) {
                         isApprovalorRejectBtnVisible = true;
                     }
                 }
-                if (!isApprovalorRejectBtnVisible &&
-                    isUserAdmin &&
-                    signedInUser?.userId != null &&
-                    signedInUser.userId !== sodExcludedApproverUserId &&
-                    stepWithStatus.displayPendingApproverAsAdmin === true) {
-                    isApprovalorRejectBtnVisible = true;
-                }
             }
             if (isApprovalorRejectBtnVisible) {
                 break;

package/lib/esm/view/spendManagement/reimbursement/remiListView/remiListSelector.js

@@ -7,7 +7,7 @@ import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
 import { getUserByUserId, getUsersByUserIds, } from '../../../../entity/user/userSelector';
 import { hasAdminLevelAccess, hasReimbursementUserAccess, } from '../../../../entity/userRole/userRoleType';
 import { dateNow } from '../../../../zeniDayJS';
-import { isBulkProcessing, isSodAdminFallbackEligibleForStep, } from '../../helpers';
+import { isBulkProcessing } from '../../helpers';
 import { getReimbursementConfigBotEmail } from '../../reimbursement/reimbursementConfig/reimbursementConfigSelector';
 import { applyAdvancedFiltersOnList, isRemiListDownloadable, } from '../../spendManagementFilterHelpers';
 import { ALL_REMI_TABS, getRemiListKey, } from './remiListState';
@@ -209,7 +209,7 @@ export const getApproversOrRejectors = (reimbursement, entityApprovalStatusState
     };
     if (reimbursement.entityApprovalId !== null) {
         const entityApprovalStatus = entityApprovalStatusState.entityApprovalStatusById[reimbursement.entityApprovalId];
-        const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, sodExcludedApproverUserId, } = entityApprovalStatus;
+        const { areApprovalsSerialized, isAdminFallbackApprover, currentPendingStepIndex, } = entityApprovalStatus;
         const isReimbursementSerailized = areApprovalsSerialized === true &&
             currentPendingStepIndex != null &&
             currentPendingStepIndex > -1;
@@ -237,20 +237,23 @@ export const getApproversOrRejectors = (reimbursement, entityApprovalStatusState
                 if (isReimbursementSerailized) {
                     requireApprovalInfo = [stepsApprovalStatus[currentPendingStepIndex]];
                 }
+                const pendingActivitiesList = [];
                 requireApprovalInfo.forEach((approvalStep) => {
-                    if (approvers.displayPendingApproverAsAdmin === true) {
-                        return;
-                    }
                     const pendingActivities = approvalStep.actorsActivity.filter((activity) => activity.activity === 'pending');
-                    const sodDisplayAsAdmin = isSodAdminFallbackEligibleForStep(sodExcludedApproverUserId, isAdminFallbackApprover, approvalStep.actorsActivity);
-                    const activitiesToShow = isReimbursementSerailized
-                        ? pendingActivities
-                        : pendingActivities.slice(0, 1);
-                    if (sodDisplayAsAdmin) {
-                        approvers.displayPendingApproverAsAdmin = true;
-                        return;
+                    //if isReimbursementSerailized, we need to show all the approvers in currentPendingStepIndex
+                    if (isReimbursementSerailized) {
+                        pendingActivitiesList.push(...pendingActivities);
+                    }
+                    else {
+                        //if not isReimbursementSerailized, we need to show all the first approvers in each steps_approval_status
+                        const pendingActivity = pendingActivities[0];
+                        if (pendingActivity != null) {
+                            pendingActivitiesList.push(pendingActivity);
+                        }
                     }
-                    activitiesToShow.forEach((activity) => {
+                });
+                if (pendingActivitiesList.length > 0) {
+                    pendingActivitiesList.forEach((activity) => {
                         const user = getUserByUserId(userState, activity.userId);
                         if (user != null) {
                             approvers.users.push(user);
@@ -262,7 +265,7 @@ export const getApproversOrRejectors = (reimbursement, entityApprovalStatusState
                             }
                         }
                     });
-                });
+                }
             }
         }
     }

package/lib/esm/view/transactionDetail/epics/saveTransactionDetailEpic.js

@@ -1,8 +1,8 @@
 import recordGet from 'lodash/get';
 import { from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
-import { getIsAccountingProjectsEnabled } from '../../../entity/tenant/tenantSelector';
 import { getSupportedTransactionById } from '../../../entity/transaction/transactionSelector';
+import { getIsAccountingProjectsEnabled } from '../../../entity/tenant/tenantSelector';
 import { saveTransactionDetail, updateTransactionDetail, } from '../transactionDetailReducer';
 import { getTransactionDetailKey } from '../transactionDetailState';
 import { toTransactionUpdatesFromTransactionDetailLocalData } from './saveTransactionHelper';

package/lib/esm/view/transactionDetail/epics/updateTransactionDetailEpic.js

@@ -29,7 +29,7 @@ import { getTransactionDetailKey, } from '../transactionDetailState';
 export const updateTransactionDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(updateTransactionDetail.match), mergeMap((action) => {
     const { transactionState, vendorState, transactionDetailState } = state$.value;
     const isAccountingProjectsEnabled = getIsAccountingProjectsEnabled(state$.value);
-    const { cotTransactionTracking, transactionId, transactionSaveUpdates } = action.payload;
+    const { cotTransactionTracking, transactionId, transactionSaveUpdates, } = action.payload;
     return zeniAPI
         .putAndGetJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/transactions/${action.payload.transactionId.id}/categorize`, preparePayload(transactionState, vendorState, transactionDetailState, transactionId, transactionSaveUpdates, cotTransactionTracking, isAccountingProjectsEnabled))
         .pipe(mergeMap((response) => {