@zeniai/client-epic-state 5.0.96 → 5.0.97

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

@@ -0,0 +1,54 @@
+import { toAmount } from '../../../../commonStateTypes/amount';
+import { date as zeniDate } from '../../../../zeniDayJS';
+// ---------------------------------------------------------------------------
+// Converters
+// ---------------------------------------------------------------------------
+// The cash agent payload reports `currency_code` only; the v1 surface is
+// USD-only, so we pair it with the canonical `$` symbol here. If the agent
+// grows multi-currency support, this is the single place to widen.
+const CASH_AGENT_CURRENCY_SYMBOL = '$';
+export const toUpcomingPaymentEvent = (event) => ({
+    accountId: event.account_id,
+    accountType: event.account_type,
+    amount: toAmount(event.amount_usd, event.currency_code, CASH_AGENT_CURRENCY_SYMBOL),
+    label: event.label,
+    paymentDate: zeniDate(event.payment_date),
+});
+/**
+ * The agent reports a `null` account id whenever the "account" in question is
+ * a singleton inferred from the account type (today: the treasury account —
+ * there's only one per company, so the type alone identifies it). Callers
+ * already branch on `*BankAccountType`, so collapsing the id to `""` keeps the
+ * state type a plain `ID` (string) without losing information.
+ */
+const toCashManagementMovement = (payload) => ({
+    amount: toAmount(payload.amount, payload.currency_code, CASH_AGENT_CURRENCY_SYMBOL),
+    destinationBankAccountId: payload.destination_bank_account_id ?? '',
+    destinationBankAccountType: payload.destination_bank_account_type,
+    reasoning: payload.reasoning,
+    sourceBankAccountId: payload.source_bank_account_id ?? '',
+    sourceBankAccountType: payload.source_bank_account_type,
+    subMovementType: payload.sub_movement_type,
+});
+const toCashManagementMoneyMovementGroup = (payload) => ({
+    movements: payload.movements.map(toCashManagementMovement),
+    movementType: payload.movement_type,
+});
+export const toCashManagementBannerData = (payload) => ({
+    inflows: payload.inflows.map(toUpcomingPaymentEvent),
+    moneyMovements: payload.money_movements.map(toCashManagementMoneyMovementGroup),
+    outflows: payload.outflows.map(toUpcomingPaymentEvent),
+});
+export const toCashManagementTransfer = (payload) => ({
+    amount: toAmount(payload.amount, payload.currency_code, CASH_AGENT_CURRENCY_SYMBOL),
+    atomicTransactionId: payload.atomic_transaction_id,
+    cashManagementTransferId: payload.cash_management_transfer_id,
+    createTime: zeniDate(payload.create_time),
+    date: zeniDate(payload.date),
+    depositAccountId: payload.deposit_account_id,
+    reasoning: payload.reasoning,
+    scenario: payload.scenario,
+    status: payload.status,
+    transactionType: payload.transaction_type,
+    updateTime: zeniDate(payload.update_time),
+});

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

