@zeniai/client-epic-state 5.0.65 → 5.0.66-betaAK1

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/cashManagementOverviewReducer.js

@@ -0,0 +1,88 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initialCashManagementBannerState, initialUpcomingPaymentEventsListState, } from './cashManagementOverviewState';
+export const initialState = {
+    banner: initialCashManagementBannerState,
+    upcomingPaymentEvents: initialUpcomingPaymentEventsListState,
+    fetchState: 'Not-Started',
+    error: undefined,
+    hasValidState() {
+        return this.fetchState == 'Completed';
+    },
+};
+const cashManagementOverview = createSlice({
+    name: 'cashManagementOverview',
+    initialState,
+    reducers: {
+        fetchCashManagementOverviewPage: {
+            reducer(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            _draft, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            _action) {
+                // do nothing - the corresponding epic listens to this action and fans out
+            },
+            prepare(cacheOverride) {
+                return { payload: { cacheOverride } };
+            },
+        },
+        fetchUpcomingPaymentEvents(draft) {
+            draft.upcomingPaymentEvents = {
+                ...draft.upcomingPaymentEvents,
+                fetchState: 'In-Progress',
+                error: undefined,
+            };
+        },
+        updateUpcomingPaymentEventsList(draft, action) {
+            const { data } = action.payload;
+            const eventIds = [];
+            data.events.forEach((payload) => {
+                if (payload.id != null) {
+                    eventIds.push(payload.id);
+                }
+            });
+            draft.upcomingPaymentEvents = {
+                fetchState: 'Completed',
+                error: undefined,
+                billStages: (data.bill_stages ?? []),
+                eventIds,
+                horizonDays: data.horizon_days,
+                reimbursementStages: (data.reimbursement_stages ??
+                    []),
+                tenantNamespace: data.tenant_namespace,
+            };
+        },
+        updateUpcomingPaymentEventsListFetchStatus(draft, action) {
+            draft.upcomingPaymentEvents = {
+                ...draft.upcomingPaymentEvents,
+                fetchState: action.payload.fetchState,
+                error: action.payload.error,
+            };
+        },
+        fetchCashManagementBanner(draft) {
+            draft.banner = {
+                ...initialCashManagementBannerState,
+                fetchState: 'In-Progress',
+                error: undefined,
+            };
+        },
+        updateCashManagementBanner(draft, action) {
+            draft.banner = {
+                fetchState: 'Completed',
+                error: undefined,
+                data: action.payload.data,
+            };
+        },
+        updateCashManagementBannerFetchStatus(draft, action) {
+            draft.banner = {
+                ...draft.banner,
+                fetchState: action.payload.fetchState,
+                error: action.payload.error,
+            };
+        },
+        clearCashManagementOverview(draft) {
+            Object.assign(draft, initialState);
+        },
+    },
+});
+export const { fetchCashManagementOverviewPage, fetchUpcomingPaymentEvents, updateUpcomingPaymentEventsList, updateUpcomingPaymentEventsListFetchStatus, fetchCashManagementBanner, updateCashManagementBanner, updateCashManagementBannerFetchStatus, clearCashManagementOverview, } = cashManagementOverview.actions;
+export default cashManagementOverview.reducer;

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/cashManagementOverviewSelector.js

