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

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

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaymentHistorySourceAccountName = getPaymentHistorySourceAccountName;
+exports.getPaymentStatusDisplayText = getPaymentStatusDisplayText;
+exports.applyPaymentHistoryFiltersSearchAndSort = applyPaymentHistoryFiltersSearchAndSort;
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
+const userSelector_1 = require("../../../../entity/user/userSelector");
+const spendManagementFilterHelpers_1 = require("../../spendManagementFilterHelpers");
+function getPaymentHistorySourceAccountName(repayment, accountInfoByAccountId) {
+    const fromMap = repayment.paymentAccountId != null
+        ? accountInfoByAccountId?.[repayment.paymentAccountId]?.depositAccountName
+        : undefined;
+    return fromMap ?? repayment.paymentAccountName ?? '';
+}
+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'
+                : (0, userSelector_1.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 (0, orderBy_1.default)(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'
+            : (0, userSelector_1.getUserName)(repayment.paidByUser);
+        const accountNameString = getPaymentHistorySourceAccountName(repayment, accountInfoByAccountId).toLowerCase();
+        return (amountString.includes(loweredSearchText) ||
+            statusString.includes(loweredSearchText) ||
+            initiatedByString.toLowerCase().includes(loweredSearchText) ||
+            accountNameString.includes(loweredSearchText));
+    });
+}
+function applyPaymentHistoryFiltersSearchAndSort(repayments, filters, searchText, uiState, accountInfoByAccountId) {
+    let result = (0, spendManagementFilterHelpers_1.applyAdvancedFiltersOnList)('charge_card_payment_history', repayments, filters);
+    result = filterPaymentHistoryBySearchText(result, searchText, accountInfoByAccountId);
+    result = sortPaymentHistory(result, uiState.sortKey, uiState.sortOrder, accountInfoByAccountId);
+    return result;
+}

package/lib/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistoryPayload.d.ts

@@ -0,0 +1,13 @@
+import { ChargeCardRepaymentPayload } from '../../../../entity/chargeCardRepayment/chargeCardRepaymentPayload';
+import { ZeniAPIResponse } from '../../../../responsePayload';
+export interface ChargeCardPaymentHistoryPayload {
+    credit_account_id: string;
+    currency_code: string;
+    currency_symbol: string;
+    is_auto_pay_enabled: boolean;
+    repayment_history: RepaymentHistoryPayload[];
+    total_repayments: number;
+}
+type RepaymentHistoryPayload = Omit<ChargeCardRepaymentPayload, 'is_deleted' | 'provider_counterparty_account_id'>;
+export type FetchChargeCardPaymentHistoryResponse = ZeniAPIResponse<ChargeCardPaymentHistoryPayload>;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistoryReducer.d.ts

@@ -0,0 +1,19 @@
+import { ID } from '../../../../commonStateTypes/common';
+import { ZeniAPIStatus } from '../../../../responsePayload';
+import { ChargeCardPaymentHistoryDownloadUIState, ChargeCardPaymentHistoryState, PaymentHistoryFilters, PaymentHistoryUIState } from './chargeCardPaymentHistory';
+import { ChargeCardPaymentHistoryPayload } from './chargeCardPaymentHistoryPayload';
+export declare const initialState: ChargeCardPaymentHistoryState;
+export declare const addRepaymentToChargeCardPaymentHistory: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    cardRepaymentId: ID;
+    zeniCreditAccountId: ID;
+}, "chargeCardPaymentHistory/addRepaymentToChargeCardPaymentHistory">, fetchChargeCardPaymentPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[cacheOverride?: any], {
+    cacheOverride: any;
+}, "chargeCardPaymentHistory/fetchChargeCardPaymentPage", never, never>, fetchChargeCardPaymentHistory: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"chargeCardPaymentHistory/fetchChargeCardPaymentHistory">, updateChargeCardPaymentHistory: import("@reduxjs/toolkit").ActionCreatorWithPayload<ChargeCardPaymentHistoryPayload, "chargeCardPaymentHistory/updateChargeCardPaymentHistory">, updateChargeCardPaymentHistoryFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "chargeCardPaymentHistory/updateChargeCardPaymentHistoryFailure">, clearChargeCardPaymentHistory: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"chargeCardPaymentHistory/clearChargeCardPaymentHistory">, updatePaymentHistoryFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    filters: PaymentHistoryFilters;
+}, "chargeCardPaymentHistory/updatePaymentHistoryFilters">, updatePaymentHistorySearchText: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "chargeCardPaymentHistory/updatePaymentHistorySearchText">, updatePaymentHistoryDownloadUIState: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    uiState: Partial<ChargeCardPaymentHistoryDownloadUIState>;
+}, "chargeCardPaymentHistory/updatePaymentHistoryDownloadUIState">, updatePaymentHistoryUIState: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    uiState: Partial<PaymentHistoryUIState>;
+}, "chargeCardPaymentHistory/updatePaymentHistoryUIState">;
+declare const _default: import("redux").Reducer<ChargeCardPaymentHistoryState>;
+export default _default;

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