@@ -0,0 +1,92 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { toCashManagementBannerData, toCashManagementTransfer, } from './cashManagementOverviewPayload';
+import { initialCashManagementBannerState, initialCashManagementRecentTransferState, } from './cashManagementOverviewState';
+export const initialState = {
+    banner: initialCashManagementBannerState,
+    recentTransfer: initialCashManagementRecentTransferState,
+};
+const cashManagementOverview = createSlice({
+    name: 'cashManagementOverview',
+    initialState,
+    reducers: {
+        fetchCashManagementOverviewPage: {
+            reducer() { },
+            prepare(cacheOverride) {
+                return { payload: { cacheOverride } };
+            },
+        },
+        /**
+         * Public banner-fetch entry point. Triggers an orchestrator epic that
+         * fans out to the recommend, settings, and recent-transfer API calls
+         * in parallel. No reducer-side state change — each inner action drives
+         * its own sub-state.
+         *
+         * `cacheOverride === true` forces all three inner fetches regardless
+         * of current slice state; `false` keeps the per-slice dedup so repeat
+         * dispatches are no-ops once a slice is loaded or in-flight.
+         */
+        fetchCashManagementBanner: {
+            reducer() { },
+            prepare(cacheOverride) {
+                return { payload: { cacheOverride } };
+            },
+        },
+        /**
+         * Internal trigger for the recommend API (`/cash-agent/recommend`).
+         * Dispatched by the orchestrator; not exported.
+         */
+        fetchCashManagementRecommendation(draft) {
+            // Keep `draft.banner.data` so the projection chart renders the last
+            // good payload while the refetch is in flight, instead of flickering
+            // to the empty/skeleton state on every page revisit.
+            draft.banner.fetchState = 'In-Progress';
+            draft.banner.error = undefined;
+        },
+        updateCashManagementRecommendation(draft, action) {
+            draft.banner = {
+                fetchState: 'Completed',
+                error: undefined,
+                data: toCashManagementBannerData(action.payload.data),
+            };
+        },
+        updateCashManagementRecommendationFetchStatus(draft, action) {
+            draft.banner = {
+                ...draft.banner,
+                fetchState: action.payload.fetchState,
+                error: action.payload.error,
+            };
+        },
+        /**
+         * Internal trigger for the recent-transfer API
+         * (`/cash-management/transfers`). Dispatched by the orchestrator; not
+         * exported.
+         */
+        fetchRecentTransfer(draft) {
+            // Same anti-flicker pattern as the recommend fetch: keep prior data
+            // while the refetch is in flight.
+            draft.recentTransfer.fetchState = 'In-Progress';
+            draft.recentTransfer.error = undefined;
+        },
+        updateRecentTransfer(draft, action) {
+            draft.recentTransfer = {
+                fetchState: 'Completed',
+                error: undefined,
+                data: action.payload.data != null
+                    ? toCashManagementTransfer(action.payload.data)
+                    : undefined,
+            };
+        },
+        updateRecentTransferFetchStatus(draft, action) {
+            draft.recentTransfer = {
+                ...draft.recentTransfer,
+                fetchState: action.payload.fetchState,
+                error: action.payload.error,
+            };
+        },
+        clearCashManagementOverview(draft) {
+            Object.assign(draft, initialState);
+        },
+    },
+});
+export const { fetchCashManagementOverviewPage, fetchCashManagementBanner, fetchCashManagementRecommendation, updateCashManagementRecommendation, updateCashManagementRecommendationFetchStatus, fetchRecentTransfer, updateRecentTransfer, updateRecentTransferFetchStatus, clearCashManagementOverview, } = cashManagementOverview.actions;
+export default cashManagementOverview.reducer;

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

