@zeniai/client-epic-state 5.2.13 → 5.2.14-betaRD1

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewSelector.js

@@ -1,8 +1,44 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingPlanById, getInvoicingPlansByIds, } from '../../../entity/invoicing/plan/planSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { INVOICING_INCOME_ACCOUNT_TYPES, getInvoicingQboView, invoicingAccountHierarchyForTypes, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
+import { getInvoicingQboView, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
+import { planToCatalogDetailEditValues } from './catalogDetailEditPayload';
 import { INVOICING_CATALOG_APPLICABILITY_VALUES, INVOICING_CATALOG_PRICING_MODEL_VALUES, INVOICING_CATALOG_PRORATION_VALUES, INVOICING_CATALOG_TIER_TYPE_VALUES, entityToInvoicingCatalogItemFormLocalData, } from './invoicingCatalogItemFormConfig';
+/** An unsaved item's inline-edit draft, before the record has loaded. */
+export const initialCatalogDetailEditValues = () => ({
+    applicableItems: [],
+    description: '',
+    enabledForCheckout: true,
+    enabledInPortal: true,
+    giftClaimRedirectUrl: '',
+    includedInMrr: true,
+    isGiftable: false,
+    isShippable: false,
+    itemApplicability: 'all',
+    metered: false,
+    name: '',
+    productCode: '',
+    subFamilies: [],
+    unit: '',
+    usageCalculation: 'sum_of_usages',
+});
+/**
+ * The detail page's inline-edit form data: the stored draft once the user has
+ * touched the form, seeded from the loaded record until then. Memoized so the
+ * page receives a stable value — recomputing it per store change would reseed
+ * the form mid-edit and drop what the user had typed.
+ */
+export const getInvoicingCatalogItemDetailEditLocalData = createSelector([
+    (state, id) => id != null
+        ? state.editInvoicingCatalogItemDetailViewState.detailEditDraftById[id]
+        : undefined,
+    (state, id) => id != null
+        ? getInvoicingPlanById(state.invoicingPlanState, id)
+        : undefined,
+], (storedDraft, plan) => storedDraft ??
+    (plan != null
+        ? planToCatalogDetailEditValues(plan)
+        : initialCatalogDetailEditValues()));
 export const getEditInvoicingCatalogItemDetailViewState = (state) => ({
     fetchState: state.editInvoicingCatalogItemDetailViewState.fetchState,
     error: state.editInvoicingCatalogItemDetailViewState.error,
@@ -49,17 +85,15 @@ export const getInvoicingCatalogItemFormView = (state, id) => {
     const applicableItemOptions = id != null
         ? allApplicableItemOptions.filter((option) => option.id !== id)
         : allApplicableItemOptions;
-    const isQboConnected = isInvoicingQboConnected(state);
+    const qboView = isInvoicingQboConnected(state)
+        ? getInvoicingQboView(state)
+        : undefined;
     const { billingPeriodUnitOptions, catalogItemTypeOptions, catalogTierTypeOptionsByPricingModel, catalogTrialEndActionOptions, catalogTrialUnitOptions, } = getInvoicingConfigView(state);
     return {
         fieldHelp: invoicingFieldHelpForGroup(state, 'catalog'),
         isQboPickerDataLoading: isInvoicingAccountingPickerDataLoading(state),
-        qboClassHierarchy: isQboConnected
-            ? getInvoicingQboView(state).nestedClassHierarchy
-            : [],
-        qboIncomeAccountHierarchy: isQboConnected
-            ? invoicingAccountHierarchyForTypes(state, INVOICING_INCOME_ACCOUNT_TYPES)
-            : [],
+        qboAccountHierarchy: qboView?.nestedAccountHierarchy ?? [],
+        qboClassHierarchy: qboView?.nestedClassHierarchy ?? [],
         applicabilityValues: INVOICING_CATALOG_APPLICABILITY_VALUES,
         applicableItemOptions,
         localData,

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/invoicingCatalogSubFamilyEpics.js

@@ -2,6 +2,8 @@ import { of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { mergeInvoicingPlanSubFamily } from '../../../entity/invoicing/plan/planReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../responsePayload';
+import { getInvoicingCatalogAccountingLookup } from '../invoicingQboView/invoicingQboViewSelector';
+import { createSubFamilyFormToPayload } from './catalogDetailEditPayload';
 import { archiveInvoicingCatalogSubFamily, createInvoicingCatalogSubFamily, submitInvoicingCatalogItemFormFailure, submitInvoicingCatalogItemFormSuccess, } from './editInvoicingCatalogItemDetailViewReducer';
 const subFamilySuccessActions = (parentItemId, subFamilyPayload) => [
     mergeInvoicingPlanSubFamily(parentItemId, subFamilyPayload),
@@ -10,8 +12,12 @@ const subFamilySuccessActions = (parentItemId, subFamilyPayload) => [
         kind: 'plan',
     }),
 ];
-export const createInvoicingCatalogSubFamilyEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(createInvoicingCatalogSubFamily.match), mergeMap((action) => {
-    const { data, parentItemId } = action.payload;
+export const createInvoicingCatalogSubFamilyEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(createInvoicingCatalogSubFamily.match), mergeMap((action) => {
+    const { itemType, parentItemId, values } = action.payload;
+    const state = state$.value;
+    // Built here so the dialog can stay in picked ids: resolving one to the
+    // account record the payload carries needs the shared account list.
+    const data = createSubFamilyFormToPayload(parentItemId, itemType, values, getInvoicingCatalogAccountingLookup(state));
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
     return zeniAPI
         .postAndGetJSON(`${baseUrl}/catalog/products`, data)

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/saveInvoicingCatalogItemEpic.js

@@ -1,31 +1,40 @@
 import { forkJoin, from } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { getInvoicingPlanById } from '../../../entity/invoicing/plan/planSelector';
 import { mergeInvoicingPlanSubFamily, updateInvoicingPlans, } from '../../../entity/invoicing/plan/planReducer';
 import { updateInvoicingProducts } from '../../../entity/invoicing/product/productReducer';
 import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { addInvoicingCatalogItem } from '../invoicingCatalogListView/invoicingCatalogListViewReducer';
-import { invoicingQboAccountByQboId, invoicingQboClassByQboId, } from '../invoicingQboView/invoicingQboViewSelector';
+import { getInvoicingCatalogAccountingLookup } from '../invoicingQboView/invoicingQboViewSelector';
+import { catalogDetailEditValuesToSavePayload, } from './catalogDetailEditPayload';
 import { localDataToSaveInvoicingCatalogItemPayload, } from './editInvoicingCatalogItemDetailViewPayload';
+import { getInvoicingCatalogItemDetailEditLocalData } from './editInvoicingCatalogItemDetailViewSelector';
 import { saveInvoicingCatalogItem, submitInvoicingCatalogItemForm, submitInvoicingCatalogItemFormFailure, submitInvoicingCatalogItemFormSuccess, } from './editInvoicingCatalogItemDetailViewReducer';
 export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => submitInvoicingCatalogItemForm.match(action) ||
     saveInvoicingCatalogItem.match(action)), mergeMap((action) => {
     const { id } = action.payload;
-    // Draft-based create/edit form vs. detail-page inline edit (raw data).
+    const state = state$.value;
+    const accountingLookup = getInvoicingCatalogAccountingLookup(state);
+    // Both sources are form values, turned into request bodies here so the
+    // picked account and class become the records the service stores: the
+    // detail page's edit form, or the create/edit form's draft.
     let data;
+    let editProductUpdates;
     if (saveInvoicingCatalogItem.match(action)) {
-        data = action.payload.data;
+        const plan = id != null
+            ? getInvoicingPlanById(state.invoicingPlanState, id)
+            : undefined;
+        const savePayload = catalogDetailEditValuesToSavePayload(getInvoicingCatalogItemDetailEditLocalData(state, id), accountingLookup, plan?.type ?? plan?.itemType, plan?.subFamilies);
+        data = savePayload.planData;
+        editProductUpdates = savePayload.productUpdates;
     }
     else {
-        const viewState = state$.value.editInvoicingCatalogItemDetailViewState;
+        const viewState = state.editInvoicingCatalogItemDetailViewState;
         const localData = (id != null ? viewState.editDraftById[id] : viewState.newItemDraft) ??
             viewState.newItemDraft;
-        const state = state$.value;
-        data = localDataToSaveInvoicingCatalogItemPayload(localData, id == null, {
-            accountByQboId: (qboId) => invoicingQboAccountByQboId(state, qboId),
-            classByQboId: (qboId) => invoicingQboClassByQboId(state, qboId),
-        });
+        data = localDataToSaveInvoicingCatalogItemPayload(localData, id == null, accountingLookup);
     }
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
     const path = id != null
@@ -88,7 +97,7 @@ export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actio
                 return resultActions;
             };
             const productUpdates = saveInvoicingCatalogItem.match(action)
-                ? (action.payload.productUpdates ?? [])
+                ? (editProductUpdates ?? [])
                 : [];
             if (productUpdates.length === 0) {
                 return completeSave([]);

package/lib/esm/view/invoicing/invoicingCatalogItemDetailView/invoicingCatalogItemDetailViewSelector.js

@@ -1,5 +1,6 @@
 import { getInvoicingPlanById } from '../../../entity/invoicing/plan/planSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
+import { getInvoicingCatalogItemDetailEditLocalData } from '../editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewSelector';
 export const getInvoicingCatalogItemDetail = (state, _kind, id) => {
     const { error, fetchState } = state.invoicingCatalogItemDetailViewState;
     const { billingPeriodUnitOptions, catalogItemLifecycleActionOptions, catalogItemTypeOptions, catalogProductLifecycleActionOptions, catalogTierTypeOptionsByPricingModel, catalogTrialEndActionOptions, catalogTrialUnitOptions, fetchState: configFetchState, } = getInvoicingConfigView(state);
@@ -10,6 +11,7 @@ export const getInvoicingCatalogItemDetail = (state, _kind, id) => {
         catalogTierTypeOptionsByPricingModel,
         configFetchState,
         periodUnitOptions: billingPeriodUnitOptions,
+        editLocalData: getInvoicingCatalogItemDetailEditLocalData(state, id),
         plan: getInvoicingPlanById(state.invoicingPlanState, id),
         trialEndActionOptions: catalogTrialEndActionOptions,
         trialUnitOptions: catalogTrialUnitOptions,

package/lib/esm/view/invoicing/invoicingQboView/epics/fetchInvoicingAccountingPickersEpic.js

@@ -18,7 +18,6 @@ export const fetchInvoicingAccountingPickersEpic = (actions$, state$) => actions
         accountList.fetchState !== 'In-Progress') {
         // Same arguments the vendor and categorization screens pass, so this
         // shares their cached list rather than replacing it with a narrower one.
-        // Invoicing narrows to income accounts when it builds its options.
         actions.push(fetchAccountList(INVOICING_ACCOUNT_LIST_KEY, true));
     }
     const classList = state.classListState;

package/lib/esm/view/invoicing/invoicingQboView/invoicingQboViewSelector.js

@@ -1,8 +1,8 @@
 import { getAccountList, getNestedAccountListHierarchy, } from '../../accountList/accountListSelector';
 import { getClassList, getNestedClassListHierarchy, } from '../../classList/classListSelector';
 // The shared bucket, fetched with the same arguments as the other consumers so
-// whichever screen loads first satisfies the rest. Invoicing narrows to income
-// accounts when it builds its options, so it does not need its own copy.
+// whichever screen loads first satisfies the rest. Invoicing renders the same
+// accounts they do, so it does not need its own copy.
 export const INVOICING_ACCOUNT_LIST_KEY = 'accountList';
 /** Whether QBO is connected, without building the option lists to find out. */
 export const isInvoicingQboConnected = (state) => state.invoicingQboViewState.connection?.connected === true;
@@ -29,14 +29,6 @@ export const isInvoicingAccountingPickerDataLoading = (state) => {
 };
 /** The QBO connection fetch on its own, without building the bundled view. */
 export const getInvoicingQboConnectionFetchState = (state) => state.invoicingQboViewState.connectionFetchState;
-/**
- * Account types that can back invoicing revenue. Named here so screens ask for
- * "income accounts" rather than repeating the accounting service's vocabulary.
- */
-export const INVOICING_INCOME_ACCOUNT_TYPES = [
-    'income',
-    'other_income',
-];
 /**
  * The account behind a picker value. The pickers submit the QuickBooks id, so
  * that is what callers hold; the payload builders need the whole entity to send
@@ -77,6 +69,18 @@ export const invoicingQboClassByQboId = (state, qboId) => {
         return undefined;
     }
 };
+/**
+ * The resolver every catalog and settings payload builder needs: a picked
+ * QuickBooks id turned back into the account or class record the request body
+ * carries. Deliberately not memoized — epics call it once per action, where a
+ * fresh pair of closures costs nothing. Keep it out of `mapStateToProps`: the
+ * object identity changes per call, so a component reading it would re-render on
+ * every unrelated action.
+ */
+export const getInvoicingCatalogAccountingLookup = (state) => ({
+    accountByQboId: (qboId) => invoicingQboAccountByQboId(state, qboId),
+    classByQboId: (qboId) => invoicingQboClassByQboId(state, qboId),
+});
 /**
  * Accounts and classes as the invoicing pickers need them. Both come from the
  * shared accounting-service lists, so whatever another screen already loaded
@@ -84,17 +88,12 @@ export const invoicingQboClassByQboId = (state, qboId) => {
  * API stores; an account without one cannot be posted, so it is dropped rather
  * than offered.
  */
-const invoicingAccountingOptions = (state, accountTypes) => {
+const invoicingAccountingOptions = (state) => {
     const { accounts } = getAccountList(state.accountState, state.accountListState, INVOICING_ACCOUNT_LIST_KEY);
     return accounts.flatMap((account) => {
         if (account.qboId == null || account.isDeleted === true) {
             return [];
         }
-        if (accountTypes != null &&
-            (account.accountType == null ||
-                !accountTypes.includes(account.accountType))) {
-            return [];
-        }
         return [
             {
                 id: String(account.qboId),
@@ -151,26 +150,6 @@ const invoicingAccountingClassOptions = (state) => {
             },
         ]);
 };
-/**
- * The account tree narrowed to the given account types. The tree itself carries
- * no account type, so the flat account list supplies that and the matching
- * `qboId`s are kept — which is why callers that only need "income accounts, as a
- * tree" do not have to hold a second flat list to filter with.
- */
-export const invoicingAccountHierarchyForTypes = (state, accountTypes) => {
-    const allowedQboIds = new Set(invoicingAccountingOptions(state, accountTypes).map((account) => account.id));
-    const keepMatching = (nodes) => nodes.flatMap((node) => {
-        const children = keepMatching(node.children);
-        const isMatch = node.qboId != null && allowedQboIds.has(String(node.qboId));
-        // A parent that is not itself a match is still kept when it holds one, so
-        // the tree's shape survives the filter.
-        if (!isMatch && children.length === 0) {
-            return [];
-        }
-        return [{ ...node, children }];
-    });
-    return keepMatching(getNestedAccountListHierarchy(state.accountListState, INVOICING_ACCOUNT_LIST_KEY));
-};
 /**
  * Single bundled view for the QBO integration settings screen — the
  * connection, the account and class options, sync health, and the fetch/action

package/lib/esm/view/scheduleView/scheduleListView/epics/fetchAccruedScheduleListEpic.js

@@ -30,7 +30,7 @@ export const fetchAccruedScheduleListEpic = (actions$, state$, zeniAPI) => actio
         je_schedule_type: scheduleType,
         sort_by: 'transaction_date',
         sort_order: 'desc',
-        filter: 'all',
+        filter: action.payload.statusFilter,
     };
     return zeniAPI
         .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/schedules?query=${encodeURIComponent(JSON.stringify(queryParam))}`)

package/lib/esm/view/scheduleView/scheduleListView/epics/fetchDownloadSchedulesEpic.js

@@ -7,9 +7,14 @@ import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePay
 import { fetchDownloadSchedules, getState, updateDownloadScheduleFailure, updateDownloadScheduleSuccess, } from '../scheduleListReducer';
 import { getScheduleListKey } from '../scheduleListTypes';
 export const fetchDownloadSchedulesEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchDownloadSchedules.match), mergeMap((action) => {
-    const { scheduleType, downloadCategories } = action.payload;
+    const { scheduleType, downloadCategories, statusFilter } = action.payload;
     const scheduleListState = state$.value.scheduleListState;
     // if parameters are provided, use those. else go to localdata
+    // Accrued is deliberately not served here. Its rows come back in a different shape, this
+    // epic writes them through updateJESchedules (the prepaid / fixed mapper), and
+    // doUpdateScheduleList never flips downloadState for accrued -- so a request would store the
+    // wrong data and then never report completion. Accrued downloads go through
+    // fetchAccruedScheduleList, which owns that shape end to end.
     let scheduleState;
     if (scheduleType !== 'accrued_expenses') {
         scheduleState = getState(scheduleListState, scheduleType);
@@ -34,7 +39,7 @@ export const fetchDownloadSchedulesEpic = (actions$, state$, zeniAPI) => actions
         base_txn_account_ids: downloadCategories,
         sort_by: 'transaction_date',
         sort_order: 'desc',
-        filter: 'all',
+        filter: statusFilter,
     };
     return zeniAPI
         .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/schedules/download?query=${encodeURIComponent(JSON.stringify(queryParam))}`)

package/lib/esm/view/scheduleView/scheduleListView/scheduleListReducer.js

@@ -84,8 +84,8 @@ const scheduleListView = createSlice({
     reducers: {
         fetchDownloadSchedules: {
             reducer(draft, action) {
+                // Accrued is not downloaded through this action -- see fetchDownloadSchedulesEpic for why.
                 if (action.payload.scheduleType !== 'accrued_expenses') {
-                    //if condition added for type narrowing
                     const state = getState(draft, action.payload.scheduleType);
                     const selectedTimeframe = action.payload.timeframeAndCategory.selectedTimeframe;
                     const selectedCategoryId = action.payload.timeframeAndCategory.selectedCategoryId;
@@ -109,13 +109,14 @@ const scheduleListView = createSlice({
                     updateState(draft, action.payload.scheduleType, state);
                 }
             },
-            prepare(scheduleType, timeframeAndCategory, downloadCategories, cacheOverride = false) {
+            prepare(scheduleType, timeframeAndCategory, downloadCategories, statusFilter = 'all', cacheOverride = false) {
                 return {
                     payload: {
                         timeframeAndCategory,
                         scheduleType,
                         cacheOverride,
                         downloadCategories,
+                        statusFilter,
                     },
                 };
             },
@@ -151,12 +152,13 @@ const scheduleListView = createSlice({
                     updateState(draft, action.payload.scheduleType, state);
                 }
             },
-            prepare(scheduleType, timeframeAndCategory, cacheOverride = false) {
+            prepare(scheduleType, timeframeAndCategory, cacheOverride = false, statusFilter = 'all') {
                 return {
                     payload: {
                         timeframeAndCategory,
                         scheduleType,
                         cacheOverride,
+                        statusFilter,
                     },
                 };
             },

package/lib/esm/view/spendManagement/billPay/billPaySetupApproverView/billPaySetupApproverViewSelector.js

@@ -7,7 +7,7 @@ import { getIsAccountingClassesEnabled } from '../../../../entity/tenant/tenantS
 import { getUserByUserId } from '../../../../entity/user/userSelector';
 import { getUserRoleByUserId } from '../../../../entity/userRole/userRoleSelector';
 export const getBillPaySetupApproverView = createSelector((state) => state.billPaySetupApproverViewState, (state) => state.approvalRuleState, (state) => state.userState, (billPaySetupApproverViewState, approvalRuleState, userState) => {
-    const { approvalRulesDeleteStatusById, approvalRuleIds, fetchState, error, listeningToPusherEvent, newApprovalRuleId, } = billPaySetupApproverViewState;
+    const { approvalRulesDeleteStatusById, approvalRuleIds, approverListState, fetchState, error, listeningToPusherEvent, newApprovalRuleId, } = billPaySetupApproverViewState;
     const deleteStateList = Object.values(approvalRulesDeleteStatusById);
     const approvalRules = getApprovalRulesByIds(approvalRuleState, approvalRuleIds);
     const allApprovalRules = approvalRules.map((approvalRule) => {
@@ -35,10 +35,15 @@ export const getBillPaySetupApproverView = createSelector((state) => state.billP
             name: 'Require Info',
             code: 'require_info',
         };
+    const activeApproverIds = new Set(approverListState.approverIds);
+    const referencedApproverIds = new Set(allApprovalRules.flatMap((approvalRule) => approvalRule.steps.flatMap((step) => step.actors.map((actor) => actor.userId))));
+    const inactiveApproverIds = Array.from(referencedApproverIds).filter((userId) => !activeApproverIds.has(userId));
     return {
         allApprovalRules,
         deleteStatus: reduceAnyFetchState(deleteStateList),
         approvalRulesStatus,
+        approverListFetchStatus: approverListState.fetchStatus,
+        inactiveApproverIds,
         fetchState,
         error,
         listeningToPusherEvent,
@@ -57,6 +62,19 @@ export const getBillPaySetupApproverUpdateDataView = createSelector((state) => s
         };
     })
         .filter((approver) => approver.user != null);
+    const activeApproverIds = new Set(approverIds);
+    const currentRuleSteps = billPaySetupApproverViewUpdateData?.data?.steps ?? [];
+    const inactiveActorUserIds = new Set(currentRuleSteps
+        .flatMap((step) => step.actors.map((actor) => actor.userId))
+        .filter((userId) => userId != null && !activeApproverIds.has(userId)));
+    const inactiveActorApprovers = Array.from(inactiveActorUserIds)
+        .map((userId) => {
+        return {
+            user: getUserByUserId(userState, userId),
+            role: getUserRoleByUserId(userRoleState, userId),
+        };
+    })
+        .filter((approver) => approver.user != null);
     const allAttributes = attributes;
     const filteredApprovers = cloneDeep(allApprovers);
     const filteredAttributes = cloneDeep(attributes);
@@ -90,6 +108,7 @@ export const getBillPaySetupApproverUpdateDataView = createSelector((state) => s
         allApprovalRules,
         allApprovers,
         filteredApprovers,
+        inactiveActorApprovers,
         allAttributes,
         filteredAttributes,
         billPaySetupApproverViewUpdateData,

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/remiSetupApproverViewSelector.js

@@ -7,7 +7,7 @@ import { getUserByUserId } from '../../../../entity/user/userSelector';
 import { getUserRoleByUserId } from '../../../../entity/userRole/userRoleSelector';
 export const getRemiSetupApproverView = (state, filterAdmins = true) => {
     const { remiSetupApproverViewState, approvalRuleState, userState } = state;
-    const { approvalRulesDeleteStatusById, approvalRuleIds, fetchState, error, listeningToPusherEvent, newApprovalRuleId, } = remiSetupApproverViewState;
+    const { approvalRulesDeleteStatusById, approvalRuleIds, approverListState, fetchState, error, listeningToPusherEvent, newApprovalRuleId, } = remiSetupApproverViewState;
     const deleteStateList = Object.values(approvalRulesDeleteStatusById);
     const approvalRules = getApprovalRulesByIds(approvalRuleState, approvalRuleIds);
     const allApprovalRules = approvalRules.map((approvalRule) => {
@@ -36,10 +36,15 @@ export const getRemiSetupApproverView = (state, filterAdmins = true) => {
             name: 'Require Info',
             code: 'require_info',
         };
+    const activeApproverIds = new Set(approverListState.approverIds);
+    const referencedApproverIds = new Set(allApprovalRules.flatMap((approvalRule) => approvalRule.steps.flatMap((step) => step.actors.map((actor) => actor.userId))));
+    const inactiveApproverIds = Array.from(referencedApproverIds).filter((userId) => !activeApproverIds.has(userId));
     return {
         allApprovalRules,
         deleteStatus: reduceAnyFetchState(deleteStateList),
         approvalRulesStatus,
+        approverListFetchStatus: approverListState.fetchStatus,
+        inactiveApproverIds,
         fetchState,
         error,
         listeningToPusherEvent,
@@ -74,6 +79,19 @@ export const getRemiSetupApproverUpdateDataView = createSelector((state) => stat
         };
     })
         .filter((approver) => approver.user != null);
+    const activeApproverIds = new Set(approverIds);
+    const currentRuleSteps = remiSetupApproverViewUpdateData?.data?.steps ?? [];
+    const inactiveActorUserIds = new Set(currentRuleSteps
+        .flatMap((step) => step.actors.map((actor) => actor.userId))
+        .filter((userId) => userId != null && !activeApproverIds.has(userId)));
+    const inactiveActorApprovers = Array.from(inactiveActorUserIds)
+        .map((userId) => {
+        return {
+            user: getUserByUserId(userState, userId),
+            role: getUserRoleByUserId(userRoleState, userId),
+        };
+    })
+        .filter((approver) => approver.user != null);
     const allAttributes = attributes;
     const filteredApprovers = cloneDeep(allApprovers);
     const filteredAttributes = cloneDeep(attributes);
@@ -108,6 +126,7 @@ export const getRemiSetupApproverUpdateDataView = createSelector((state) => stat
         allAttributes,
         filteredApprovers,
         filteredAttributes,
+        inactiveActorApprovers,
         allAccountingClasses,
         remiSetupApproverViewUpdateData,
         approversDetailsFetchStatus: reduceAllFetchState([