@zeniai/client-epic-state 4.19.52 → 4.19.53-betaAR1

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistoryHelpers.js

@@ -0,0 +1,79 @@
+import orderBy from 'lodash/orderBy';
+import { getUserName } from '../../../../entity/user/userSelector';
+import { applyAdvancedFiltersOnList } from '../../spendManagementFilterHelpers';
+export function getPaymentHistorySourceAccountName(repayment, accountInfoByAccountId) {
+    const fromMap = repayment.paymentAccountId != null
+        ? accountInfoByAccountId?.[repayment.paymentAccountId]?.depositAccountName
+        : undefined;
+    return fromMap ?? repayment.paymentAccountName ?? '';
+}
+export function getPaymentStatusDisplayText(status) {
+    const statusMap = {
+        PendingReview: 'In Progress',
+        Pending: 'In Progress',
+        Sent: 'Complete',
+        Clear: 'Complete',
+        Rejected: 'Failed',
+        Returned: 'Failed',
+    };
+    return statusMap[status] ?? status;
+}
+function getPaymentHistorySortValue(repayment, sortKey, accountInfoByAccountId) {
+    switch (sortKey) {
+        case 'paymentDate':
+            return repayment.repaymentDate.valueOf();
+        case 'amount':
+            return repayment.amount.amount;
+        case 'paymentStatus':
+            return getPaymentStatusDisplayText(repayment.status);
+        case 'initiatedBy':
+            return repayment.repaymentType === 'scheduled'
+                ? 'autopay'
+                : getUserName(repayment.paidByUser);
+        case 'sourceAccount':
+            return getPaymentHistorySourceAccountName(repayment, accountInfoByAccountId);
+        default:
+            return '';
+    }
+}
+function sortPaymentHistory(repayments, sortKey, sortOrder, accountInfoByAccountId) {
+    const getColumnWiseSortOrder = (sortOrder) => {
+        // Note: For date and amount fields, the sort order is intentionally inverted.
+        // This allows the UI to request 'ascending' sort to get the most recent dates
+        // or largest amounts first, which is a more intuitive default for users.
+        switch (sortKey) {
+            case 'sourceAccount':
+            case 'paymentStatus':
+            case 'initiatedBy':
+                return sortOrder === 'ascending' ? 'asc' : 'desc';
+            default:
+                return sortOrder === 'ascending' ? 'desc' : 'asc';
+        }
+    };
+    const order = getColumnWiseSortOrder(sortOrder);
+    return orderBy(repayments, (repayment) => getPaymentHistorySortValue(repayment, sortKey, accountInfoByAccountId), [order]);
+}
+function filterPaymentHistoryBySearchText(repayments, searchText, accountInfoByAccountId) {
+    const loweredSearchText = searchText.trim().toLowerCase();
+    if (loweredSearchText.length === 0) {
+        return repayments;
+    }
+    return repayments.filter((repayment) => {
+        const amountString = repayment.amount.amount.toString();
+        const statusString = getPaymentStatusDisplayText(repayment.status).toLowerCase();
+        const initiatedByString = repayment.repaymentType === 'scheduled'
+            ? 'autopay'
+            : getUserName(repayment.paidByUser);
+        const accountNameString = getPaymentHistorySourceAccountName(repayment, accountInfoByAccountId).toLowerCase();
+        return (amountString.includes(loweredSearchText) ||
+            statusString.includes(loweredSearchText) ||
+            initiatedByString.toLowerCase().includes(loweredSearchText) ||
+            accountNameString.includes(loweredSearchText));
+    });
+}
+export function applyPaymentHistoryFiltersSearchAndSort(repayments, filters, searchText, uiState, accountInfoByAccountId) {
+    let result = applyAdvancedFiltersOnList('charge_card_payment_history', repayments, filters);
+    result = filterPaymentHistoryBySearchText(result, searchText, accountInfoByAccountId);
+    result = sortPaymentHistory(result, uiState.sortKey, uiState.sortOrder, accountInfoByAccountId);
+    return result;
+}

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistoryPayload.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistoryReducer.js