@@ -0,0 +1,225 @@
+import { zeroAmount } from '../../../../commonStateTypes/amount';
+import { reduceAllFetchState } from '../../../../commonStateTypes/reduceFetchState';
+import { getDepositAccountByDepositAccountId } from '../../../../entity/depositAccount/depositAccountSelector';
+import { mapDepositAccToFundingAccount, } from '../../commonSetup/setupViewSelector';
+/**
+ * Default account type used when the recommend payload has no movement to
+ * expose yet (e.g. before the first fetch resolves). Callers that care about
+ * the movement should also gate on `fetchState === 'Completed'`.
+ */
+const DEFAULT_BANK_ACCOUNT_TYPE = 'deposit_account';
+const DEFAULT_SUB_MOVEMENT_TYPE = 'push';
+export const getCashManagementOverviewBanner = (state) => {
+    const { banner, recentTransfer } = state.cashManagementOverviewState;
+    const autoSweep = state.autoSweepFlowState;
+    // The banner today surfaces a single recommended movement (the first one
+    // returned by the agent). When the agent returns multiple groups/movements
+    // we'll need to broaden this — for now consumers only render one.
+    const movement = banner.data?.moneyMovements[0]?.movements[0];
+    const aggregate = reduceAllFetchState([
+        { fetchState: banner.fetchState, error: banner.error },
+        { fetchState: autoSweep.fetchState, error: autoSweep.error },
+        { fetchState: recentTransfer.fetchState, error: recentTransfer.error },
+    ]);
+    const subMovementType = movement?.subMovementType ?? DEFAULT_SUB_MOVEMENT_TYPE;
+    // The "primary" account is the deposit-account side of the movement —
+    // source for a push (money leaving primary → treasury) and destination
+    // for a pull (money returning to primary).
+    const primaryAccountId = subMovementType === 'pull'
+        ? movement?.destinationBankAccountId
+        : movement?.sourceBankAccountId;
+    const primaryDepositAccount = primaryAccountId != null && primaryAccountId !== ''
+        ? getDepositAccountByDepositAccountId(state.depositAccountState, primaryAccountId)
+        : undefined;
+    const primaryFundingAccount = primaryDepositAccount != null
+        ? mapDepositAccToFundingAccount(primaryDepositAccount)
+        : undefined;
+    // For pull, surface the largest outflow in the horizon as the
+    // "triggering" event. This is a heuristic — the agent doesn't tag a
+    // specific outflow today, but the largest one is the most likely cause
+    // of the buffer breach and matches what the design wants to highlight.
+    const triggeringOutflow = subMovementType === 'pull'
+        ? pickLargestOutflow(banner.data?.outflows)
+        : undefined;
+    return {
+        fetchState: aggregate.fetchState,
+        error: aggregate.error,
+        amount: movement?.amount ?? zeroAmount(),
+        cashManagementSettingsId: autoSweep.settingsId,
+        destinationBankAccountId: movement?.destinationBankAccountId ?? '',
+        destinationBankAccountType: movement?.destinationBankAccountType ?? DEFAULT_BANK_ACCOUNT_TYPE,
+        reasoning: movement?.reasoning ?? '',
+        sourceBankAccountId: movement?.sourceBankAccountId ?? '',
+        sourceBankAccountType: movement?.sourceBankAccountType ?? DEFAULT_BANK_ACCOUNT_TYPE,
+        subMovementType,
+        primaryFundingAccount,
+        triggeringOutflow,
+        recentTransfer: recentTransfer.data,
+        version: 0,
+    };
+};
+const pickLargestOutflow = (outflows) => {
+    if (outflows == null || outflows.length === 0) {
+        return undefined;
+    }
+    return outflows.reduce((largest, event) => event.amount.amount > largest.amount.amount ? event : largest);
+};
+export const getCashManagementOverview = (state) => {
+    const { cashManagementOverviewState, depositAccountListState, depositAccountState, paymentAccountListState, paymentAccountState, treasuryDetailState, } = state;
+    const aggregate = reduceAllFetchState([
+        {
+            fetchState: paymentAccountListState.fetchState,
+            error: paymentAccountListState.error,
+        },
+        {
+            fetchState: depositAccountListState.fetchState,
+            error: depositAccountListState.error,
+        },
+        {
+            fetchState: treasuryDetailState.fetchState,
+            error: treasuryDetailState.error,
+        },
+        {
+            fetchState: cashManagementOverviewState.banner.fetchState,
+            error: cashManagementOverviewState.banner.error,
+        },
+        {
+            fetchState: state.autoSweepFlowState.fetchState,
+            error: state.autoSweepFlowState.error,
+        },
+    ]);
+    const treasuryBalance = treasuryDetailState.accountSummary?.totalBalance ?? zeroAmount();
+    const cashBalance = sumCashBalances(paymentAccountListState.paymentAccountIds, paymentAccountState, depositAccountListState.accountIds, depositAccountState);
+    const totalCash = addAmounts(treasuryBalance, cashBalance);
+    const bannerData = cashManagementOverviewState.banner.data;
+    const inflowEvents = bannerData?.inflows ?? [];
+    const outflowEvents = bannerData?.outflows ?? [];
+    const totalInFlow = sumEventAmounts(inflowEvents);
+    const totalOutFlow = sumEventAmounts(outflowEvents);
+    const cashflow = subtractAmounts(totalInFlow, totalOutFlow);
+    const projectionData = buildProjectionData(cashBalance, inflowEvents, outflowEvents);
+    return {
+        banner: getCashManagementOverviewBanner(state),
+        cashBalance,
+        cashflow,
+        inflowEvents,
+        outflowEvents,
+        projectionData,
+        totalCash,
+        totalInFlow,
+        totalOutFlow,
+        treasuryBalance,
+        fetchState: aggregate.fetchState,
+        error: aggregate.error,
+        version: 0,
+    };
+};
+/**
+ * Walks the inflow / outflow events in chronological order, stepping the
+ * running balance from today's `cashBalance`. Emits a point per event so the
+ * chart can render colored markers at each cash event. Events with the same
+ * payment date are kept as separate steps (preserves the marker count even
+ * if Recharts overlays them at the same X position).
+ */
+const buildProjectionData = (cashBalance, inflowEvents, outflowEvents) => {
+    const events = [
+        ...inflowEvents.map((e) => ({
+            amount: e.amount,
+            date: e.paymentDate,
+            isInflow: true,
+        })),
+        ...outflowEvents.map((e) => ({
+            amount: e.amount,
+            date: e.paymentDate,
+            isInflow: false,
+        })),
+    ].sort((a, b) => {
+        const diff = a.date.valueOf() - b.date.valueOf();
+        if (diff !== 0) {
+            return diff;
+        }
+        // Same-day tie-breaker: apply outflows before inflows so the projection
+        // shows the worst-case low first, then the recovery — matches the
+        // "show me the dip" framing on the cash management overview.
+        if (a.isInflow === b.isInflow) {
+            return 0;
+        }
+        return a.isInflow ? 1 : -1;
+    });
+    let balance = cashBalance;
+    const points = [{ balance, date: 'Today' }];
+    events.forEach((event) => {
+        balance = event.isInflow
+            ? addAmounts(balance, event.amount)
+            : subtractAmounts(balance, event.amount);
+        points.push({
+            balance,
+            date: event.date.format('MMM D'),
+            isInflow: event.isInflow ? true : undefined,
+            isOutflow: event.isInflow ? undefined : true,
+        });
+    });
+    return points;
+};
+const sumEventAmounts = (events) => events.reduce((acc, event) => addAmounts(acc, event.amount), zeroAmount());
+/**
+ * Subtracts `b` from `a`, sharing the currency-match guard with `addAmounts`.
+ * Used to compute net cash flow (`inflow - outflow`).
+ */
+const subtractAmounts = (a, b) => {
+    if (isZeroAmount(b)) {
+        return { ...a };
+    }
+    if (isZeroAmount(a)) {
+        return { ...b, amount: -b.amount };
+    }
+    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 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,10 @@
+export const initialCashManagementBannerState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    data: undefined,
+};
+export const initialCashManagementRecentTransferState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    data: undefined,
+};

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