@@ -0,0 +1,93 @@
+import { zeroAmount } from '../../../../commonStateTypes/amount';
+import { reduceAllFetchState } from '../../../../commonStateTypes/reduceFetchState';
+import { getUpcomingPaymentEventsByIds } from '../../../../entity/upcomingPaymentEvent/upcomingPaymentEventSelector';
+export const getCashManagementOverviewBanner = (state) => {
+    const { banner } = state.cashManagementOverviewState;
+    return {
+        fetchState: banner.fetchState,
+        error: banner.error,
+        data: banner.data,
+        version: 0,
+    };
+};
+export const getCashManagementOverview = (state) => {
+    const { cashManagementOverviewState, depositAccountListState, depositAccountState, paymentAccountListState, paymentAccountState, treasuryDetailState, } = state;
+    const outflowEventsFetchState = {
+        fetchState: cashManagementOverviewState.upcomingPaymentEvents.fetchState,
+        error: cashManagementOverviewState.upcomingPaymentEvents.error,
+    };
+    const bannerFetchState = {
+        fetchState: cashManagementOverviewState.banner.fetchState,
+        error: cashManagementOverviewState.banner.error,
+    };
+    const aggregate = reduceAllFetchState([
+        {
+            fetchState: paymentAccountListState.fetchState,
+            error: paymentAccountListState.error,
+        },
+        {
+            fetchState: depositAccountListState.fetchState,
+            error: depositAccountListState.error,
+        },
+        {
+            fetchState: treasuryDetailState.fetchState,
+            error: treasuryDetailState.error,
+        },
+        outflowEventsFetchState,
+        bannerFetchState,
+    ]);
+    const treasuryBalance = treasuryDetailState.accountSummary?.totalBalance ?? zeroAmount();
+    const cashBalance = sumCashBalances(paymentAccountListState.paymentAccountIds, paymentAccountState, depositAccountListState.accountIds, depositAccountState);
+    const totalCash = addAmounts(treasuryBalance, cashBalance);
+    return {
+        bannerFetchState,
+        cashBalance,
+        horizonDays: cashManagementOverviewState.upcomingPaymentEvents.horizonDays,
+        outflowEvents: getUpcomingPaymentEventsByIds(state.upcomingPaymentEventState, cashManagementOverviewState.upcomingPaymentEvents.eventIds),
+        outflowEventsFetchState,
+        totalCash,
+        treasuryBalance,
+        fetchState: aggregate.fetchState,
+        error: aggregate.error,
+        version: 0,
+    };
+};
+const isZeroAmount = (a) => a.amount === 0 && a.currencyCode === 'USD' && a.currencySymbol === '$';
+/**
+ * Adds two Amounts. Currencies must match (the seeded zeroAmount() counts as
+ * "no currency yet" and adopts `b`'s currency). Mismatches return `a`
+ * unchanged and warn — mixing currencies in a total is a bug, not silent
+ * conversion.
+ */
+const addAmounts = (a, b) => {
+    if (isZeroAmount(a)) {
+        return { ...b };
+    }
+    if (a.currencyCode !== b.currencyCode ||
+        a.currencySymbol !== b.currencySymbol) {
+        console.warn(`cashManagementOverview: skipping balance with mismatched currency. Expected ${a.currencyCode} (${a.currencySymbol}), got ${b.currencyCode} (${b.currencySymbol}).`);
+        return a;
+    }
+    return {
+        amount: a.amount + b.amount,
+        currencyCode: a.currencyCode,
+        currencySymbol: a.currencySymbol,
+    };
+};
+const sumCashBalances = (paymentAccountIds, paymentAccountState, depositAccountIds, depositAccountState) => {
+    let total = zeroAmount();
+    paymentAccountIds.forEach((id) => {
+        const balance = paymentAccountState.paymentAccountByID[id]?.balances
+            ?.available;
+        if (balance != null) {
+            total = addAmounts(total, balance);
+        }
+    });
+    depositAccountIds.forEach((id) => {
+        const balance = depositAccountState.depositAccountByID[id]?.accountBalance?.available;
+        if (balance != null) {
+            total = addAmounts(total, balance);
+        }
+    });
+    return total;
+};

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/cashManagementOverviewState.js

@@ -0,0 +1,14 @@
+export const initialCashManagementBannerState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    data: undefined,
+};
+export const initialUpcomingPaymentEventsListState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    billStages: [],
+    eventIds: [],
+    horizonDays: 0,
+    reimbursementStages: [],
+    tenantNamespace: undefined,
+};

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/epics/fetchCashManagementBannerEpic.js

@@ -0,0 +1,6 @@
+import { EMPTY } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchCashManagementBanner, } from '../cashManagementOverviewReducer';
+// TODO: replace EMPTY with an actual API call once the banner endpoint is finalized.
+// Figma: https://www.figma.com/design/FUg2pv7edRAidx9X56VnZT/Cash-Management?node-id=2265-63443
+export const fetchCashManagementBannerEpic = (actions$) => actions$.pipe(filter(fetchCashManagementBanner.match), mergeMap(() => EMPTY));

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/epics/fetchCashManagementOverviewPageEpic.js