@@ -0,0 +1,87 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updatePaymentHistoryUIState = exports.updatePaymentHistoryDownloadUIState = exports.updatePaymentHistorySearchText = exports.updatePaymentHistoryFilters = exports.clearChargeCardPaymentHistory = exports.updateChargeCardPaymentHistoryFailure = exports.updateChargeCardPaymentHistory = exports.fetchChargeCardPaymentHistory = exports.fetchChargeCardPaymentPage = exports.addRepaymentToChargeCardPaymentHistory = exports.initialState = void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const chargeCardPaymentHistory_1 = require("./chargeCardPaymentHistory");
+exports.initialState = chargeCardPaymentHistory_1.initialChargeCardPaymentHistoryState;
+const chargeCardPaymentHistory = (0, toolkit_1.createSlice)({
+    name: 'chargeCardPaymentHistory',
+    initialState: exports.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, exports.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;
+            }
+        },
+    },
+});
+_a = chargeCardPaymentHistory.actions, exports.addRepaymentToChargeCardPaymentHistory = _a.addRepaymentToChargeCardPaymentHistory, exports.fetchChargeCardPaymentPage = _a.fetchChargeCardPaymentPage, exports.fetchChargeCardPaymentHistory = _a.fetchChargeCardPaymentHistory, exports.updateChargeCardPaymentHistory = _a.updateChargeCardPaymentHistory, exports.updateChargeCardPaymentHistoryFailure = _a.updateChargeCardPaymentHistoryFailure, exports.clearChargeCardPaymentHistory = _a.clearChargeCardPaymentHistory, exports.updatePaymentHistoryFilters = _a.updatePaymentHistoryFilters, exports.updatePaymentHistorySearchText = _a.updatePaymentHistorySearchText, exports.updatePaymentHistoryDownloadUIState = _a.updatePaymentHistoryDownloadUIState, exports.updatePaymentHistoryUIState = _a.updatePaymentHistoryUIState;
+exports.default = chargeCardPaymentHistory.reducer;

package/lib/view/spendManagement/chargeCards/chargeCardPaymentHistory/chargeCardPaymentHistorySelector.d.ts