@@ -0,0 +1,23 @@
+import { from } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchCashManagementSettings } from '../../autoSweepFlow/autoSweepFlowReducer';
+import { fetchCashManagementBanner, fetchCashManagementRecommendation, fetchRecentTransfer, } from '../cashManagementOverviewReducer';
+export const fetchCashManagementBannerEpic = (actions$, state$) => actions$.pipe(filter(fetchCashManagementBanner.match), mergeMap((action) => {
+    const { cacheOverride } = action.payload;
+    const state = state$.value;
+    const actions = [];
+    if (cacheOverride === true ||
+        needsFetch(state.cashManagementOverviewState.banner.fetchState)) {
+        actions.push(fetchCashManagementRecommendation());
+    }
+    if (cacheOverride === true ||
+        needsFetch(state.autoSweepFlowState.fetchState)) {
+        actions.push(fetchCashManagementSettings());
+    }
+    if (cacheOverride === true ||
+        needsFetch(state.cashManagementOverviewState.recentTransfer.fetchState)) {
+        actions.push(fetchRecentTransfer());
+    }
+    return from(actions);
+}));
+const needsFetch = (fetchState) => fetchState !== 'Completed' && fetchState !== 'In-Progress';

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

@@ -0,0 +1,36 @@
+import { concat, from } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchAutoTransferRules } from '../../../autotransferRules/autoTransferRulesReducer';
+import { fetchTreasuryOverviewDetail } from '../../../treasury/treasuryList/treasuryDetailReducer';
+import { fetchZeniAccountList } from '../../../zeniAccounts/zeniAccountList/zeniAccountListReducer';
+import { fetchCashManagementBanner, fetchCashManagementOverviewPage, } 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) {
+        // Banner orchestrator (fetchCashManagementBannerEpic) fans out to
+        // recommendation + settings + recent-transfer internally.
+        pageActions.push(fetchTreasuryOverviewDetail(true), fetchZeniAccountList(true), fetchCashManagementBanner(true), fetchAutoTransferRules(true));
+    }
+    else {
+        const treasuryDetailState = state.treasuryDetailState;
+        if (treasuryDetailState.hasValidState() === false &&
+            treasuryDetailState.fetchState !== 'In-Progress') {
+            pageActions.push(fetchTreasuryOverviewDetail(false));
+        }
+        // zeniAccountListState has no top-level fetchState to dedup against
+        // (only `newCheckingAccount.fetchState`), and the downstream epic is
+        // cheap. Always re-dispatch so the summary stays fresh on page entry.
+        pageActions.push(fetchZeniAccountList(false));
+        // Banner orchestrator handles its own per-slice dedup across
+        // recommendation, settings, and recent-transfer.
+        pageActions.push(fetchCashManagementBanner(false));
+        const autoTransferRules = state.autotransferRulesState;
+        if (autoTransferRules.fetchState !== 'Completed' &&
+            autoTransferRules.fetchState !== 'In-Progress') {
+            pageActions.push(fetchAutoTransferRules(false));
+        }
+    }
+    return concat(from(pageActions));
+}));

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