@@ -0,0 +1,83 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initialChargeCardPaymentHistoryState, } from './chargeCardPaymentHistory';
+export const initialState = initialChargeCardPaymentHistoryState;
+const chargeCardPaymentHistory = createSlice({
+    name: 'chargeCardPaymentHistory',
+    initialState,
+    reducers: {
+        fetchChargeCardPaymentPage: {
+            reducer() {
+                // do nothing
+            },
+            prepare(cacheOverride = false) {
+                return {
+                    payload: {
+                        cacheOverride,
+                    },
+                };
+            },
+        },
+        fetchChargeCardPaymentHistory(draft) {
+            draft.fetchState = 'In-Progress';
+            draft.error = undefined;
+        },
+        updateChargeCardPaymentHistory(draft, action) {
+            const payload = action.payload;
+            draft.creditAccountId = payload.credit_account_id;
+            draft.currencyCode = payload.currency_code;
+            draft.currencySymbol = payload.currency_symbol;
+            draft.isAutoPayEnabled = payload.is_auto_pay_enabled;
+            draft.repaymentHistoryIds = payload.repayment_history.map((repayment) => repayment.card_repayment_id);
+            draft.totalRepayments = payload.total_repayments;
+            draft.fetchState = 'Completed';
+            draft.error = undefined;
+        },
+        updateChargeCardPaymentHistoryFailure(draft, action) {
+            draft.fetchState = 'Error';
+            draft.error = action.payload;
+        },
+        addRepaymentToChargeCardPaymentHistory(draft, action) {
+            const { cardRepaymentId, zeniCreditAccountId } = action.payload;
+            if (draft.creditAccountId !== zeniCreditAccountId) {
+                return;
+            }
+            if (draft.repaymentHistoryIds.includes(cardRepaymentId)) {
+                return;
+            }
+            draft.repaymentHistoryIds.unshift(cardRepaymentId);
+            draft.totalRepayments += 1;
+        },
+        clearChargeCardPaymentHistory(draft) {
+            Object.assign(draft, initialState);
+        },
+        updatePaymentHistoryFilters(draft, action) {
+            if (action.payload.filters != null) {
+                draft.filters = action.payload.filters;
+            }
+        },
+        updatePaymentHistorySearchText(draft, action) {
+            if (action.payload != null) {
+                draft.searchText = action.payload;
+            }
+        },
+        updatePaymentHistoryUIState(draft, action) {
+            if (action.payload.uiState.sortKey != null) {
+                draft.uiState.sortKey = action.payload.uiState.sortKey;
+            }
+            if (action.payload.uiState.sortOrder != null) {
+                draft.uiState.sortOrder = action.payload.uiState.sortOrder;
+            }
+            if (action.payload.uiState.scrollYOffset != null) {
+                draft.uiState.scrollYOffset = action.payload.uiState.scrollYOffset;
+            }
+        },
+        updatePaymentHistoryDownloadUIState(draft, action) {
+            if (action.payload.uiState.downloadState != null) {
+                draft.downloadUIState.downloadState =
+                    action.payload.uiState.downloadState;
+            }
+        },
+    },
+});
+export const { addRepaymentToChargeCardPaymentHistory, fetchChargeCardPaymentPage, fetchChargeCardPaymentHistory, updateChargeCardPaymentHistory, updateChargeCardPaymentHistoryFailure, clearChargeCardPaymentHistory, updatePaymentHistoryFilters, updatePaymentHistorySearchText, updatePaymentHistoryDownloadUIState, updatePaymentHistoryUIState, } = chargeCardPaymentHistory.actions;
+export default chargeCardPaymentHistory.reducer;

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistorySelector.js

