@zeniai/client-epic-state 5.1.0-betaSS3 → 5.1.0

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)),
+    }))));
+}));

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyList/archiveCardPolicyEpic.js

@@ -0,0 +1,34 @@
+import { from, of } from 'rxjs';
+import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { removeCardPolicyTemplate } from '../../../../../entity/cardPolicy/cardPolicyReducer';
+import { createZeniAPIStatus, isSuccessStatus, } from '../../../../../responsePayload';
+import { archiveCardPolicy, updateArchiveCardPolicyFetchStatus, } from './cardPolicyListReducer';
+export const archiveCardPolicyEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(archiveCardPolicy.match), mergeMap((action) => {
+    const templateId = action.payload;
+    return zeniAPI
+        .deleteAndGetJSON(`${zeniAPI.apiEndPoints.cardMicroServiceBaseUrl}/1.0/policy-templates/${templateId}`)
+        .pipe(mergeMap((response) => {
+        if (isSuccessStatus(response)) {
+            const actions = [
+                removeCardPolicyTemplate(templateId),
+                updateArchiveCardPolicyFetchStatus({
+                    fetchState: 'Completed',
+                    templateId,
+                }),
+            ];
+            return from(actions);
+        }
+        else {
+            return of(updateArchiveCardPolicyFetchStatus({
+                fetchState: 'Error',
+                error: response.status,
+                templateId,
+            }));
+        }
+    }), catchError((error) => of(updateArchiveCardPolicyFetchStatus({
+        fetchState: 'Error',
+        error: createZeniAPIStatus('Unexpected Error', 'Archive card-policy REST API call errored out' +
+            JSON.stringify(error)),
+        templateId,
+    }))));
+}));

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyList/cardPolicyListReducer.js

@@ -0,0 +1,71 @@
+import { createSlice } from '@reduxjs/toolkit';
+export const initialState = {
+    templateIds: [],
+    fetchState: {
+        fetchState: 'Not-Started',
+        error: undefined,
+    },
+    archiveFetchState: {
+        fetchState: 'Not-Started',
+        error: undefined,
+    },
+    archiveTargetTemplateId: undefined,
+};
+const cardPolicyList = createSlice({
+    name: 'cardPolicyList',
+    initialState,
+    reducers: {
+        fetchCardPolicyList(draft) {
+            draft.fetchState.fetchState = 'In-Progress';
+            draft.fetchState.error = undefined;
+        },
+        updateCardPolicyListFetchStatus(draft, action) {
+            draft.fetchState.fetchState = action.payload.fetchState;
+            draft.fetchState.error = action.payload.error;
+            if (action.payload.templateIds != null) {
+                draft.templateIds = action.payload.templateIds;
+            }
+        },
+        // Lets the create epic prepend new ids onto the list in-place after a
+        // successful POST so the new rows render at the top without a wipe-
+        // and-refetch (which would otherwise flash the page skeleton).
+        // Newest-first: last id in the payload lands at index 0.
+        prependCardPolicyTemplateIds(draft, action) {
+            const existing = new Set(draft.templateIds);
+            for (const id of action.payload) {
+                if (!existing.has(id)) {
+                    draft.templateIds.unshift(id);
+                    existing.add(id);
+                }
+            }
+        },
+        archiveCardPolicy: {
+            reducer(draft, action) {
+                draft.archiveFetchState.fetchState = 'In-Progress';
+                draft.archiveFetchState.error = undefined;
+                draft.archiveTargetTemplateId = action.payload;
+            },
+            prepare(templateId) {
+                return { payload: templateId };
+            },
+        },
+        updateArchiveCardPolicyFetchStatus(draft, action) {
+            draft.archiveFetchState.fetchState = action.payload.fetchState;
+            draft.archiveFetchState.error = action.payload.error;
+            if (action.payload.fetchState === 'Completed') {
+                if (action.payload.templateId != null) {
+                    draft.templateIds = draft.templateIds.filter((id) => id !== action.payload.templateId);
+                }
+                draft.archiveTargetTemplateId = undefined;
+            }
+            else if (action.payload.fetchState === 'Error') {
+                draft.archiveTargetTemplateId = undefined;
+            }
+        },
+        clearCardPolicyList(draft) {
+            Object.assign(draft, initialState);
+        },
+    },
+});
+export const { fetchCardPolicyList, updateCardPolicyListFetchStatus, prependCardPolicyTemplateIds, archiveCardPolicy, updateArchiveCardPolicyFetchStatus, clearCardPolicyList, } = cardPolicyList.actions;
+export default cardPolicyList.reducer;

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyList/cardPolicyListSelector.js

@@ -0,0 +1,21 @@
+import { getCardPolicyStats, getCardPolicyTemplatesByIds, } from '../../../../../entity/cardPolicy/cardPolicySelector';
+export function getCardPolicyListView(state) {
+    const { cardPolicyListState, cardPolicyState } = state;
+    return {
+        templates: getCardPolicyTemplatesByIds(cardPolicyState, cardPolicyListState.templateIds),
+        templateIds: cardPolicyListState.templateIds,
+        fetchState: cardPolicyListState.fetchState,
+        archiveFetchState: cardPolicyListState.archiveFetchState,
+        archiveTargetTemplateId: cardPolicyListState.archiveTargetTemplateId,
+        stats: getCardPolicyStats(cardPolicyState),
+    };
+}
+export function getCardPolicyListFetchState(state) {
+    return state.cardPolicyListState.fetchState;
+}
+export function getArchiveCardPolicyFetchState(state) {
+    return state.cardPolicyListState.archiveFetchState;
+}
+export function getCardPolicyTemplateIds(state) {
+    return state.cardPolicyListState.templateIds;
+}

package/lib/esm/view/spendManagement/chargeCards/cardPolicy/cardPolicyList/cardPolicyListState.js

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