@@ -0,0 +1,27 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
+import { fetchCashManagementRecommendation, updateCashManagementRecommendation, updateCashManagementRecommendationFetchStatus, } from '../cashManagementOverviewReducer';
+/**
+ * Hits the cash agent's recommend endpoint and stores the full response on
+ * the banner state — `inflows[]`, `outflows[]`, and `money_movements[]` all
+ * live there, so consumers can read them directly without an entity-bucket
+ * lookup.
+ */
+const DEFAULT_RECOMMEND_HORIZON_DAYS = 30;
+export const fetchCashManagementRecommendationEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchCashManagementRecommendation.match), switchMap(() => {
+    const endpoint = `${zeniAPI.apiEndPoints.cashManagementAgentBaseUrl}/1.0/cash-agent/recommend?horizon_days=${DEFAULT_RECOMMEND_HORIZON_DAYS}`;
+    return zeniAPI.getJSON(endpoint).pipe(mergeMap((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            return of(updateCashManagementRecommendation({ data: response.data }));
+        }
+        return of(updateCashManagementRecommendationFetchStatus({
+            fetchState: 'Error',
+            error: response.status,
+        }));
+    }), catchError((error) => of(updateCashManagementRecommendationFetchStatus({
+        fetchState: 'Error',
+        error: createZeniAPIStatus('Unexpected Error', 'Fetch cash management recommendation REST API call errored out: ' +
+            (error?.message ?? String(error))),
+    }))));
+}));

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

@@ -0,0 +1,28 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
+import { fetchRecentTransfer, updateRecentTransfer, updateRecentTransferFetchStatus, } from '../cashManagementOverviewReducer';
+/**
+ * Hits `GET /cash-management/transfers` and stores the most recent actual
+ * cash-management transfer on `recentTransfer.data`. Used by the banner
+ * surface to render the "transfer scheduled / in-progress / complete"
+ * variant for existing users who have a settings id. The API returns the
+ * single most-relevant transfer under `transfer`; that field is optional
+ * (fresh users with no transfer history get `undefined`).
+ */
+export const fetchRecentTransferEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchRecentTransfer.match), switchMap(() => {
+    const endpoint = `${zeniAPI.apiEndPoints.cashManagementAgentBaseUrl}/1.0/cash-management/transfers/latest`;
+    return zeniAPI.getJSON(endpoint).pipe(mergeMap((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            return of(updateRecentTransfer({ data: response.data.transfer }));
+        }
+        return of(updateRecentTransferFetchStatus({
+            fetchState: 'Error',
+            error: response.status,
+        }));
+    }), catchError((error) => of(updateRecentTransferFetchStatus({
+        fetchState: 'Error',
+        error: createZeniAPIStatus('Unexpected Error', 'Fetch recent cash-management transfer REST API call errored out: ' +
+            (error?.message ?? String(error))),
+    }))));
+}));

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyDetail/cardPolicyDetailReducer.js