@@ -0,0 +1,104 @@
+import { reduceAllFetchState } from '../../../../commonStateTypes/reduceFetchState';
+import { getChargeCardRepaymentByIds } from '../../../../entity/chargeCardRepayment/chargeCardRepaymentSelector';
+import { getUsersByUserIds } from '../../../../entity/user/userSelector';
+import { getAllFundingAccounts, mapDepositAccToFundingAccount, mapPaymentAccToFundingAccount, } from '../../commonSetup/setupViewSelector';
+import { getDepositAccountByDepositAccountId } from '../../../../entity/depositAccount/depositAccountSelector';
+import { getPaymentAccountByPaymentAccountId } from '../../../../entity/paymentAccount/paymentAccountSelector';
+import { getAllDepositAccounts } from '../../zeniAccounts/depositAccountList/depositAccountListSelector';
+import { getAllPaymentAccounts } from '../../zeniAccounts/paymentAccountList/paymentAccountListSelector';
+import { applyPaymentHistoryFiltersSearchAndSort } from './chargeCardPaymentHistoryHelpers';
+export const getChargeCardPaymentHistoryView = (state) => {
+    const { chargeCardPaymentHistoryState, chargeCardRepaymentState, userState, depositAccountState, paymentAccountState, depositAccountListState, paymentAccountListState, } = state;
+    const { creditAccountId, currencyCode, currencySymbol, filters, isAutoPayEnabled, repaymentHistoryIds, searchText, totalRepayments, uiState, fetchState, error, } = chargeCardPaymentHistoryState;
+    // Get the full repayment details from the entity state
+    const repaymentHistory = getChargeCardRepaymentByIds(chargeCardRepaymentState, repaymentHistoryIds);
+    const repaymentHistoryUserIds = Array.from(new Set(repaymentHistory.map((r) => r.paidById)));
+    // Get users first to enrich repayments
+    const repaymentHistoryUsers = getUsersByUserIds(userState, repaymentHistoryUserIds);
+    // Create a map of userId -> User for quick lookup
+    const userMap = new Map();
+    repaymentHistoryUsers.forEach((user) => {
+        userMap.set(user.userId, user);
+    });
+    // Enrich repayments with paidByUser details
+    let repaymentHistoryWithUsers = repaymentHistory.map((repayment) => ({
+        ...repayment,
+        paidByUser: userMap.get(repayment.paidById),
+    }));
+    // Get deposit and payment accounts views (used for funding accounts and fetch state)
+    const depositAccountsView = getAllDepositAccounts(depositAccountState, depositAccountListState);
+    const paymentAccountsView = getAllPaymentAccounts(paymentAccountState, paymentAccountListState);
+    // Extract unique funding account IDs from unfiltered repayment history (for accountInfoMap used in filter/sort)
+    const repaymentHistoryFundingAccountIdsForMap = Array.from(new Set(repaymentHistory
+        .map((repayment) => repayment.paymentAccountId)
+        .filter((id) => id !== undefined && id !== null)));
+    let fundingAccountsForMap = [];
+    if (repaymentHistoryFundingAccountIdsForMap.length > 0) {
+        const hasDepositData = depositAccountsView.fetchState === 'Completed';
+        const hasPaymentData = paymentAccountsView.fetchState === 'Completed';
+        if (hasDepositData || hasPaymentData) {
+            const matchingDepositAccountsForMap = hasDepositData
+                ? depositAccountsView.depositAccounts.filter((depositAccount) => repaymentHistoryFundingAccountIdsForMap.includes(depositAccount.id))
+                : [];
+            const matchingPaymentAccountsForMap = hasPaymentData
+                ? paymentAccountsView.paymentAccounts.filter((paymentAccount) => repaymentHistoryFundingAccountIdsForMap.includes(paymentAccount.paymentAccountId))
+                : [];
+            fundingAccountsForMap = getAllFundingAccounts(matchingDepositAccountsForMap, matchingPaymentAccountsForMap, paymentAccountListState.paymentAccountBalanceFetchStatus, false);
+            // Fallback: look up repayment-referenced accounts directly from entity stores
+            // in case they're not in the list state (e.g. race condition, stale list)
+            const existingIds = new Set(fundingAccountsForMap.map((fa) => fa.id).filter(Boolean));
+            for (const accountId of repaymentHistoryFundingAccountIdsForMap) {
+                if (existingIds.has(accountId)) {
+                    continue;
+                }
+                const depositAccount = getDepositAccountByDepositAccountId(depositAccountState, accountId);
+                if (depositAccount != null) {
+                    fundingAccountsForMap.push(mapDepositAccToFundingAccount(depositAccount));
+                    existingIds.add(accountId);
+                    continue;
+                }
+                const paymentAccount = getPaymentAccountByPaymentAccountId(paymentAccountState, accountId);
+                if (paymentAccount != null) {
+                    fundingAccountsForMap.push(mapPaymentAccToFundingAccount(paymentAccount, paymentAccountListState.paymentAccountBalanceFetchStatus));
+                    existingIds.add(accountId);
+                }
+            }
+        }
+    }
+    const accountInfoByAccountId = {};
+    fundingAccountsForMap.forEach((fa) => {
+        if (fa.id != null) {
+            accountInfoByAccountId[fa.id] = {
+                accountId: fa.id,
+                accountLogo: fa.logo,
+                accountType: fa.accType === 'depositAccount' ? 'depositAccount' : 'paymentAccount',
+                depositAccountLast4: fa.accountLast4,
+                depositAccountName: fa.label,
+            };
+        }
+    });
+    repaymentHistoryWithUsers = applyPaymentHistoryFiltersSearchAndSort(repaymentHistoryWithUsers, filters, searchText, uiState, accountInfoByAccountId);
+    const reducedFetchState = reduceAllFetchState([
+        { fetchState, error },
+        depositAccountsView,
+        paymentAccountsView,
+        ...Object.values(paymentAccountListState.paymentAccountBalanceFetchStatus),
+    ]);
+    return {
+        accountInfoByAccountId,
+        creditAccountId,
+        currencyCode,
+        currencySymbol,
+        filters,
+        isAutoPayEnabled,
+        repaymentHistory: repaymentHistoryWithUsers,
+        repaymentHistoryIds,
+        repaymentHistoryUsers,
+        searchText,
+        totalRepayments,
+        uiState,
+        fetchState: reducedFetchState.fetchState,
+        error: reducedFetchState.error,
+        version: 0,
+    };
+};

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/fetchChargeCardPaymentHistoryEpic.js