@@ -0,0 +1,24 @@
+import { ID } from '../../../../commonStateTypes/common';
+import { SelectorView } from '../../../../commonStateTypes/viewAndReport/viewAndReport';
+import { ChargeCardRepayment } from '../../../../entity/chargeCardRepayment/chargeCardRepayment';
+import { User } from '../../../../entity/user/userState';
+import { RootState } from '../../../../reducer';
+import { PaymentHistoryAccountInfo, PaymentHistoryFilters, PaymentHistoryUIState } from './chargeCardPaymentHistory';
+export interface ChargeCardRepaymentWithUser extends ChargeCardRepayment {
+    paidByUser?: User;
+}
+export interface ChargeCardPaymentHistorySelectorView extends SelectorView {
+    accountInfoByAccountId: Record<ID, PaymentHistoryAccountInfo>;
+    creditAccountId: ID;
+    currencyCode: string;
+    currencySymbol: string;
+    filters: PaymentHistoryFilters;
+    isAutoPayEnabled: boolean;
+    repaymentHistory: ChargeCardRepaymentWithUser[];
+    repaymentHistoryIds: ID[];
+    repaymentHistoryUsers: User[];
+    searchText: string;
+    totalRepayments: number;
+    uiState: PaymentHistoryUIState;
+}
+export declare const getChargeCardPaymentHistoryView: (state: RootState) => ChargeCardPaymentHistorySelectorView;

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChargeCardPaymentHistoryView = void 0;
+const reduceFetchState_1 = require("../../../../commonStateTypes/reduceFetchState");
+const chargeCardRepaymentSelector_1 = require("../../../../entity/chargeCardRepayment/chargeCardRepaymentSelector");
+const userSelector_1 = require("../../../../entity/user/userSelector");
+const setupViewSelector_1 = require("../../commonSetup/setupViewSelector");
+const depositAccountSelector_1 = require("../../../../entity/depositAccount/depositAccountSelector");
+const paymentAccountSelector_1 = require("../../../../entity/paymentAccount/paymentAccountSelector");
+const depositAccountListSelector_1 = require("../../zeniAccounts/depositAccountList/depositAccountListSelector");
+const paymentAccountListSelector_1 = require("../../zeniAccounts/paymentAccountList/paymentAccountListSelector");
+const chargeCardPaymentHistoryHelpers_1 = require("./chargeCardPaymentHistoryHelpers");
+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 = (0, chargeCardRepaymentSelector_1.getChargeCardRepaymentByIds)(chargeCardRepaymentState, repaymentHistoryIds);
+    const repaymentHistoryUserIds = Array.from(new Set(repaymentHistory.map((r) => r.paidById)));
+    // Get users first to enrich repayments
+    const repaymentHistoryUsers = (0, userSelector_1.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 = (0, depositAccountListSelector_1.getAllDepositAccounts)(depositAccountState, depositAccountListState);
+    const paymentAccountsView = (0, paymentAccountListSelector_1.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 = (0, setupViewSelector_1.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 = (0, depositAccountSelector_1.getDepositAccountByDepositAccountId)(depositAccountState, accountId);
+                if (depositAccount != null) {
+                    fundingAccountsForMap.push((0, setupViewSelector_1.mapDepositAccToFundingAccount)(depositAccount));
+                    existingIds.add(accountId);
+                    continue;
+                }
+                const paymentAccount = (0, paymentAccountSelector_1.getPaymentAccountByPaymentAccountId)(paymentAccountState, accountId);
+                if (paymentAccount != null) {
+                    fundingAccountsForMap.push((0, setupViewSelector_1.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 = (0, chargeCardPaymentHistoryHelpers_1.applyPaymentHistoryFiltersSearchAndSort)(repaymentHistoryWithUsers, filters, searchText, uiState, accountInfoByAccountId);
+    const reducedFetchState = (0, reduceFetchState_1.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,
+    };
+};
+exports.getChargeCardPaymentHistoryView = getChargeCardPaymentHistoryView;

package/lib/view/spendManagement/chargeCards/chargeCardPaymentHistory/fetchChargeCardPaymentHistoryEpic.d.ts

@@ -0,0 +1,9 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { updateChargeCardRepayments } from '../../../../entity/chargeCardRepayment/chargeCardRepaymentReducer';
+import { updateAllUsers } from '../../../../entity/user/userReducer';
+import { RootState } from '../../../../reducer';
+import { ZeniAPI } from '../../../../zeniAPI';
+import { fetchChargeCardPaymentHistory, updateChargeCardPaymentHistory, updateChargeCardPaymentHistoryFailure } from './chargeCardPaymentHistoryReducer';
+export type ActionType = ReturnType<typeof fetchChargeCardPaymentHistory> | ReturnType<typeof updateChargeCardPaymentHistory> | ReturnType<typeof updateChargeCardPaymentHistoryFailure> | ReturnType<typeof updateChargeCardRepayments> | ReturnType<typeof updateAllUsers>;
+export declare const fetchChargeCardPaymentHistoryEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchChargeCardPaymentHistoryEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const chargeCardRepaymentReducer_1 = require("../../../../entity/chargeCardRepayment/chargeCardRepaymentReducer");
+const userReducer_1 = require("../../../../entity/user/userReducer");
+const responsePayload_1 = require("../../../../responsePayload");
+const chargeCardPaymentHistoryReducer_1 = require("./chargeCardPaymentHistoryReducer");
+const fetchChargeCardPaymentHistoryEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(chargeCardPaymentHistoryReducer_1.fetchChargeCardPaymentHistory.match), (0, operators_1.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((0, operators_1.mergeMap)((response) => {
+        if ((0, responsePayload_1.isSuccessStatus)(response) && response.data != null) {
+            return (0, rxjs_1.of)(
+            // Store repayments FIRST before marking as completed
+            (0, chargeCardRepaymentReducer_1.updateChargeCardRepayments)(response.data.repayment_history), (0, userReducer_1.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
+            (0, chargeCardPaymentHistoryReducer_1.updateChargeCardPaymentHistory)(response.data));
+        }
+        else {
+            return (0, rxjs_1.of)((0, chargeCardPaymentHistoryReducer_1.updateChargeCardPaymentHistoryFailure)(response.status));
+        }
+    }), (0, operators_1.catchError)((error) => {
+        return (0, rxjs_1.of)((0, chargeCardPaymentHistoryReducer_1.updateChargeCardPaymentHistoryFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch charge card payment history REST API call errored out' +
+            JSON.stringify(error))));
+    }));
+}));
+exports.fetchChargeCardPaymentHistoryEpic = fetchChargeCardPaymentHistoryEpic;

package/lib/view/spendManagement/chargeCards/chargeCardPaymentHistory/fetchChargeCardPaymentPageEpic.d.ts

@@ -0,0 +1,7 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../reducer';
+import { fetchChargeCardRepaymentDetail } from '../chargeCardRepaymentDetail/chargeCardRepaymentDetailReducer';
+import { fetchChargeCardPaymentHistory, fetchChargeCardPaymentPage } from './chargeCardPaymentHistoryReducer';
+export type ActionType = ReturnType<typeof fetchChargeCardPaymentPage> | ReturnType<typeof fetchChargeCardPaymentHistory> | ReturnType<typeof fetchChargeCardRepaymentDetail>;
+export declare const fetchChargeCardPaymentPageEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>) => Observable<ActionType>;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchChargeCardPaymentPageEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const chargeCardRepaymentDetailReducer_1 = require("../chargeCardRepaymentDetail/chargeCardRepaymentDetailReducer");
+const chargeCardPaymentHistoryReducer_1 = require("./chargeCardPaymentHistoryReducer");
+const fetchChargeCardPaymentPageEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(chargeCardPaymentHistoryReducer_1.fetchChargeCardPaymentPage.match), (0, operators_1.mergeMap)((action) => {
+    const { cacheOverride } = action.payload;
+    const chargeCardPaymentPageActions = [];
+    const state = state$.value;
+    const chargeCardPaymentHistoryState = state.chargeCardPaymentHistoryState;
+    if (cacheOverride === true) {
+        chargeCardPaymentPageActions.push((0, chargeCardPaymentHistoryReducer_1.fetchChargeCardPaymentHistory)());
+    }
+    else {
+        if (chargeCardPaymentHistoryState.fetchState !== 'Completed' &&
+            chargeCardPaymentHistoryState.fetchState !== 'In-Progress') {
+            chargeCardPaymentPageActions.push((0, chargeCardPaymentHistoryReducer_1.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((0, chargeCardRepaymentDetailReducer_1.fetchChargeCardRepaymentDetail)());
+    }
+    return (0, rxjs_1.concat)((0, rxjs_1.from)(chargeCardPaymentPageActions));
+}));
+exports.fetchChargeCardPaymentPageEpic = fetchChargeCardPaymentPageEpic;

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

@@ -11,11 +11,17 @@ const getChargeCardRepaymentDetail = (state) => {
     const depositAccountsView = (0, depositAccountListSelector_1.getAllDepositAccounts)(depositAccountState, depositAccountListState);
     const paymentAccountsView = (0, paymentAccountListSelector_1.getAllPaymentAccounts)(paymentAccountState, paymentAccountListState);
     let transferFromAccounts = [];
-    if (depositAccountsView.fetchState === 'Completed' &&
-        paymentAccountsView.fetchState === 'Completed') {
-        transferFromAccounts = (0, setupViewSelector_1.getAllFundingAccounts)(depositAccountsView.depositAccounts, paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+    if (paymentAccountsView.fetchState === 'Completed') {
+        if (depositAccountsView.fetchState === 'Completed') {
+            transferFromAccounts = (0, setupViewSelector_1.getAllFundingAccounts)(depositAccountsView.depositAccounts, paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+        }
+        else {
+            const depositFundingFromLimit = Object.values(depositAccountState.depositAccountLimitForChargeCardByID ?? {}).map(setupViewSelector_1.mapDepositAccountWithLimitToFundingAccount);
+            const paymentFundingAccounts = (0, setupViewSelector_1.getAllFundingAccounts)([], paymentAccountsView.paymentAccounts, paymentAccountListState.paymentAccountBalanceFetchStatus);
+            transferFromAccounts = [...depositFundingFromLimit, ...paymentFundingAccounts];
+        }
     }
-    const reducedFetchState = (0, reduceFetchState_1.reduceAllFetchState)([
+    const reducedFetchState = (0, reduceFetchState_1.reduceAnyCompletedFetchState)([
         depositAccountsView,
         paymentAccountsView,
         ...Object.values(paymentAccountListState.paymentAccountBalanceFetchStatus),

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

@@ -10,8 +10,8 @@ const fetchChargeCardRepaymentDetailEpic = (actions$, state$) => actions$.pipe((
     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((0, depositAccountListReducer_1.fetchDepositAccountList)());
     }
     const paymentAccounts = state.paymentAccountListState;

package/lib/view/spendManagement/chargeCards/chargeCardRepaymentDetail/initiateChargeCardRepaymentEpic.d.ts

@@ -4,7 +4,8 @@ import { updateChargeCardRepayment } from '../../../../entity/chargeCardRepaymen
 import { updateCompanyPrimaryAccount, updateEnableAutoPayForChargeCard } from '../../../../entity/company/companyReducer';
 import { RootState } from '../../../../reducer';
 import { ZeniAPI } from '../../../../zeniAPI';
+import { addRepaymentToChargeCardPaymentHistory } from '../chargeCardPaymentHistory/chargeCardPaymentHistoryReducer';
 import { updateCreditAccountRepaymentAmountAndDate } from '../chargeCardList/chargeCardListReducer';
 import { initiateChargeCardRepayment, updateChargeCardRepaymentStatus } from './chargeCardRepaymentDetailReducer';
-export type ActionType = ReturnType<typeof initiateChargeCardRepayment> | ReturnType<typeof updateChargeCardRepayment> | ReturnType<typeof updateCreditAccountRepaymentAmountAndDate> | ReturnType<typeof updateChargeCardRepaymentStatus> | ReturnType<typeof updateCompanyPrimaryAccount> | ReturnType<typeof updateEnableAutoPayForChargeCard>;
+export type ActionType = ReturnType<typeof addRepaymentToChargeCardPaymentHistory> | ReturnType<typeof initiateChargeCardRepayment> | ReturnType<typeof updateChargeCardRepayment> | ReturnType<typeof updateCreditAccountRepaymentAmountAndDate> | ReturnType<typeof updateChargeCardRepaymentStatus> | ReturnType<typeof updateCompanyPrimaryAccount> | ReturnType<typeof updateEnableAutoPayForChargeCard>;
 export declare const initiateChargeCardRepaymentEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

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

@@ -12,6 +12,7 @@ const setupViewSelector_1 = require("../../commonSetup/setupViewSelector");
 const helpers_1 = require("../../helpers");
 const depositAccountListSelector_1 = require("../../zeniAccounts/depositAccountList/depositAccountListSelector");
 const paymentAccountListSelector_1 = require("../../zeniAccounts/paymentAccountList/paymentAccountListSelector");
+const chargeCardPaymentHistoryReducer_1 = require("../chargeCardPaymentHistory/chargeCardPaymentHistoryReducer");
 const chargeCardListReducer_1 = require("../chargeCardList/chargeCardListReducer");
 const chargeCardRepaymentDetailReducer_1 = require("./chargeCardRepaymentDetailReducer");
 const initiateChargeCardRepaymentEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(chargeCardRepaymentDetailReducer_1.initiateChargeCardRepayment.match), (0, operators_1.switchMap)((action) => {
@@ -39,6 +40,10 @@ const initiateChargeCardRepaymentEpic = (actions$, state$, zeniAPI) => actions$.
             if ((0, responsePayload_1.isSuccessResponse)(response) && response.data != null) {
                 const actions = [
                     (0, chargeCardRepaymentReducer_1.updateChargeCardRepayment)(response.data.card_repayment),
+                    (0, chargeCardPaymentHistoryReducer_1.addRepaymentToChargeCardPaymentHistory)({
+                        cardRepaymentId: response.data.card_repayment.card_repayment_id,
+                        zeniCreditAccountId: response.data.card_repayment.zeni_credit_account_id,
+                    }),
                     (0, chargeCardListReducer_1.updateCreditAccountRepaymentAmountAndDate)({
                         amount: (0, amount_1.toAmount)(response.data.card_repayment.amount, response.data.card_repayment.currency_code, response.data.card_repayment.currency_symbol),
                         date: (0, zeniDayJS_1.date)(response.data.card_repayment.repayment_date),

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

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

package/lib/view/spendManagement/commonSetup/setupViewSelector.d.ts

@@ -5,7 +5,7 @@ import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { AccountBase } from '../../../entity/account/accountState';
 import { CompanyBillPayInfo } from '../../../entity/company/companyStateTypes';
 import { Country } from '../../../entity/countryList/countryListState';
-import { DepositAccount } from '../../../entity/depositAccount/depositAccount';
+import { DepositAccount, DepositAccountWithLimit } from '../../../entity/depositAccount/depositAccount';
 import { File } from '../../../entity/file/fileState';
 import { InstitutionDetails, Logo, PaymentAccount } from '../../../entity/paymentAccount/paymentAccountState';
 import { RootState } from '../../../reducer';
@@ -94,5 +94,6 @@ export declare function getBusinessVerificationDetails(state: RootState, company
 export declare const getCompanyAndIdentityDetails: (state: RootState, companyId: ID, companyAndIdentityDetails: CompanyAndIdentityDetails) => CompanyAndOfficerLocalData;
 export declare const getAllFundingAccounts: (depositAccounts: DepositAccount[], paymentAccounts: PaymentAccount[], paymentAccountBalanceFetchStatus: Record<ID, FetchStateAndError>, includeOnlyVerifiedAccounts?: boolean) => FundingAccount[];
 export declare const mapDepositAccToFundingAccount: (depositAcc: DepositAccount) => FundingAccount;
+export declare const mapDepositAccountWithLimitToFundingAccount: (depositAcc: DepositAccountWithLimit) => FundingAccount;
 export declare const mapPaymentAccToFundingAccount: (paymentAcc: PaymentAccount, paymentAccountBalanceFetchStatus: Record<ID, FetchStateAndError>) => FundingAccount;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapPaymentAccToFundingAccount = exports.mapDepositAccToFundingAccount = exports.getAllFundingAccounts = exports.getCompanyAndIdentityDetails = void 0;
+exports.mapPaymentAccToFundingAccount = exports.mapDepositAccountWithLimitToFundingAccount = exports.mapDepositAccToFundingAccount = exports.getAllFundingAccounts = exports.getCompanyAndIdentityDetails = void 0;
 exports.getCommonSetupViewDetails = getCommonSetupViewDetails;
 exports.getBusinessVerificationDetails = getBusinessVerificationDetails;
 const accountSelector_1 = require("../../../entity/account/accountSelector");
@@ -227,6 +227,22 @@ const mapDepositAccToFundingAccount = (depositAcc) => ({
     accountLast4: depositAcc.accountLast4,
 });
 exports.mapDepositAccToFundingAccount = mapDepositAccToFundingAccount;
+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,
+});
+exports.mapDepositAccountWithLimitToFundingAccount = mapDepositAccountWithLimitToFundingAccount;
 const mapPaymentAccToFundingAccount = (paymentAcc, paymentAccountBalanceFetchStatus) => ({
     id: paymentAcc.paymentAccountId,
     accType: 'paymentAccount',

package/lib/view/spendManagement/reimbursement/remiSetupApproverView/remiSetupApproverViewReducer.d.ts

@@ -40,6 +40,6 @@ export declare const fetchRemiSetupApproverView: import("@reduxjs/toolkit").Acti
     approvalRuleId: string | undefined;
 }, "remiSetupApproverView/initializeRemiSetupApproverViewUpdateData", never, never>, saveRemiSetupApproverViewUpdateData: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[remiSetupApproverViewUpdateData: Partial<ApprovalRuleUpdateData | ApprovalRuleCreateData>], {
     remiSetupApproverViewUpdateData: Partial<ApprovalRuleUpdateData | ApprovalRuleCreateData>;
-}, "remiSetupApproverView/saveRemiSetupApproverViewUpdateData", never, never>, clearRemiSetupApproverViewUpdateData: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"remiSetupApproverView/clearRemiSetupApproverViewUpdateData">, clearRemiSetupApproverView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"remiSetupApproverView/clearRemiSetupApproverView">;
+}, "remiSetupApproverView/saveRemiSetupApproverViewUpdateData", never, never>, setListeningToPusherEvent: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "remiSetupApproverView/setListeningToPusherEvent">, clearRemiSetupApproverViewUpdateData: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"remiSetupApproverView/clearRemiSetupApproverViewUpdateData">, clearRemiSetupApproverView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"remiSetupApproverView/clearRemiSetupApproverView">;
 declare const _default: import("redux").Reducer<RemiSetupApproverViewState>;
 export default _default;