@@ -0,0 +1,35 @@
+import { concat, from } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchTreasuryOverviewDetail } from '../../../treasury/treasuryList/treasuryDetailReducer';
+import { fetchZeniAccountList } from '../../../zeniAccounts/zeniAccountList/zeniAccountListReducer';
+import { fetchCashManagementBanner, fetchCashManagementOverviewPage, fetchUpcomingPaymentEvents, } from '../cashManagementOverviewReducer';
+export const fetchCashManagementOverviewPageEpic = (actions$, state$) => actions$.pipe(filter(fetchCashManagementOverviewPage.match), mergeMap((action) => {
+    const { cacheOverride } = action.payload;
+    const state = state$.value;
+    const pageActions = [];
+    if (cacheOverride === true) {
+        pageActions.push(fetchTreasuryOverviewDetail(true));
+        pageActions.push(fetchZeniAccountList(true));
+        pageActions.push(fetchUpcomingPaymentEvents());
+        pageActions.push(fetchCashManagementBanner());
+    }
+    else {
+        const treasuryDetailState = state.treasuryDetailState;
+        if (treasuryDetailState.hasValidState() === false &&
+            treasuryDetailState.fetchState !== 'In-Progress') {
+            pageActions.push(fetchTreasuryOverviewDetail(false));
+        }
+        pageActions.push(fetchZeniAccountList(false));
+        const upcomingEvents = state.cashManagementOverviewState.upcomingPaymentEvents;
+        if (upcomingEvents.fetchState !== 'Completed' &&
+            upcomingEvents.fetchState !== 'In-Progress') {
+            pageActions.push(fetchUpcomingPaymentEvents());
+        }
+        const banner = state.cashManagementOverviewState.banner;
+        if (banner.fetchState !== 'Completed' &&
+            banner.fetchState !== 'In-Progress') {
+            pageActions.push(fetchCashManagementBanner());
+        }
+    }
+    return concat(from(pageActions));
+}));

package/lib/esm/view/spendManagement/cashManagement/cashManagementOverview/epics/fetchUpcomingPaymentEventsEpic.js

@@ -0,0 +1,22 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
+import { updateUpcomingPaymentEvents } from '../../../../../entity/upcomingPaymentEvent/upcomingPaymentEventReducer';
+import { fetchUpcomingPaymentEvents, updateUpcomingPaymentEventsList, updateUpcomingPaymentEventsListFetchStatus, } from '../cashManagementOverviewReducer';
+export const fetchUpcomingPaymentEventsEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchUpcomingPaymentEvents.match), switchMap(() => zeniAPI
+    .getJSON(
+// TODO: drop /rajat/ once the prod endpoint lands.
+`${zeniAPI.apiEndPoints.spendManagementMicroServiceBaseUrl}/rajat/1.0/upcoming-payment-events`)
+    .pipe(mergeMap((response) => {
+    if (isSuccessResponse(response) && response.data != null) {
+        return of(updateUpcomingPaymentEvents(response.data.events), updateUpcomingPaymentEventsList({ data: response.data }));
+    }
+    return of(updateUpcomingPaymentEventsListFetchStatus({
+        fetchState: 'Error',
+        error: response.status,
+    }));
+}), catchError((error) => of(updateUpcomingPaymentEventsListFetchStatus({
+    fetchState: 'Error',
+    error: createZeniAPIStatus('Unexpected Error', 'Fetch upcoming payment events REST API call errored out' +
+        JSON.stringify(error)),
+}))))));

package/lib/esm/view/spendManagement/chargeCards/cashbackDetail/cashbackDetailReducer.js

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { mapCurrencyPayloadToCurrency } from '../../../../commonPayloadTypes/v2/viewAndReportPayloadv2';
 import { toAmount } from '../../../../commonStateTypes/amount';