@@ -0,0 +1,31 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { updateChargeCardRepayments } from '../../../../entity/chargeCardRepayment/chargeCardRepaymentReducer';
+import { updateAllUsers } from '../../../../entity/user/userReducer';
+import { createZeniAPIStatus, isSuccessStatus, } from '../../../../responsePayload';
+import { fetchChargeCardPaymentHistory, updateChargeCardPaymentHistory, updateChargeCardPaymentHistoryFailure, } from './chargeCardPaymentHistoryReducer';
+export const fetchChargeCardPaymentHistoryEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchChargeCardPaymentHistory.match), switchMap(() => {
+    const queryParams = { include_history: true };
+    const queryString = encodeURIComponent(JSON.stringify(queryParams));
+    return zeniAPI
+        .getJSON(`${zeniAPI.apiEndPoints.cardMicroServiceBaseUrl}/1.0/cards/repayments?query=${queryString}`)
+        .pipe(mergeMap((response) => {
+        if (isSuccessStatus(response) && response.data != null) {
+            return of(
+            // Store repayments FIRST before marking as completed
+            updateChargeCardRepayments(response.data.repayment_history), updateAllUsers({
+                users: response.data.repayment_history
+                    .map((repayment) => repayment.paid_by_user)
+                    .filter((user) => user != null),
+            }), 
+            // Mark as completed LAST, after all data is stored
+            updateChargeCardPaymentHistory(response.data));
+        }
+        else {
+            return of(updateChargeCardPaymentHistoryFailure(response.status));
+        }
+    }), catchError((error) => {
+        return of(updateChargeCardPaymentHistoryFailure(createZeniAPIStatus('Unexpected Error', 'Fetch charge card payment history REST API call errored out' +
+            JSON.stringify(error))));
+    }));
+}));

package/lib/esm/view/spendManagement/chargeCards/chargeCardPaymentHistory/fetchChargeCardPaymentPageEpic.js