@@ -0,0 +1,52 @@
+import { createSlice } from '@reduxjs/toolkit';
+export const initialState = {
+    detailTemplateId: undefined,
+    detailFetchState: { fetchState: 'Not-Started', error: undefined },
+    updateFetchState: { fetchState: 'Not-Started', error: undefined },
+    formDraft: undefined,
+};
+const cardPolicyDetail = createSlice({
+    name: 'cardPolicyDetail',
+    initialState,
+    reducers: {
+        fetchCardPolicyDetail: {
+            reducer(draft, action) {
+                draft.detailTemplateId = action.payload;
+                draft.detailFetchState.fetchState = 'In-Progress';
+                draft.detailFetchState.error = undefined;
+                // Prevent a stale draft from a previous template leaking into the new edit session.
+                draft.formDraft = undefined;
+            },
+            prepare(templateId) {
+                return { payload: templateId };
+            },
+        },
+        updateCardPolicyDetailFetchStatus(draft, action) {
+            draft.detailFetchState.fetchState = action.payload.fetchState;
+            draft.detailFetchState.error = action.payload.error;
+        },
+        updateCardPolicyFormDraft(draft, action) {
+            draft.formDraft = action.payload;
+        },
+        updateCardPolicy: {
+            reducer(draft, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            _action) {
+                draft.updateFetchState.fetchState = 'In-Progress';
+                draft.updateFetchState.error = undefined;
+            },
+            prepare(templateId) {
+                return { payload: templateId };
+            },
+        },
+        updateCardPolicyFetchStatus(draft, action) {
+            draft.updateFetchState.fetchState = action.payload.fetchState;
+            draft.updateFetchState.error = action.payload.error;
+        },
+        clearCardPolicyDetail(draft) {
+            Object.assign(draft, initialState);
+        },
+    },
+});
+export const { fetchCardPolicyDetail, updateCardPolicyDetailFetchStatus, updateCardPolicyFormDraft, updateCardPolicy, updateCardPolicyFetchStatus, clearCardPolicyDetail, } = cardPolicyDetail.actions;
+export default cardPolicyDetail.reducer;

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyDetail/cardPolicyDetailSelector.js

@@ -0,0 +1,22 @@
+import { getCardPolicyTemplateById } from '../../../../../entity/cardPolicy/cardPolicySelector';
+export function getCardPolicyDetailView(state) {
+    const { cardPolicyDetailState, cardPolicyState } = state;
+    return {
+        templateId: cardPolicyDetailState.detailTemplateId,
+        template: cardPolicyDetailState.detailTemplateId != null
+            ? getCardPolicyTemplateById(cardPolicyState, cardPolicyDetailState.detailTemplateId)
+            : undefined,
+        formDraft: cardPolicyDetailState.formDraft,
+        detailFetchState: cardPolicyDetailState.detailFetchState,
+        updateFetchState: cardPolicyDetailState.updateFetchState,
+    };
+}
+export function getCardPolicyFormDraft(state) {
+    return state.cardPolicyDetailState.formDraft;
+}
+export function getCardPolicyDetailFetchState(state) {
+    return state.cardPolicyDetailState.detailFetchState;
+}
+export function getUpdateCardPolicyFetchState(state) {
+    return state.cardPolicyDetailState.updateFetchState;
+}

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyDetail/cardPolicyDetailState.js

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

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyDetail/fetchCardPolicyDetailEpic.js

