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

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

@@ -87,6 +87,31 @@ export const getChargeCardListView = (state, includeCreditAccountDebitSummaryAnd
         hasDebitCard,
     };
 };
+/**
+ * Returns every enriched `ChargeCardWithUser` for the tenant, without
+ * applying the cards-list screen's `searchText` filter or its column
+ * `sortKey/sortOrder`. Used by surfaces that need the raw card universe
+ * decoupled from whatever the user has typed/sorted on the cards list
+ * (e.g. the Card Policy "Apply to Cards" picker, which owns its own
+ * search + sort UI). The list-screen's filter/sort state is intentionally
+ * left untouched so revisits to the cards list still restore the user's
+ * search.
+ */
+export const getAllChargeCardsWithUser = (state) => {
+    const { chargeCardListState, chargeCardState, chargeCardConfigState } = state;
+    const cards = getChargeCardsByIds(chargeCardState, chargeCardListState.cardIds);
+    const chargeCardsWithUser = getChargeCardsWithUser(cards, state);
+    const fetchState = reduceFetchState([
+        chargeCardListState,
+        chargeCardConfigState,
+    ]).fetchState;
+    return {
+        fetchState,
+        error: chargeCardListState.error,
+        cards: chargeCardsWithUser,
+        version: '1.0',
+    };
+};
 export const getMyPendingActivationChargeCardListView = (state) => {
     const { tenantState, chargeCardListState, chargeCardState } = state;
     const cards = getChargeCardsByIds(chargeCardState, chargeCardListState.cardIds);

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/aiCardCreationFormDraftTypes.js

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

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/applyAiCardCreationFormDraftUpdate.js

@@ -0,0 +1,34 @@
+import { deriveAiCardRowsFromTeams } from './deriveAiCardRowsFromTeams';
+// Re-derives step-2 `cardRows` only when step-1 team selection changed.
+// Step-2-only edits must skip the re-derive: `deriveAiCardRowsFromTeams` keys
+// off `cardRow.id`, and a dropdown swap has just mutated it — re-running would
+// revert the edit to the source team's id/label.
+export const applyAiCardCreationFormDraftUpdate = ({ next, prev, context, }) => {
+    if (context == null || context.mode === 'create') {
+        return next;
+    }
+    if (!haveCheckedTeamRowsChanged(prev?.teamRows, next.teamRows)) {
+        return next;
+    }
+    return {
+        teamRows: next.teamRows,
+        cardRows: deriveAiCardRowsFromTeams({
+            teamRows: next.teamRows,
+            prevCardRows: next.cardRows,
+            allUsers: context.allUsers,
+            suggestedOwnerUserIdByTeamId: context.suggestedOwnerUserIdByTeamId,
+        }),
+    };
+};
+const haveCheckedTeamRowsChanged = (prevTeamRows, nextTeamRows) => {
+    const prevCheckedIds = (prevTeamRows ?? [])
+        .filter((row) => row.isChecked)
+        .map((row) => row.id);
+    const nextCheckedIds = nextTeamRows
+        .filter((row) => row.isChecked)
+        .map((row) => row.id);
+    if (prevCheckedIds.length !== nextCheckedIds.length) {
+        return true;
+    }
+    return prevCheckedIds.some((id, idx) => id !== nextCheckedIds[idx]);
+};

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/buildAiCardCreationFormDraftSeed.js

@@ -0,0 +1,57 @@
+import { deriveAiCardRowsFromTeams } from './deriveAiCardRowsFromTeams';
+// Branches on `initialData.mode`:
+//  - review: step-1 teams start checked; step-2 `cardRows` pre-derived so the
+//    happy path (no toggle) lands on a populated table.
+//  - create: seed `cardRows` from AI's suggested cards; `teamRows` stays empty.
+export const buildAiCardCreationFormDraftSeed = ({ initialData, allUsers, }) => {
+    const context = {
+        allUsers,
+        mode: initialData.mode,
+        suggestedOwnerUserIdByTeamId: initialData.suggestedOwnerUserIdByTeamId,
+    };
+    if (initialData.mode === 'create') {
+        return {
+            context,
+            draft: {
+                teamRows: [],
+                cardRows: initialData.cardRows.map((seed) => buildCardRowFromSeed(seed, allUsers)),
+            },
+        };
+    }
+    const teamRows = initialData.teamRows.map((row) => ({
+        cardKind: row.cardKind,
+        id: row.id,
+        isChecked: true,
+        label: row.label,
+        value: row.avgMonthlySpend,
+        rightLabel: row.recommendedLimit,
+        rightSubLabel: row.recommendedLimitCadence,
+    }));
+    return {
+        context,
+        draft: {
+            teamRows,
+            cardRows: deriveAiCardRowsFromTeams({
+                teamRows,
+                prevCardRows: [],
+                allUsers,
+                suggestedOwnerUserIdByTeamId: initialData.suggestedOwnerUserIdByTeamId,
+            }),
+        },
+    };
+};
+const buildCardRowFromSeed = (seed, allUsers) => {
+    const selectedUser = seed.suggestedOwnerUserId != null
+        ? allUsers.find((user) => user.userId === seed.suggestedOwnerUserId)
+        : undefined;
+    return {
+        cardKind: seed.cardKind,
+        id: seed.id,
+        label: seed.label,
+        owner: {
+            allUsers,
+            selectedUser,
+        },
+        recommendedLimit: seed.recommendedLimit,
+    };
+};

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/deriveAiCardRowsFromTeams.js

@@ -0,0 +1,35 @@
+// One row per checked team in source order. Existing rows are preserved
+// verbatim so step-2 user edits survive upstream re-derives; new teams seed
+// owner from the suggestion map and `recommendedLimit` by parsing `rightLabel`.
+export const deriveAiCardRowsFromTeams = ({ teamRows, prevCardRows = [], allUsers, suggestedOwnerUserIdByTeamId, }) => {
+    const prevById = new Map(prevCardRows.map((row) => [row.id, row]));
+    const userById = new Map(allUsers.map((user) => [user.userId, user]));
+    return teamRows
+        .filter((row) => row.isChecked)
+        .map((teamRow) => {
+        const previous = prevById.get(teamRow.id);
+        if (previous != null) {
+            return previous;
+        }
+        const suggestedUserId = suggestedOwnerUserIdByTeamId[teamRow.id];
+        const selectedUser = suggestedUserId != null ? userById.get(suggestedUserId) : undefined;
+        return {
+            cardKind: teamRow.cardKind,
+            id: teamRow.id,
+            label: teamRow.label,
+            owner: {
+                allUsers,
+                selectedUser,
+            },
+            recommendedLimit: parseLimitToFloat(teamRow.rightLabel),
+        };
+    });
+};
+const parseLimitToFloat = (raw) => {
+    const cleaned = raw.replace(/[^0-9.-]/g, '');
+    if (cleaned.length === 0) {
+        return undefined;
+    }
+    const parsed = Number(cleaned);
+    return Number.isFinite(parsed) ? parsed : undefined;
+};

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/issueChargeCardEpic.js

@@ -7,7 +7,7 @@ import { updateAllUsers } from '../../../../entity/user/userReducer';
 import { updateUserRoles } from '../../../../entity/userRole/userRoleReducer';
 import { createZeniAPIStatus, isSuccessStatus, } from '../../../../responsePayload';
 import { updateChargeCardList } from '../chargeCardList/chargeCardListReducer';
-import { issueChargeCardSuccessOrFailure, issueChargeCards, updateChargeCardCount, updateDebitCardCount, updateLastSelfIssuedDebitCardId, } from './issueChargeCardReducer';
+import { issueChargeCardSuccessOrFailure, issueChargeCards, updateChargeCardCount, updateDebitCardCount, updateLastIssuedCardIds, updateLastSelfIssuedDebitCardId, } from './issueChargeCardReducer';
 export const issueChargeCardEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(issueChargeCards.match), switchMap(() => {
     const state = state$.value;
     const loggedInUserId = state$.value.tenantState.loggedInUser?.userId;
@@ -87,7 +87,7 @@ export const issueChargeCardEpic = (actions$, state$, zeniAPI) => actions$.pipe(
             actions.push(updateChargeCards(issuedCards), updateAllUsers({ users: response.data.users }), updateUserRoles(response.data.user_roles), updateChargeCardList({
                 chargeCardListPayload: response.data,
                 keepExistingListItems: true,
-            }), updateAddresses(response.data.addresses), updateChargeCardCount(response.data?.cards_count_by_user_id ?? []), updateDebitCardCount(response.data?.debit_cards_count_by_deposit_account_id ?? {}), issueChargeCardSuccessOrFailure({ fetchState: 'Completed' }));
+            }), updateAddresses(response.data.addresses), updateChargeCardCount(response.data?.cards_count_by_user_id ?? []), updateDebitCardCount(response.data?.debit_cards_count_by_deposit_account_id ?? {}), updateLastIssuedCardIds(issuedCards.map((card) => card.card_id)), issueChargeCardSuccessOrFailure({ fetchState: 'Completed' }));
             if (issuedCards.length === 1 &&
                 (issuedCards[0].card_type.code ===
                     'business_virtual_debit_card' ||

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/issueChargeCardReducer.js

@@ -1,4 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { applyAiCardCreationFormDraftUpdate } from './applyAiCardCreationFormDraftUpdate';
+import { buildAiCardCreationFormDraftSeed } from './buildAiCardCreationFormDraftSeed';
 export const initialState = {
     depositAccountIds: [],
     depositAccountsFetchState: { fetchState: 'Not-Started', error: undefined },
@@ -14,6 +16,7 @@ export const initialState = {
     },
     activeChargeCardCount: {},
     activeDebitCardCountByDepositAccountId: {},
+    lastIssuedCardIds: [],
 };
 const issueChargeCard = createSlice({
     name: 'issueChargeCard',
@@ -34,14 +37,19 @@ const issueChargeCard = createSlice({
             },
         },
         issueChargeCards: {
-            prepare() {
-                return { payload: {} };
+            prepare(payload) {
+                return { payload: payload ?? {} };
             },
-            reducer(draft) {
+            reducer(draft, action) {
                 draft.saveStatus.fetchState = 'In-Progress';
                 draft.saveStatus.error = undefined;
+                draft.lastIssueSourceChatSessionId = action.payload.sourceChatSessionId;
+                draft.lastIssuedCardIds = [];
             },
         },
+        updateLastIssuedCardIds(draft, action) {
+            draft.lastIssuedCardIds = action.payload;
+        },
         updateChargeCardsLocalStore(draft, action) {
             draft.localData = action.payload;
         },
@@ -49,6 +57,8 @@ const issueChargeCard = createSlice({
             draft.localData = [...initialState.localData];
             draft.saveStatus = initialState.saveStatus;
             draft.lastSelfIssuedDebitCardId = undefined;
+            draft.lastIssueSourceChatSessionId = undefined;
+            draft.lastIssuedCardIds = [];
         },
         updateLastSelfIssuedDebitCardId(draft, action) {
             draft.lastSelfIssuedDebitCardId = action.payload;
@@ -124,10 +134,38 @@ const issueChargeCard = createSlice({
             draft.depositAccountsFetchState.fetchState = action.payload.fetchState;
             draft.depositAccountsFetchState.error = action.payload.error;
         },
+        // Dispatched once when `CardsCreationInteractiveForm` mounts (or the AI
+        // payload arrives).
+        seedAiCardCreationFormDraft: {
+            reducer(draft, action) {
+                const { draft: nextDraft, context } = buildAiCardCreationFormDraftSeed({
+                    allUsers: action.payload.allUsers,
+                    initialData: action.payload.initialData,
+                });
+                draft.aiCardCreationFormDraft = nextDraft;
+                draft.aiCardCreationFormDraftContext = context;
+            },
+            prepare(allUsers, initialData) {
+                return { payload: { allUsers, initialData } };
+            },
+        },
+        // Derivation lives in `applyAiCardCreationFormDraftUpdate` so the
+        // Storybook owner harness shares the same rules.
+        updateAiCardCreationFormDraft(draft, action) {
+            draft.aiCardCreationFormDraft = applyAiCardCreationFormDraftUpdate({
+                prev: draft.aiCardCreationFormDraft,
+                next: action.payload,
+                context: draft.aiCardCreationFormDraftContext,
+            });
+        },
+        clearAiCardCreationFormDraft(draft) {
+            draft.aiCardCreationFormDraft = undefined;
+            draft.aiCardCreationFormDraftContext = undefined;
+        },
         clearIssueChargeCard(draft) {
             Object.assign(draft, initialState);
         },
     },
 });
-export const { issueChargeCards, updateChargeCardsLocalStore, updateLastSelfIssuedDebitCardId, issueChargeCardSuccessOrFailure, resetIssueChargeCardForm, updateCustomAddressId, updateChargeCardCount, updateDebitCardCount, fetchIssueCardPage, updateDepositAccountsInCards, fetchDepositAccountListForCards, updateDepositAccountListForCardsFetchStatus, clearIssueChargeCard, } = issueChargeCard.actions;
+export const { issueChargeCards, updateChargeCardsLocalStore, updateLastSelfIssuedDebitCardId, updateLastIssuedCardIds, issueChargeCardSuccessOrFailure, resetIssueChargeCardForm, updateCustomAddressId, updateChargeCardCount, updateDebitCardCount, fetchIssueCardPage, updateDepositAccountsInCards, fetchDepositAccountListForCards, updateDepositAccountListForCardsFetchStatus, seedAiCardCreationFormDraft, updateAiCardCreationFormDraft, clearAiCardCreationFormDraft, clearIssueChargeCard, } = issueChargeCard.actions;
 export default issueChargeCard.reducer;

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/issueChargeCardSelector.js

@@ -5,6 +5,7 @@ import { getDepositAccountLimitsForChargeCardByDepositAccountIds } from '../../.
 import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
 import { getNewAddress } from '../../../addressView/addressViewSelector';
 import { getUserList } from '../../../userListView/userListViewSelector';
+import { toIssueChargeCardLocalDataFromDraft } from './toIssueChargeCardLocalDataFromDraft';
 export const getIssueChargeCardView = (state, isCreditCardEnabled, isDebitCardEnabled) => {
     const { issueChargeCardState, userState, userRoleState, userListViewState, chargeCardConfigState, chargeCardListState, addressState, classState, depositAccountState, classListState, } = state;
     const userListSelectorView = getUserList(userState, userRoleState, userListViewState, 'cardHolderCandidate');
@@ -93,3 +94,37 @@ export const getIssueChargeCardView = (state, isCreditCardEnabled, isDebitCardEn
         lastSelfIssuedDebitCardId: issueChargeCardState.lastSelfIssuedDebitCardId,
     };
 };
+// AI CFO chat session that triggered the most recent issue; lets the cards
+// list screen attribute the pending placeholder + synthetic drawer bubble.
+export const getLastIssueChargeCardsSourceChatSessionId = (state) => {
+    return state.issueChargeCardState.lastIssueSourceChatSessionId;
+};
+// Cards created by the most recent successful issue; AI CFO drawer's "Created"
+// bubble maps back through these.
+export const getLastIssuedChargeCardIds = (state) => {
+    return state.issueChargeCardState.lastIssuedCardIds;
+};
+export const getIssueChargeCardsSaveStatus = (state) => {
+    return state.issueChargeCardState.saveStatus;
+};
+// Mirrors `localData.length` while in flight so the list can render N skeleton
+// rows at the top of the table.
+export const getInFlightIssueChargeCardsCount = (state) => {
+    if (state.issueChargeCardState.saveStatus.fetchState !== 'In-Progress') {
+        return 0;
+    }
+    return state.issueChargeCardState.localData.length;
+};
+// Hydrates `CardsCreationInteractiveForm`'s RHF; `undefined` outside the
+// seed/clear window.
+export const getAiCardCreationFormDraft = (state) => {
+    return state.issueChargeCardState.aiCardCreationFormDraft;
+};
+// Returns [] when the draft is absent so callers can short-circuit submission.
+export const selectIssueChargeCardLocalDataFromDraft = (state) => {
+    const draft = state.issueChargeCardState.aiCardCreationFormDraft;
+    if (draft == null) {
+        return [];
+    }
+    return toIssueChargeCardLocalDataFromDraft(draft);
+};

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/seedAiCardCreationFormDraftEpic.js

@@ -0,0 +1,62 @@
+import { EMPTY, concat, of } from 'rxjs';
+import { distinctUntilChanged, filter, map, mergeMap, take, } from 'rxjs/operators';
+import { upsertAnswerPayload, upsertOrAddQuestionAnswerPayload, } from '../../../../entity/aiCfo/aiCfoReducer';
+import { getQuestionAnswerByIdForChatSession } from '../../../../entity/aiCfo/aiCfoSelector';
+import { fetchUserListByType } from '../../../userListView/userListViewReducer';
+import { getUserList } from '../../../userListView/userListViewSelector';
+import { clearAiCardCreationFormDraft, issueChargeCardSuccessOrFailure, seedAiCardCreationFormDraft, } from './issueChargeCardReducer';
+const readAllUsersAsUserArray = (state) => getUserList(state.userState, state.userRoleState, state.userListViewState, 'cardHolderCandidate')
+    .users.map((person) => person.user)
+    .filter((user) => user != null);
+const readCardsCreationPayload = (state, chatSessionId, questionAnswerId) => {
+    const qa = getQuestionAnswerByIdForChatSession(state.aiCfoState, chatSessionId, questionAnswerId);
+    const visualization = qa?.responses.answer?.content.visualization;
+    if (visualization?.type !== 'interactive_form') {
+        return undefined;
+    }
+    const data = visualization.data;
+    if (!('formType' in data) || data.formType !== 'cards_creation') {
+        return undefined;
+    }
+    return data.payload;
+};
+// Pusher may target "latest QA"; REST always carries the id. Either way,
+// resolve to the QA the reducer just wrote so we can read it off state.
+const resolveQuestionAnswerId = (state, action) => {
+    if (action.payload.questionAnswerId != null) {
+        return action.payload.questionAnswerId;
+    }
+    const session = state.aiCfoState.aiCfoByChatSessionId[action.payload.chatSessionId];
+    return session?.questionAnswers.slice(-1)[0]?.questionAnswerId;
+};
+const isSeedTrigger = (action) => upsertAnswerPayload.match(action) ||
+    upsertOrAddQuestionAnswerPayload.match(action);
+export const seedAiCardCreationFormDraftEpic = (actions$, state$) => actions$.pipe(mergeMap((action) => {
+    if (issueChargeCardSuccessOrFailure.match(action) &&
+        action.payload.fetchState === 'Completed') {
+        return of(clearAiCardCreationFormDraft());
+    }
+    if (!isSeedTrigger(action)) {
+        return EMPTY;
+    }
+    const state = state$.value;
+    const questionAnswerId = resolveQuestionAnswerId(state, action);
+    if (questionAnswerId == null) {
+        return EMPTY;
+    }
+    const payload = readCardsCreationPayload(state, action.payload.chatSessionId, questionAnswerId);
+    if (payload == null) {
+        return EMPTY;
+    }
+    const allUsersNow = readAllUsersAsUserArray(state);
+    if (allUsersNow.length > 0) {
+        return of(seedAiCardCreationFormDraft(allUsersNow, payload));
+    }
+    const seedWhenUsersLoaded$ = state$.pipe(map(readAllUsersAsUserArray), distinctUntilChanged((prev, next) => prev.length === next.length &&
+        prev.every((user, idx) => user === next[idx])), filter((users) => users.length > 0), take(1), map((users) => seedAiCardCreationFormDraft(users, payload)));
+    const userListFetchState = state.userListViewState.userListByType.cardHolderCandidate.fetchState;
+    if (userListFetchState === 'In-Progress') {
+        return seedWhenUsersLoaded$;
+    }
+    return concat(of(fetchUserListByType('cardHolderCandidate', false)), seedWhenUsersLoaded$);
+}));

package/lib/esm/view/spendManagement/chargeCards/issueChargeCard/toIssueChargeCardLocalDataFromDraft.js

@@ -0,0 +1,44 @@
+// V1: AI CFO only issues monthly business_virtual_credit_cards. Form has no
+// frequency field; the unused physicalCard/debitCard slots are filled with
+// empty defaults the epic ignores.
+const DEFAULT_FREQUENCY = 'monthly';
+const DEFAULT_CURRENCY_CODE = 'USD';
+const DEFAULT_CURRENCY_SYMBOL = '$';
+const mapCardRow = (row) => {
+    const ownerUserId = row.owner.selectedUser?.userId;
+    return {
+        lineId: row.id,
+        chargeCardType: 'credit_card',
+        creditCard: {
+            cardType: 'business_virtual_credit_card',
+            virtualCard: {
+                cardName: row.label,
+                frequency: DEFAULT_FREQUENCY,
+                userIds: ownerUserId != null ? [ownerUserId] : [],
+                amount: {
+                    amount: row.recommendedLimit ?? 0,
+                    currencyCode: DEFAULT_CURRENCY_CODE,
+                    currencySymbol: DEFAULT_CURRENCY_SYMBOL,
+                },
+            },
+            physicalCard: {
+                cardName: '',
+                frequency: DEFAULT_FREQUENCY,
+            },
+        },
+        debitCard: {
+            cardType: 'business_virtual_debit_card',
+            virtualCard: {
+                cardName: '',
+                frequency: DEFAULT_FREQUENCY,
+                userIds: [],
+            },
+            physicalCard: {
+                cardName: '',
+                frequency: DEFAULT_FREQUENCY,
+            },
+        },
+    };
+};
+// Returns [] when `cardRows` is empty so callers can short-circuit submission.
+export const toIssueChargeCardLocalDataFromDraft = (draft) => draft.cardRows.map(mapCardRow);

package/lib/esm/view/spendManagement/reimbursement/editRemiView/epics/fetchEditRemiDetailPageEpic.js

@@ -63,7 +63,11 @@ export const fetchEditRemiDetailPageEpic = (actions$, state$) => actions$.pipe(f
             const approvalRules = state.remiSetupApproverViewState;
             if (approvalRules.fetchState !== 'Completed' &&
                 approvalRules.fetchState !== 'In-Progress') {
-                remiDetailActions.push(fetchRemiSetupApproverView(true));
+                // Side-fetch from the edit-reim page bootstrap. The
+                // triggering action doesn't carry the V3 flag, so we
+                // explicitly target v1; v3 tenants re-fetch via their
+                // own screen connector.
+                remiDetailActions.push(fetchRemiSetupApproverView(true, false, false, false));
             }
         }
     }

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/epic/deleteRemiApprovalRuleEpic.js

@@ -6,9 +6,17 @@ import { updateAllUsers } from '../../../../../entity/user/userReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
 import { deleteRemiApprovalRule, deleteRemiApprovalRuleFailure, deleteRemiApprovalRuleSuccess, } from '../remiSetupApproverViewReducer';
 export const deleteRemiApprovalRuleEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(deleteRemiApprovalRule.match), switchMap((action) => {
-    const { approvalRuleId } = action.payload;
+    const { approvalRuleId, useV3 } = action.payload;
+    // Approval Rules 3.0 — flag-gated endpoint selection.
+    // Explicit `=== true` keeps `strict-boolean-expressions` happy
+    // when RTK's payload type widens to `any` in some configs.
+    const endpoint = useV3 === true
+        ? `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules-v2`
+        : `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules`;
     return zeniAPI
-        .deleteAndGetJSON(`${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules`, { approval_rule_id: approvalRuleId })
+        .deleteAndGetJSON(endpoint, {
+        approval_rule_id: approvalRuleId,
+    })
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
             const approvalRuleIds = response.data.approval_rules.map((approvalRule) => approvalRule.approval_rule_id);

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/epic/fetchRemiSetupApproverViewEpic.js

@@ -6,7 +6,7 @@ import { updateAllUsers } from '../../../../../entity/user/userReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
 import { fetchRemiSetupApproverView, fetchRemiSetupApproverViewFailure, fetchRemiSetupApproverViewSuccess, } from '../remiSetupApproverViewReducer';
 export const fetchRemiSetupApproverViewEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchRemiSetupApproverView.match), switchMap((action) => {
-    const { cacheOverride, resolveAttributeToUser, includeImplicitActors } = action.payload;
+    const { cacheOverride, resolveAttributeToUser, includeImplicitActors, useV3, } = action.payload;
     const { remiSetupApproverViewState, approvalRuleState } = state$.value;
     const approvalRules = getApprovalRulesByIds(approvalRuleState, remiSetupApproverViewState.approvalRuleIds);
     if (cacheOverride === true ||
@@ -14,8 +14,14 @@ export const fetchRemiSetupApproverViewEpic = (actions$, state$, zeniAPI) => act
             remiSetupApproverViewState.approvalRuleIds.length ||
         (remiSetupApproverViewState.hasValidState() === false &&
             remiSetupApproverViewState.fetchState !== 'In-Progress')) {
+        // Approval Rules 3.0 — flag-gated endpoint selection.
+        // Explicit `=== true` keeps `strict-boolean-expressions` happy
+        // when RTK's payload type widens to `any` in some configs.
+        const basePath = useV3 === true
+            ? `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules-v2`
+            : `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules`;
         return zeniAPI
-            .getJSON(`${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules?query={"is_include_implicit_actors": ${includeImplicitActors}, "is_resolve_attribute_to_user":${resolveAttributeToUser}}`)
+            .getJSON(`${basePath}?query={"is_include_implicit_actors": ${includeImplicitActors}, "is_resolve_attribute_to_user":${resolveAttributeToUser}}`)
             .pipe(mergeMap((response) => {
             if (isSuccessResponse(response) && response.data != null) {
                 const approvalRuleIds = response.data.approval_rules.map((approvalRule) => approvalRule.approval_rule_id);

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/epic/initializeRemiSetupApproverViewUpdateDataEpic.js

@@ -1,6 +1,6 @@
 import { from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
-import { getApprovalRuleById } from '../../../../../entity/approvalRule/approvalRuleSelector';
+import { getAmountCriteria, getApprovalRuleById, getDepartmentCriteria, getVendorCriteria, } from '../../../../../entity/approvalRule/approvalRuleSelector';
 import { clearRemiSetupApproverViewUpdateData, initializeRemiSetupApproverViewUpdateData, saveRemiSetupApproverViewUpdateData, } from '../remiSetupApproverViewReducer';
 export const initializeRemiSetupApproverViewUpdateDataEpic = (actions$, state$) => actions$.pipe(filter(initializeRemiSetupApproverViewUpdateData.match), mergeMap((action) => {
     const { approvalRuleId } = action.payload;
@@ -8,16 +8,20 @@ export const initializeRemiSetupApproverViewUpdateDataEpic = (actions$, state$)
     if (approvalRuleId != null) {
         const approvalRule = getApprovalRuleById(state$.value.approvalRuleState, approvalRuleId);
         if (approvalRule != null) {
-            const criteria = approvalRule.criteria[0];
-            const range = criteria?.range;
             const remiSetupApproverViewUpdateData = {
                 approvalRuleId,
                 steps: approvalRule.steps,
                 criteria: {
-                    rangeType: criteria?.rangeType,
-                    rangeEntity: criteria?.rangeEntity,
-                    range,
+                    amount: getAmountCriteria(approvalRule.criteria),
+                    vendor: getVendorCriteria(approvalRule.criteria),
+                    department: getDepartmentCriteria(approvalRule.criteria),
                 },
+                // Approval Rules 3.0 — seed rule-level fields so the form can
+                // round-trip them on edit. Each may be undefined on legacy rules.
+                name: approvalRule.name,
+                description: approvalRule.description,
+                separationOfDuties: approvalRule.separationOfDuties,
+                isFallback: approvalRule.isFallback,
             };
             fetchActions.push(clearRemiSetupApproverViewUpdateData(), saveRemiSetupApproverViewUpdateData(remiSetupApproverViewUpdateData));
         }
@@ -25,7 +29,7 @@ export const initializeRemiSetupApproverViewUpdateDataEpic = (actions$, state$)
     else {
         const remiSetupApproverViewCreateData = {
             steps: [],
-            criteria: undefined,
+            criteria: {},
         };
         fetchActions.push(clearRemiSetupApproverViewUpdateData(), saveRemiSetupApproverViewUpdateData(remiSetupApproverViewCreateData));
     }

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/epic/reorderRemiApprovalRulesEpic.js

@@ -0,0 +1,61 @@
+import { from } from 'rxjs';
+import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { updateApprovalRules } from '../../../../../entity/approvalRule/approvalRuleReducer';
+import { openSnackbar } from '../../../../../entity/snackbar/snackbarReducer';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
+import { fetchRemiSetupApproverView, reorderRemiApprovalRules, reorderRemiApprovalRulesFailure, reorderRemiApprovalRulesSuccess, } from '../remiSetupApproverViewReducer';
+export const reorderRemiApprovalRulesEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(reorderRemiApprovalRules.match), switchMap((action) => {
+    const { approvalRuleIds, useV3 } = action.payload;
+    const endpoint = `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules-v2/reorder`;
+    return zeniAPI
+        .putAndGetJSON(endpoint, {
+        rule_ids: approvalRuleIds,
+    })
+        .pipe(mergeMap((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            const serverOrderedIds = response.data.approval_rules.map((approvalRule) => approvalRule.approval_rule_id);
+            const actions = [
+                updateApprovalRules(response.data.approval_rules),
+                reorderRemiApprovalRulesSuccess(serverOrderedIds),
+                openSnackbar({
+                    messageSection: `reimbursement_approval_reorder`,
+                    messageText: 'success',
+                    type: 'success',
+                }),
+            ];
+            return from(actions);
+        }
+        else {
+            return from([
+                reorderRemiApprovalRulesFailure(response.status),
+                openSnackbar({
+                    messageSection: `reimbursement_approval_reorder`,
+                    messageText: 'failed',
+                    type: 'error',
+                }),
+                // Failure-recovery refetch — match the screen connector
+                // convention '(cacheOverride, resolveAttributeToUser,
+                // includeImplicitActors, useV3)' rather than copying BillPay's
+                // 3-arg shape. With the previous useV3-as-default-false the
+                // V3 flag was being smuggled in as 'includeImplicitActors',
+                // which silently broke V3 recovery refetches.
+                fetchRemiSetupApproverView(true, false, false, useV3),
+            ]);
+        }
+    }), catchError((error) => from([
+        reorderRemiApprovalRulesFailure(createZeniAPIStatus('Unexpected Error', 'Reorder Reimbursement Approval Rules errored out' +
+            JSON.stringify(error))),
+        openSnackbar({
+            messageSection: `reimbursement_approval_reorder`,
+            messageText: 'failed',
+            type: 'error',
+        }),
+        // Failure-recovery refetch — match the screen connector
+        // convention '(cacheOverride, resolveAttributeToUser,
+        // includeImplicitActors, useV3)' rather than copying BillPay's
+        // 3-arg shape. With the previous useV3-as-default-false the
+        // V3 flag was being smuggled in as 'includeImplicitActors',
+        // which silently broke V3 recovery refetches.
+        fetchRemiSetupApproverView(true, false, false, useV3),
+    ])));
+}));

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/epic/saveRemiSetupApproverViewUpdatesEpic.js

@@ -4,16 +4,25 @@ import { updateApprovalRules } from '../../../../../entity/approvalRule/approval
 import { openSnackbar } from '../../../../../entity/snackbar/snackbarReducer';
 import { updateAllUsers } from '../../../../../entity/user/userReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../../responsePayload';
-import { toApprovalChangableInfoPayload } from '../../../billPay/billPaySetupApproverView/types/commonPayload';
+import { toApprovalChangableInfoPayload, toApprovalChangableInfoPayloadV1, } from '../../../billPay/billPaySetupApproverView/types/commonPayload';
 import { saveRemiSetupApproverViewUpdates, saveRemiSetupApproverViewUpdatesFailure, saveRemiSetupApproverViewUpdatesSuccess, } from '../remiSetupApproverViewReducer';
-export const saveRemiSetupApproverViewUpdatesEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(saveRemiSetupApproverViewUpdates.match), switchMap(() => {
+export const saveRemiSetupApproverViewUpdatesEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(saveRemiSetupApproverViewUpdates.match), switchMap((action) => {
     const { remiSetupApproverViewState } = state$.value;
     const remiSetupApproverViewUpdateData = remiSetupApproverViewState.remiSetupApproverViewUpdateData;
     if (remiSetupApproverViewUpdateData != null &&
         remiSetupApproverViewUpdateData.data != null) {
-        const payload = toApprovalChangableInfoPayload(remiSetupApproverViewUpdateData.data);
+        // Approval Rules 3.0 — gate URL + write-side payload mapper on
+        // the `approval_rule_v3_config` dynamic config. `useV3` arrives
+        // on the action payload from the screen connector.
+        const { useV3 } = action.payload;
+        const payload = useV3
+            ? toApprovalChangableInfoPayload(remiSetupApproverViewUpdateData.data)
+            : toApprovalChangableInfoPayloadV1(remiSetupApproverViewUpdateData.data);
+        const endpoint = useV3
+            ? `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules-v2`
+            : `${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules`;
         return zeniAPI
-            .postAndGetJSON(`${zeniAPI.apiEndPoints.approvalMicroServiceBaseUrl}/1.0/reimbursements/approval-rules`, payload)
+            .postAndGetJSON(endpoint, payload)
             .pipe(mergeMap((response) => {
             if (isSuccessResponse(response) && response.data != null) {
                 const approvalRuleIds = response.data.approval_rules.map((approvalRule) => approvalRule.approval_rule_id);