@@ -0,0 +1,31 @@
+import { concat, from } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchChargeCardRepaymentDetail } from '../chargeCardRepaymentDetail/chargeCardRepaymentDetailReducer';
+import { fetchChargeCardPaymentHistory, fetchChargeCardPaymentPage, } from './chargeCardPaymentHistoryReducer';
+export const fetchChargeCardPaymentPageEpic = (actions$, state$) => actions$.pipe(filter(fetchChargeCardPaymentPage.match), mergeMap((action) => {
+    const { cacheOverride } = action.payload;
+    const chargeCardPaymentPageActions = [];
+    const state = state$.value;
+    const chargeCardPaymentHistoryState = state.chargeCardPaymentHistoryState;
+    if (cacheOverride === true) {
+        chargeCardPaymentPageActions.push(fetchChargeCardPaymentHistory());
+    }
+    else {
+        if (chargeCardPaymentHistoryState.fetchState !== 'Completed' &&
+            chargeCardPaymentHistoryState.fetchState !== 'In-Progress') {
+            chargeCardPaymentPageActions.push(fetchChargeCardPaymentHistory());
+        }
+    }
+    // Fetch repayment detail if deposit or payment accounts are not fetched
+    //These are needed to get the transfer from accounts for the repayment history
+    const depositAccountListState = state.depositAccountListState;
+    const paymentAccountListState = state.paymentAccountListState;
+    const needsRepaymentDetailFetch = (depositAccountListState.fetchState !== 'Completed' &&
+        depositAccountListState.fetchState !== 'In-Progress') ||
+        (paymentAccountListState.fetchState !== 'Completed' &&
+            paymentAccountListState.fetchState !== 'In-Progress');
+    if (needsRepaymentDetailFetch) {
+        chargeCardPaymentPageActions.push(fetchChargeCardRepaymentDetail());
+    }
+    return concat(from(chargeCardPaymentPageActions));
+}));

package/lib/esm/view/spendManagement/chargeCards/chargeCardRepaymentDetail/chargeCardRepaymentDetailSelector.js