@@ -0,0 +1,36 @@
+import { from, of } from 'rxjs';
+import { catchError, exhaustMap, filter, mergeMap } from 'rxjs/operators';
+import { toCardPolicyEditFormDraft, toCardPolicyTemplate, } from '../../../../../entity/cardPolicy/cardPolicyPayload';
+import { updateCreatedCardPolicyTemplate } from '../../../../../entity/cardPolicy/cardPolicyReducer';
+import { createZeniAPIStatus, isSuccessStatus, } from '../../../../../responsePayload';
+import { fetchCardPolicyDetail, updateCardPolicyDetailFetchStatus, updateCardPolicyFormDraft, } from './cardPolicyDetailReducer';
+export const fetchCardPolicyDetailEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchCardPolicyDetail.match), 
+// `exhaustMap` drops React 18 StrictMode's duplicate mount dispatch instead of
+// emitting a second `/policy-templates/{id}` call.
+exhaustMap((action) => {
+    const templateId = action.payload;
+    return zeniAPI
+        .getJSON(`${zeniAPI.apiEndPoints.cardMicroServiceBaseUrl}/1.0/policy-templates/${templateId}`)
+        .pipe(mergeMap((response) => {
+        if (isSuccessStatus(response) && response.data != null) {
+            const { template } = response.data;
+            const formDraft = toCardPolicyEditFormDraft(toCardPolicyTemplate(template));
+            const actions = [
+                updateCreatedCardPolicyTemplate(template),
+                updateCardPolicyFormDraft(formDraft),
+                updateCardPolicyDetailFetchStatus({ fetchState: 'Completed' }),
+            ];
+            return from(actions);
+        }
+        else {
+            return of(updateCardPolicyDetailFetchStatus({
+                fetchState: 'Error',
+                error: response.status,
+            }));
+        }
+    }), catchError((error) => of(updateCardPolicyDetailFetchStatus({
+        fetchState: 'Error',
+        error: createZeniAPIStatus('Unexpected Error', 'Fetch card-policy detail REST API call errored out' +
+            JSON.stringify(error)),
+    }))));
+}));

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyDetail/updateCardPolicyEpic.js

@@ -0,0 +1,39 @@
+import { from, of } from 'rxjs';
+import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { toUpdateCardPolicyTemplateRequestBody, } from '../../../../../entity/cardPolicy/cardPolicyPayload';
+import { updateCreatedCardPolicyTemplate } from '../../../../../entity/cardPolicy/cardPolicyReducer';
+import { createZeniAPIStatus, isSuccessStatus } from '../../../../../responsePayload';
+import { updateCardPolicy, updateCardPolicyFetchStatus, } from './cardPolicyDetailReducer';
+export const updateCardPolicyEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(updateCardPolicy.match), mergeMap((action) => {
+    const templateId = action.payload;
+    const formDraft = state$.value.cardPolicyDetailState.formDraft;
+    if (formDraft == null) {
+        return of(updateCardPolicyFetchStatus({
+            fetchState: 'Error',
+            error: createZeniAPIStatus('Missing form draft', `Cannot update card-policy ${templateId} — no formDraft is loaded.`),
+        }));
+    }
+    const body = toUpdateCardPolicyTemplateRequestBody(formDraft);
+    return zeniAPI
+        .putAndGetJSON(`${zeniAPI.apiEndPoints.cardMicroServiceBaseUrl}/1.0/policy-templates/${templateId}`, body)
+        .pipe(mergeMap((response) => {
+        if (isSuccessStatus(response) && response.data != null) {
+            const { template } = response.data;
+            const actions = [
+                updateCreatedCardPolicyTemplate(template),
+                updateCardPolicyFetchStatus({ fetchState: 'Completed' }),
+            ];
+            return from(actions);
+        }
+        else {
+            return of(updateCardPolicyFetchStatus({
+                fetchState: 'Error',
+                error: response.status,
+            }));
+        }
+    }), catchError((error) => of(updateCardPolicyFetchStatus({
+        fetchState: 'Error',
+        error: createZeniAPIStatus('Unexpected Error', 'Update card-policy REST API call errored out' +
+            JSON.stringify(error)),
+    }))));
+}));