+import { createCacheOverrideFetchReducer } from '../../../../commonStateTypes/cacheOverrideFetchReducer';
 import { initialCashbackAnalytics, } from './cashbackDetailState';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -27,10 +28,10 @@ const cashbackDetail = createSlice({
     name: 'cashbackDetail',
     initialState,
     reducers: {
-        fetchCashbackDetail(draft) {
+        fetchCashbackDetail: createCacheOverrideFetchReducer((draft) => {
             draft.fetchState = 'In-Progress';
             draft.error = undefined;
-        },
+        }),
         updateCashbackDetail(draft, action) {
             draft.cashbackByPeriod = toCashbackByPeriod(action.payload);
             draft.cashbackSummary = toCashbackSummary(action.payload);

package/lib/esm/view/spendManagement/chargeCards/chargeCardConfig/chargeCardConfigReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toAmount } from '../../../../commonStateTypes/amount';
+import { createCacheOverrideFetchReducer } from '../../../../commonStateTypes/cacheOverrideFetchReducer';
 import { toCreditLimitFrequencyCodeType } from '../../../../entity/chargeCard/chargeCard';
 import { toCreditTerm, toRePaymentInfo, } from './chargeCardConfigPayload';
 export const initialState = {
@@ -30,10 +31,10 @@ const chargeCardConfig = createSlice({
     name: 'chargeCardConfig',
     initialState,
     reducers: {
-        fetchChargeCardConfig(draft) {
+        fetchChargeCardConfig: createCacheOverrideFetchReducer((draft) => {
             draft.fetchState = 'In-Progress';
             draft.error = undefined;
-        },
+        }),
         updateChargeCardConfig(draft, action) {
             const { payload } = action;
             draft.creditLimitFrequency =

package/lib/esm/view/spendManagement/chargeCards/chargeCardDetail/chargeCardDetailReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import { mapSortOrderPayloadToSortOrder, } from '../../../../commonPayloadTypes/sortOrderPayload';
 import { toAttachment, } from '../../../../entity/transaction/payloadTypes/attachmentPayload';
 import { emptyChargeCardDetail, mapChargeCardTransactionStatisticsPayloadToChargeCardTransactionStatistics, toChargeCardTransactionSortKeyType, } from './chargeCardDetail';
+import { addChargeCardTransactionFromPusher, addDeclinedChargeCardTransactionFromPusher, } from '../../../../commonStateTypes/pusherActions';
 export const initialState = {
     detailById: {},
     recurringExpensesByChargeCardId: {},
@@ -64,19 +65,30 @@ const chargeCardDetail = createSlice({
         },
         fetchChargeCardTransactionList: {
             reducer(draft, action) {
-                const { chargeCardId, pageToken, pageTokenType } = action.payload;
+                const { chargeCardId, pageToken, pageTokenType, cacheOverride } = action.payload;
                 const existingCardDetail = draft.detailById[chargeCardId] ?? emptyChargeCardDetail;
+                const existingUi = existingCardDetail.transactionList.uiState;
+                // cacheOverride=true (Pusher): preserve fetchState, error, and scroll
+                // to avoid skeleton flash. Normal fetches reset as before.
                 draft.detailById[chargeCardId] = {
                     ...existingCardDetail,
                     transactionList: {
                         ...existingCardDetail.transactionList,
-                        fetchState: 'In-Progress',
-                        error: undefined,
+                        fetchState: cacheOverride
+                            ? existingCardDetail.transactionList.fetchState
+                            : 'In-Progress',
+                        error: cacheOverride
+                            ? existingCardDetail.transactionList.error
+                            : undefined,
                         uiState: {
-                            ...existingCardDetail.transactionList.uiState,
-                            scrollYOffset: existingCardDetail.transactionList.uiState.pageToken === null
-                                ? 0
-                                : existingCardDetail.transactionList.uiState.scrollYOffset,
+                            ...existingUi,
+                            // Preserve scroll on silent refresh so users aren't snapped
+                            // away from their reading position.
+                            scrollYOffset: cacheOverride
+                                ? existingUi.scrollYOffset
+                                : existingUi.pageToken === null
+                                    ? 0
+                                    : existingUi.scrollYOffset,
                             pageToken: pageToken,
                             pageTokenType: pageTokenType,
                         },
@@ -93,18 +105,24 @@ const chargeCardDetail = createSlice({
             const { chargeCardId, data, cacheOverride } = action.payload;
             const existingCardDetail = draft.detailById[chargeCardId] ?? emptyChargeCardDetail;
             const newTransactionIds = data.transactions.map((tran) => tran.transaction_id);
+            const existingIds = existingCardDetail.transactionList.transactionIds;
+            // cacheOverride (Pusher): refresh page 1 but keep page 2+ IDs.
+            // Normal pagination: append new page, deduped.
+            const newIdSet = new Set(newTransactionIds);
+            const mergedTransactionIds = cacheOverride
+                ? [
+                    ...newTransactionIds,
+                    ...existingIds.filter((id) => !newIdSet.has(id)),
+                ]
+                : [
+                    ...existingIds,
+                    ...newTransactionIds.filter((id) => !existingIds.includes(id)),
+                ];
             draft.detailById[chargeCardId] = {
                 ...existingCardDetail,
                 transactionList: {
                     ...existingCardDetail.transactionList,
-                    transactionIds: [
-                        ...new Set([
-                            ...(cacheOverride
-                                ? []
-                                : existingCardDetail.transactionList.transactionIds),
-                            ...newTransactionIds,
-                        ]),
-                    ],
+                    transactionIds: mergedTransactionIds,
                     fetchState: 'Completed',
                     error: undefined,
                     uiState: {
@@ -116,9 +134,12 @@ const chargeCardDetail = createSlice({
                         limit: data.query.limit,
                         pageToken: data.query.page_token,
                         pageTokenType: data.query.page_token_type,
-                        scrollYOffset: existingCardDetail.transactionList.uiState.pageToken === null
-                            ? 0
-                            : existingCardDetail.transactionList.uiState.scrollYOffset,
+                        // Preserve scroll on silent refresh; reset on user-triggered first page.
+                        scrollYOffset: cacheOverride
+                            ? existingCardDetail.transactionList.uiState.scrollYOffset
+                            : existingCardDetail.transactionList.uiState.pageToken === null
+                                ? 0
+                                : existingCardDetail.transactionList.uiState.scrollYOffset,
                     },
                 },
             };
@@ -632,6 +653,22 @@ const chargeCardDetail = createSlice({
             Object.assign(draft, initialState);
         },
     },
+    extraReducers: (builder) => {
+        const prependTransaction = (draft, cardId, txId) => {
+            const detail = draft.detailById[cardId];
+            if (detail != null &&
+                !detail.transactionList.transactionIds.includes(txId)) {
+                detail.transactionList.transactionIds.unshift(txId);
+            }
+        };
+        builder
+            .addCase(addChargeCardTransactionFromPusher, (draft, action) => {
+            prependTransaction(draft, action.payload.cardId, action.payload.transaction.transaction_id);
+        })
+            .addCase(addDeclinedChargeCardTransactionFromPusher, (draft, action) => {
+            prependTransaction(draft, action.payload.cardId, action.payload.transaction.transaction_id);
+        });
+    },
 });
 export const { fetchChargeCardDetailPage, fetchChargeCardDetail, updateChargeCardDetailFetchState, fetchChargeCardTransactionList, updateChargeCardDetailUIState, updateChargeCardTransactionList, updateChargeCardTransactionUploadReceiptsFetchStatus, fetchChargeCardTransactionAttachments, updateChargeCardTransactionIsViewReceiptClicked, updateChargeCardTransactionAttachmentsFailure, updatePhysicalChargeCardAttemptSuccessOrFailure, updatePhysicalChargeCardAttempt, updateDebitCardPinAttempt, updateDebitCardPinAttemptSuccessOrFailure, updateChargeCardTransactionReceiptsShowTickFetchStatus, updateChargeCardTransactionAttachmentsInCardDetail, updateChargeCardTransactionListFailure, updateChargeCardDetail, startCVVActivationWait, completeCVVActivationWait, startDebitCardSetPinWait, completeDebitCardSetPinWait, updateChargeCardDetailUpdateStatus, updateChargeCardSpendLimit, updateChargeCardSpendLimitSuccessOrFailure, updateChargeCardName, updateChargeCardNameSuccessOrFailure, lockChargeCard, lockChargeCardSuccessOrFailure, unlockChargeCard, unlockChargeCardSuccessOrFailure, closeChargeCard, closeChargeCardSuccessOrFailure, fetchDepositAccountLimit, updateDepositAccountLimitFetchStatus, fetchChargeCardTransactionStatistics, updateChargeCardTransactionStatistics, updateChargeCardTransactionStatisticsFetchState, fetchChargeCardsRecurringExpenses, updateChargeCardsRecurringExpenses, updateChargeCardsRecurringExpensesFetchState, sendOtpCardHolder, resendOtpCardHolder, sendOtpCardHolderSuccess, sendOtpCardHolderFailure, verifyOtpCardHolder, verifyOtpCardHolderSuccess, verifyOtpCardHolderFailure, clearChargeCardDetail, } = chargeCardDetail.actions;
 export default chargeCardDetail.reducer;

package/lib/esm/view/spendManagement/chargeCards/chargeCardDetail/fetchChargeCardDetailEpic.js

@@ -13,13 +13,24 @@ export const fetchChargeCardDetailEpic = (actions$, state$, zeniAPI) => actions$
     const chargeCardAction = [];
     const state = state$.value;
     const chargeCardDetail = recordGet(state.chargeCardDetailState.detailById, chargeCardId, undefined);
+    // Skip if a user-triggered fetch is already in-flight (not applicable
+    // to cacheOverride/Pusher refreshes, which always proceed).
     if (cacheOverride === true ||
         chargeCardDetail == null ||
         chargeCardDetail.fetchState !== 'In-Progress') {
+        // Silent refresh: preserve fetchState to avoid skeleton flash.
+        // Discriminate via fetchState (not null-check) because the reducer
+        // always creates an entry before the epic runs.
+        const isSilentRefresh = cacheOverride === true &&
+            chargeCardDetail != null &&
+            chargeCardDetail.fetchState !== 'Not-Started';
         chargeCardAction.push(updateChargeCardDetailFetchState({
             chargeCardId,
-            isRefreshingViewInBackground: cacheOverride,
-            fetchState: 'In-Progress',
+            isRefreshingViewInBackground: isSilentRefresh,
+            fetchState: isSilentRefresh
+                ? chargeCardDetail.fetchState
+                : 'In-Progress',
+            error: isSilentRefresh ? chargeCardDetail.error : undefined,
         }));
         const query = {
             is_include_card_activation_events: true,
@@ -37,6 +48,8 @@ export const fetchChargeCardDetailEpic = (actions$, state$, zeniAPI) => actions$
                 }));
             }
             else {
+                // Surface errors even on silent refresh so the user
+                // knows data is stale (follow-up: consider toast instead).
                 return of(updateChargeCardDetailFetchState({
                     chargeCardId,
                     fetchState: 'Error',
@@ -45,6 +58,7 @@ export const fetchChargeCardDetailEpic = (actions$, state$, zeniAPI) => actions$
                 }));
             }
         }), catchError((error) => {
+            // Surface network failures even on silent refresh.
             return of(updateChargeCardDetailFetchState({
                 chargeCardId,
                 fetchState: 'Error',

package/lib/esm/view/spendManagement/chargeCards/chargeCardDetail/fetchChargeCardDetailPageEpic.js

@@ -15,15 +15,16 @@ export const fetchChargeCardDetailPageEpic = (actions$, state$) => actions$.pipe
         ? exsitingChargeCardDetail.transactionList.uiState.pageTokenType
         : null;
     if (cacheOverride === true) {
+        // Forward cacheOverride to all sub-fetches to prevent skeleton flash.
         chargeCardTransactionListAction.push(fetchChargeCardDetail(chargeCardId, cacheOverride));
         //latest transactions need to be fetched hence removing pageToken and pageTokenType
-        chargeCardTransactionListAction.push(fetchChargeCardTransactionList(chargeCardId, null, null));
-        chargeCardTransactionListAction.push(fetchChargeCardConfig());
+        chargeCardTransactionListAction.push(fetchChargeCardTransactionList(chargeCardId, null, null, true));
+        chargeCardTransactionListAction.push(fetchChargeCardConfig(true));
         if (doFetchCreditAccounts && isCreditCardEnabled) {
-            chargeCardTransactionListAction.push(fetchCreditAccount());
+            chargeCardTransactionListAction.push(fetchCreditAccount(true));
         }
         if (doFetchCreditAccounts && isCreditCardEnabled) {
-            chargeCardTransactionListAction.push(fetchCreditAccountRepayment());
+            chargeCardTransactionListAction.push(fetchCreditAccountRepayment(true));
         }
     }
     else {

package/lib/esm/view/spendManagement/chargeCards/chargeCardList/chargeCardListReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toAmount } from '../../../../commonStateTypes/amount';
+import { createCacheOverrideFetchReducer } from '../../../../commonStateTypes/cacheOverrideFetchReducer';
 import { date } from '../../../../zeniDayJS';
 import { initialCreditAcc, initialCreditAccountRepayment, initialDebitCardSummaries, initialResendRevokeCardInvite, toCreditAccountStatusType, } from './chargeCardList';
 export const initialState = {
@@ -43,6 +44,10 @@ export const initialState = {
     revokeCardInvite: initialResendRevokeCardInvite,
     creditAccountRepayment: initialCreditAccountRepayment,
 };
+// Silent-Pusher-refresh contract: when cacheOverride=true, fetch reducers
+// leave fetchState and error unchanged so the list page's reduceFetchState
+// selector stays 'Completed' and doesn't flash ChargeCardListLoading.
+// See createCacheOverrideFetchReducer for details.
 const chargeCardList = createSlice({
     name: 'chargeCardList',
     initialState,
@@ -62,10 +67,10 @@ const chargeCardList = createSlice({
                 };
             },
         },
-        fetchCreditAccountRepayment(draft) {
+        fetchCreditAccountRepayment: createCacheOverrideFetchReducer((draft) => {
             draft.creditAccountRepayment.fetchState = 'In-Progress';
             draft.creditAccountRepayment.error = undefined;
-        },
+        }),
         updateCreditAccountRepaymentAmountAndDate(draft, action) {
             draft.creditAccountRepayment.initiatedRepayments = action.payload.amount;
             draft.creditAccountRepayment.initiatedRepaymentDate = action.payload.date;
@@ -83,10 +88,10 @@ const chargeCardList = createSlice({
         updateRowActionCardId(draft, action) {
             draft.rowActionCardId = action.payload;
         },
-        fetchCreditAccount(draft) {
+        fetchCreditAccount: createCacheOverrideFetchReducer((draft) => {
             draft.creditAccount.fetchState = 'In-Progress';
             draft.creditAccount.error = undefined;
-        },
+        }),
         updateCreditAccount(draft, action) {
             if (action.payload.length > 0) {
                 draft.creditAccount = toCreditAccount(action.payload[0]);
@@ -99,10 +104,10 @@ const chargeCardList = createSlice({
                 error: action.payload,
             };
         },
-        fetchDebitCardSummary(draft) {
+        fetchDebitCardSummary: createCacheOverrideFetchReducer((draft) => {
             draft.debitCardSummaries.fetchState = 'In-Progress';
             draft.debitCardSummaries.error = undefined;
-        },
+        }),
         updateDebitCardSummary(draft, action) {
             draft.debitCardSummaries = toDebitCardSummaries(action.payload);
         },
@@ -113,10 +118,10 @@ const chargeCardList = createSlice({
                 error: action.payload,
             };
         },
-        fetchChargeCardList(draft) {
+        fetchChargeCardList: createCacheOverrideFetchReducer((draft) => {
             draft.fetchState = 'In-Progress';
             draft.error = undefined;
-        },
+        }),
         updateChargeCardList(draft, action) {
             const { cards, unassigned_credit } = action.payload.chargeCardListPayload;
             const newCard = cards.map((card) => card.card_id);
@@ -152,6 +157,20 @@ const chargeCardList = createSlice({
                 draft.uiState.scrollYOffset = action.payload.uiState.scrollYOffset;
             }
         },
+        updateCreditAccountBalanceFromPusher(draft, action) {
+            const { currencyCode, currencySymbol } = action.payload;
+            const amt = (v) => v !== undefined
+                ? toAmount(v, currencyCode, currencySymbol)
+                : undefined;
+            draft.creditAccount.available =
+                amt(action.payload.available) ?? draft.creditAccount.available;
+            draft.creditAccount.balance =
+                amt(action.payload.balance) ?? draft.creditAccount.balance;
+            draft.creditAccount.hold =
+                amt(action.payload.hold) ?? draft.creditAccount.hold;
+            draft.creditAccount.cashback =
+                amt(action.payload.cashback) ?? draft.creditAccount.cashback;
+        },
         clearChargeCardList(draft) {
             Object.assign(draft, initialState);
         },
@@ -307,7 +326,7 @@ const chargeCardList = createSlice({
         },
     },
 });
-export const { fetchChargeCardListPage, fetchCreditAccountRepayment, updateCreditAccountRepayment, updateCreditAccountRepaymentFailure, updateCreditAccountRepaymentAmountAndDate, updateRowActionCardId, fetchCreditAccount, updateCreditAccount, updateCreditAccountFailure, fetchDebitCardSummary, updateDebitCardSummary, updateDebitCardSummaryFailure, fetchChargeCardList, updateChargeCardList, updateChargeCardListFailure, updateSearchText, updateBulkActionCardIds, updateChargeCardListUIState, clearChargeCardList, resendCardInvite, resendCardInviteSuccess, resendCardInviteFailure, revokeCardInvite, revokeCardInviteSuccess, revokeCardInviteFailure, updateChargeCardsSpendLimit, updateChargeCardsSpendLimitSuccessOrFailure, lockChargeCards, lockChargeCardsSuccessOrFailure, unlockChargeCards, unlockChargeCardsSuccessOrFailure, closeChargeCards, closeChargeCardsSuccessOrFailure, revokeChargeCardsInvite, revokeChargeCardsInviteSuccessOrFailure, } = chargeCardList.actions;
+export const { fetchChargeCardListPage, fetchCreditAccountRepayment, updateCreditAccountRepayment, updateCreditAccountRepaymentFailure, updateCreditAccountRepaymentAmountAndDate, updateRowActionCardId, fetchCreditAccount, updateCreditAccount, updateCreditAccountFailure, fetchDebitCardSummary, updateDebitCardSummary, updateDebitCardSummaryFailure, fetchChargeCardList, updateChargeCardList, updateChargeCardListFailure, updateSearchText, updateBulkActionCardIds, updateChargeCardListUIState, updateCreditAccountBalanceFromPusher, clearChargeCardList, resendCardInvite, resendCardInviteSuccess, resendCardInviteFailure, revokeCardInvite, revokeCardInviteSuccess, revokeCardInviteFailure, updateChargeCardsSpendLimit, updateChargeCardsSpendLimitSuccessOrFailure, lockChargeCards, lockChargeCardsSuccessOrFailure, unlockChargeCards, unlockChargeCardsSuccessOrFailure, closeChargeCards, closeChargeCardsSuccessOrFailure, revokeChargeCardsInvite, revokeChargeCardsInviteSuccessOrFailure, } = chargeCardList.actions;
 export default chargeCardList.reducer;
 // helper
 const toCreditAccount = (payload) => ({

package/lib/esm/view/spendManagement/chargeCards/chargeCardList/fetchChargeCardListPageEpic.js

@@ -14,18 +14,21 @@ export const fetchChargeCardListPageEpic = (actions$, state$) => actions$.pipe(f
     const state = state$.value;
     const cashbackDetailState = state.cashbackDetailState;
     if (cacheOverride === true) {
+        // Forward cacheOverride to all sub-fetches to prevent skeleton flash.
         if (doFetchCreditAccountsDebitSummaryAndCashback === true) {
             if (isCreditCardEnabled) {
-                chargeCardListPageAction.push(fetchCreditAccount());
-                chargeCardListPageAction.push(fetchCreditAccountRepayment());
+                chargeCardListPageAction.push(fetchCreditAccount(true));
+                chargeCardListPageAction.push(fetchCreditAccountRepayment(true));
             }
             if (isDebitCardEnabled) {
-                chargeCardListPageAction.push(fetchDebitCardSummary());
+                chargeCardListPageAction.push(fetchDebitCardSummary(true));
             }
-            chargeCardListPageAction.push(fetchCashbackDetail());
+            chargeCardListPageAction.push(fetchCashbackDetail(true));
         }
-        chargeCardListPageAction.push(fetchChargeCardList());
-        chargeCardListPageAction.push(fetchChargeCardConfig());
+        chargeCardListPageAction.push(fetchChargeCardList(true));
+        // Config participates in the list page's reduceFetchState — needs cacheOverride.
+        chargeCardListPageAction.push(fetchChargeCardConfig(true));
+        // These don't participate in the list page's reduceFetchState.
         chargeCardListPageAction.push(fetchUserListByType('cardHolderCandidate', true));
         chargeCardListPageAction.push(fetchUserListByType('cardAdmin', true));
         chargeCardListPageAction.push(fetchClassList());

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

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { createCacheOverrideFetchReducer } from '../../../../commonStateTypes/cacheOverrideFetchReducer';
 import { initialChargeCardPaymentHistoryState, } from './chargeCardPaymentHistory';
 export const initialState = initialChargeCardPaymentHistoryState;
 const chargeCardPaymentHistory = createSlice({
@@ -17,10 +18,10 @@ const chargeCardPaymentHistory = createSlice({
                 };
             },
         },
-        fetchChargeCardPaymentHistory(draft) {
+        fetchChargeCardPaymentHistory: createCacheOverrideFetchReducer((draft) => {
             draft.fetchState = 'In-Progress';
             draft.error = undefined;
-        },
+        }),
         updateChargeCardPaymentHistory(draft, action) {
             const payload = action.payload;
             draft.creditAccountId = payload.credit_account_id;

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

@@ -8,7 +8,7 @@ export const fetchChargeCardPaymentPageEpic = (actions$, state$) => actions$.pip
     const state = state$.value;
     const chargeCardPaymentHistoryState = state.chargeCardPaymentHistoryState;
     if (cacheOverride === true) {
-        chargeCardPaymentPageActions.push(fetchChargeCardPaymentHistory());
+        chargeCardPaymentPageActions.push(fetchChargeCardPaymentHistory(true));
     }
     else {
         if (chargeCardPaymentHistoryState.fetchState !== 'Completed' &&