@@ -1,5 +1,5 @@
-import { reduceAllFetchState } from '../../../../commonStateTypes/reduceFetchState';
-import { getAllFundingAccounts, } from '../../commonSetup/setupViewSelector';
+import { reduceAnyCompletedFetchState } from '../../../../commonStateTypes/reduceFetchState';
+import { getAllFundingAccounts, mapDepositAccountWithLimitToFundingAccount, } from '../../commonSetup/setupViewSelector';
 import { getAllDepositAccounts } from '../../zeniAccounts/depositAccountList/depositAccountListSelector';
 import { getAllPaymentAccounts } from '../../zeniAccounts/paymentAccountList/paymentAccountListSelector';
 export const getChargeCardRepaymentDetail = (state) => {
@@ -8,11 +8,17 @@ export const getChargeCardRepaymentDetail = (state) => {
     const depositAccountsView = getAllDepositAccounts(depositAccountState, depositAccountListState);
     const paymentAccountsView = getAllPaymentAccounts(paymentAccountState, paymentAccountListState);
     let transferFromAccounts = [];
-    if (depositAccountsView.fetchState === 'Completed' &&
-        paymentAccountsView.fetchState === 'Completed') {
-        transferFromAccounts = getAllFundingAccounts(depositAccountsView.depositAccounts, paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+    if (paymentAccountsView.fetchState === 'Completed') {
+        if (depositAccountsView.fetchState === 'Completed') {
+            transferFromAccounts = getAllFundingAccounts(depositAccountsView.depositAccounts, paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+        }
+        else {
+            const depositFundingFromLimit = Object.values(depositAccountState.depositAccountLimitForChargeCardByID ?? {}).map(mapDepositAccountWithLimitToFundingAccount);
+            const paymentFundingAccounts = getAllFundingAccounts([], paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+            transferFromAccounts = [...depositFundingFromLimit, ...paymentFundingAccounts];
+        }
     }
-    const reducedFetchState = reduceAllFetchState([
+    const reducedFetchState = reduceAnyCompletedFetchState([
         depositAccountsView,
         paymentAccountsView,
         ...Object.values(paymentAccountListState.paymentAccountBalanceFetchStatus),

package/lib/esm/view/spendManagement/chargeCards/chargeCardRepaymentDetail/fetchChargeCardRepaymentDetailEpic.js

@@ -7,8 +7,8 @@ export const fetchChargeCardRepaymentDetailEpic = (actions$, state$) => actions$
     const fetchChargeCardRepaymentDetailActions = [];
     const state = state$.value;
     const depositAccounts = state.depositAccountListState;
-    if (depositAccounts.fetchState !== 'In-Progress' &&
-        depositAccounts.fetchState !== 'Completed') {
+    const willFetchDeposit = depositAccounts.fetchState !== 'In-Progress' && depositAccounts.fetchState !== 'Completed';
+    if (willFetchDeposit) {
         fetchChargeCardRepaymentDetailActions.push(fetchDepositAccountList());
     }
     const paymentAccounts = state.paymentAccountListState;

package/lib/esm/view/spendManagement/chargeCards/chargeCardRepaymentDetail/initiateChargeCardRepaymentEpic.js

@@ -9,6 +9,7 @@ import { getAllFundingAccounts } from '../../commonSetup/setupViewSelector';
 import { accountTypeSubConfigCodeToAccType } from '../../helpers';
 import { getAllDepositAccounts } from '../../zeniAccounts/depositAccountList/depositAccountListSelector';
 import { getAllPaymentAccounts } from '../../zeniAccounts/paymentAccountList/paymentAccountListSelector';
+import { addRepaymentToChargeCardPaymentHistory } from '../chargeCardPaymentHistory/chargeCardPaymentHistoryReducer';
 import { updateCreditAccountRepaymentAmountAndDate } from '../chargeCardList/chargeCardListReducer';
 import { initiateChargeCardRepayment, updateChargeCardRepaymentStatus, } from './chargeCardRepaymentDetailReducer';
 export const initiateChargeCardRepaymentEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(initiateChargeCardRepayment.match), switchMap((action) => {
@@ -36,6 +37,10 @@ export const initiateChargeCardRepaymentEpic = (actions$, state$, zeniAPI) => ac
             if (isSuccessResponse(response) && response.data != null) {
                 const actions = [
                     updateChargeCardRepayment(response.data.card_repayment),
+                    addRepaymentToChargeCardPaymentHistory({
+                        cardRepaymentId: response.data.card_repayment.card_repayment_id,
+                        zeniCreditAccountId: response.data.card_repayment.zeni_credit_account_id,
+                    }),
                     updateCreditAccountRepaymentAmountAndDate({
                         amount: toAmount(response.data.card_repayment.amount, response.data.card_repayment.currency_code, response.data.card_repayment.currency_symbol),
                         date: date(response.data.card_repayment.repayment_date),

package/lib/esm/view/spendManagement/chargeCards/chargeCardSetUp/epic/fetchChargeCardSetupViewEpic.js

@@ -48,7 +48,7 @@ export const fetchChargeCardSetupViewEpic = (actions$, state$, zeniAPI) => actio
                     updateDepositAccounts(response.data.deposit_accounts ?? []),
                     updateDepositAccountList({
                         data: response.data?.deposit_accounts ?? [],
-                        updateType: 'replace',
+                        updateType: 'merge',
                     }),
                     updateSetupViewLocalStoreData({
                         companyId: response.data.companies[0].company_id,

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

@@ -219,6 +219,21 @@ export const mapDepositAccToFundingAccount = (depositAcc) => ({
     createTime: depositAcc.createTime,
     accountLast4: depositAcc.accountLast4,
 });
+export const mapDepositAccountWithLimitToFundingAccount = (depositAcc) => ({
+    id: depositAcc.id,
+    accType: 'depositAccount',
+    label: depositAcc.accountName,
+    maskedAccountNumber: depositAcc.maskedAccountNumber,
+    accountBalance: depositAcc.accountBalance,
+    logo: undefined,
+    zeniAccountId: depositAcc.zeniAccountId,
+    balanceFetchStatus: {
+        fetchState: 'Completed',
+        error: undefined,
+    },
+    createTime: depositAcc.createTime,
+    accountLast4: depositAcc.maskedAccountNumber.match(/(\d{4})$/)?.[1] ?? undefined,
+});
 export const mapPaymentAccToFundingAccount = (paymentAcc, paymentAccountBalanceFetchStatus) => ({
     id: paymentAcc.paymentAccountId,
     accType: 'paymentAccount',

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

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    listeningToPusherEvent: false,
     approverListState: {
         approverIds: [],
         attributes: [],
@@ -176,6 +177,11 @@ const remiSetupApproverView = createSlice({
             reducer(draft, action) {
                 const { approvalRuleIds } = action.payload;
                 if (draft.remiSetupApproverViewUpdateData != null) {
+                    if (draft.remiSetupApproverViewUpdateData.type === 'approval_update' &&
+                        draft.remiSetupApproverViewUpdateData.data
+                            ?.isApplicableOnPendingApprovalEntity === true) {
+                        draft.listeningToPusherEvent = true;
+                    }
                     draft.remiSetupApproverViewUpdateData.updateStatus = {
                         fetchState: 'Completed',
                         error: undefined,
@@ -236,6 +242,9 @@ const remiSetupApproverView = createSlice({
                 return { payload: { remiSetupApproverViewUpdateData } };
             },
         },
+        setListeningToPusherEvent(draft, action) {
+            draft.listeningToPusherEvent = action.payload;
+        },
         clearRemiSetupApproverViewUpdateData(draft) {
             if (draft.remiSetupApproverViewUpdateData != null) {
                 draft.remiSetupApproverViewUpdateData.data = undefined;
@@ -246,5 +255,5 @@ const remiSetupApproverView = createSlice({
         },
     },
 });
-export const { fetchRemiSetupApproverView, fetchRemiSetupApproverViewSuccess, fetchRemiSetupApproverViewFailure, fetchRemiApproversDetails, fetchRemiApproversList, fetchRemiApproversListSuccess, fetchRemiApproversListFailure, deleteRemiApprovalRule, deleteRemiApprovalRuleSuccess, deleteRemiApprovalRuleFailure, saveRemiSetupApproverViewUpdates, saveRemiSetupApproverViewUpdatesSuccess, saveRemiSetupApproverViewUpdatesFailure, initializeRemiSetupApproverViewUpdateData, saveRemiSetupApproverViewUpdateData, clearRemiSetupApproverViewUpdateData, clearRemiSetupApproverView, } = remiSetupApproverView.actions;
+export const { fetchRemiSetupApproverView, fetchRemiSetupApproverViewSuccess, fetchRemiSetupApproverViewFailure, fetchRemiApproversDetails, fetchRemiApproversList, fetchRemiApproversListSuccess, fetchRemiApproversListFailure, deleteRemiApprovalRule, deleteRemiApprovalRuleSuccess, deleteRemiApprovalRuleFailure, saveRemiSetupApproverViewUpdates, saveRemiSetupApproverViewUpdatesSuccess, saveRemiSetupApproverViewUpdatesFailure, initializeRemiSetupApproverViewUpdateData, saveRemiSetupApproverViewUpdateData, setListeningToPusherEvent, clearRemiSetupApproverViewUpdateData, clearRemiSetupApproverView, } = remiSetupApproverView.actions;
 export default remiSetupApproverView.reducer;

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 } = remiSetupApproverViewState;
+    const { approvalRulesDeleteStatusById, approvalRuleIds, fetchState, error, listeningToPusherEvent, } = remiSetupApproverViewState;
     const deleteStateList = Object.values(approvalRulesDeleteStatusById);
     const approvalRules = getApprovalRulesByIds(approvalRuleState, approvalRuleIds);
     const allApprovalRules = approvalRules.map((approvalRule) => {
@@ -42,10 +42,11 @@ export const getRemiSetupApproverView = (state, filterAdmins = true) => {
         approvalRulesStatus,
         fetchState,
         error,
+        listeningToPusherEvent,
     };
 };
 export const getRemiSetupApproverUpdateDataView = createSelector((state) => state.remiSetupApproverViewState, (state) => state.approvalRuleState, (state) => state.classState, (state) => state.classListState, (state) => state.userState, (state) => state.userRoleState, (remiSetupApproverViewState, approvalRuleState, classState, classListState, userState, userRoleState) => {
-    const { approvalRuleIds, approverListState, remiSetupApproverViewUpdateData, fetchState, error, } = remiSetupApproverViewState;
+    const { approvalRuleIds, approverListState, remiSetupApproverViewUpdateData, fetchState, error, listeningToPusherEvent, } = remiSetupApproverViewState;
     const { approverIds, attributes, fetchStatus } = approverListState;
     const { fetchState: classListFetchState, error: classListFetchStateError, classIds, } = classListState;
     const allApprovalRules = getApprovalRulesByIds(approvalRuleState, approvalRuleIds).map((approvalRule) => {
@@ -113,5 +114,6 @@ export const getRemiSetupApproverUpdateDataView = createSelector((state) => stat
         ]),
         fetchState,
         error,
+        listeningToPusherEvent,
     };
 });