@zeniai/client-epic-state 5.0.85-beta0ND → 5.0.85-betaAR1

package/lib/esm/view/spendManagement/billPay/billPaySetupApproverView/types/commonPayload.js

@@ -1,20 +1,48 @@
 export const toApprovalChangableInfoPayload = (approverViewUpdateData) => {
-    let criteriaPayload = [];
+    // Form-side criteria is a structured object with optional slots for
+    // amount / vendor / department; flatten it into the wire format's
+    // `conditions[]` array.
+    let criteriaPayload;
     if (approverViewUpdateData.criteria != null) {
-        const criteria = approverViewUpdateData.criteria;
-        const { rangeType, rangeEntity, range } = criteria;
-        const { min, max } = range;
-        const { currencyCode, currencySymbol } = min;
-        criteriaPayload = [
-            {
-                type: rangeType,
-                range_entity: rangeEntity,
-                min: min.amount,
-                max: max?.amount ?? null,
-                currency_code: currencyCode,
-                currency_symbol: currencySymbol,
-            },
-        ];
+        const { amount, vendor, department } = approverViewUpdateData.criteria;
+        const conditions = [];
+        if (amount?.min != null) {
+            conditions.push({
+                field: 'amount',
+                type: 'gte',
+                value: amount.min.amount,
+            });
+        }
+        if (amount?.max != null) {
+            conditions.push({
+                field: 'amount',
+                type: 'lte',
+                value: amount.max.amount,
+            });
+        }
+        if (vendor != null && vendor.vendorIds.length > 0) {
+            conditions.push({
+                field: 'vendor_id',
+                type: vendor.operator === 'is_not' ? 'not_in' : 'in',
+                value: vendor.vendorIds,
+            });
+        }
+        if (department != null && department.departmentIds.length > 0) {
+            conditions.push({
+                field: 'department_id',
+                type: department.operator === 'is_not' ? 'not_in' : 'in',
+                value: department.departmentIds,
+            });
+        }
+        if (conditions.length > 0) {
+            const currency = amount?.min ?? amount?.max ?? null;
+            criteriaPayload = {
+                conditions,
+                criteria_operator: 'and',
+                currency_code: currency?.currencyCode ?? 'USD',
+                currency_symbol: currency?.currencySymbol ?? '$',
+            };
+        }
     }
     const steps = approverViewUpdateData.steps.map((step) => {
         return {
@@ -35,10 +63,88 @@ export const toApprovalChangableInfoPayload = (approverViewUpdateData) => {
     });
     const isUpdate = approverViewUpdateData.approvalRuleId != null;
     const payload = {
-        criteria: criteriaPayload,
         steps,
         is_applicable_on_pending_approval_entity: approverViewUpdateData.isApplicableOnPendingApprovalEntity ?? true,
     };
+    if (criteriaPayload != null) {
+        payload.criteria = criteriaPayload;
+    }
+    // Approval Rules 3.0 — surface rule-level fields when the form set them.
+    // Send only what the user actually entered: an undefined value means
+    // "no opinion" and stays off the wire.
+    if (approverViewUpdateData.name != null) {
+        payload.name = approverViewUpdateData.name;
+    }
+    if (approverViewUpdateData.description != null) {
+        payload.description = approverViewUpdateData.description;
+    }
+    if (approverViewUpdateData.separationOfDuties != null) {
+        payload.is_separation_of_duty_enabled =
+            approverViewUpdateData.separationOfDuties;
+    }
+    if (approverViewUpdateData.isFallback != null) {
+        payload.is_fallback = approverViewUpdateData.isFallback;
+    }
+    if (isUpdate) {
+        payload.approval_rule_id = approverViewUpdateData.approvalRuleId;
+    }
+    return payload;
+};
+/**
+ * V1 wire mapper — used when `approval_rule_v3_config` resolves to OFF
+ * for the current tenant. Translates the form-side amount criteria into
+ * the legacy `{rangeType, rangeEntity, range: {min, max}}` shape. The
+ * V1 backend does not understand vendor / department criteria or the
+ * rule-level 3.0 fields, so those are dropped on the wire.
+ *
+ * The form-side amount slot is always read as a `range`-style criteria
+ * here: V1 schemas only supported ranges, so an absent `min` or `max`
+ * falls back to `0` / `Number.MAX_SAFE_INTEGER`.
+ */
+export const toApprovalChangableInfoPayloadV1 = (approverViewUpdateData) => {
+    const amount = approverViewUpdateData.criteria?.amount;
+    const minAmount = amount?.min;
+    const maxAmount = amount?.max;
+    const currencyCode = minAmount?.currencyCode ?? maxAmount?.currencyCode ?? 'USD';
+    const currencySymbol = minAmount?.currencySymbol ?? maxAmount?.currencySymbol ?? '$';
+    const steps = approverViewUpdateData.steps.map((step) => {
+        return {
+            action: step.action,
+            operator: step.operator,
+            actors: step.actors
+                .filter((actor) => actor.subType !== 'admin')
+                .map((actor) => {
+                return {
+                    type: actor.type,
+                    id: actor.userId ?? null,
+                    sub_type: actor.subType ?? null,
+                    id_type: actor.idType ?? null,
+                    is_implicit_actor: actor.isImplicitActor ?? false,
+                };
+            }),
+        };
+    });
+    const isUpdate = approverViewUpdateData.approvalRuleId != null;
+    const payload = {
+        steps,
+        is_applicable_on_pending_approval_entity: approverViewUpdateData.isApplicableOnPendingApprovalEntity ?? true,
+        criteria: {
+            rangeType: 'range',
+            rangeEntity: 'currency',
+            range: {
+                min: {
+                    amount: minAmount?.amount ?? 0,
+                    currencyCode,
+                    currencySymbol,
+                },
+                max: {
+                    amount: maxAmount?.amount ?? Number.MAX_SAFE_INTEGER,
+                    currencyCode,
+                    currencySymbol,
+                },
+            },
+        },
+    };
     if (isUpdate) {
         payload.approval_rule_id = approverViewUpdateData.approvalRuleId;
     }

package/lib/esm/view/spendManagement/billPay/editBillView/editBillViewSelector.js

@@ -1,5 +1,6 @@
 import recordGet from 'lodash/get';
 import has from 'lodash/has';
+import { getAmountCriteria } from '../../../../entity/approvalRule/approvalRuleSelector';
 import { reduceFetchState } from '../../../../commonStateTypes/reduceFetchState';
 import { getBankAccountByBankAccountId, getBankAccountsByBankAccountIds, } from '../../../../entity/bankAccount/bankAccountSelector';
 import { getContactById, getContactsByIds, } from '../../../../entity/billPay/contact/contactSelector';
@@ -681,9 +682,13 @@ export const getDefaultWithdrawFromAccount = (state, depositAccounts, companyId,
 export const checkIfCreatorIsApprover = (billAmount, approvalRules, signedInUser) => {
     let isCreatorAlsoApprover = false;
     const approvalRule = approvalRules.find((rule) => {
-        const { max, min } = rule.criteria[0].range;
+        const amountCriteria = getAmountCriteria(rule.criteria);
+        if (amountCriteria?.min == null) {
+            return false;
+        }
+        const { min, max } = amountCriteria;
         return (billAmount > min.amount &&
-            (max?.amount != null ? billAmount <= max?.amount : true));
+            (max?.amount != null ? billAmount <= max.amount : true));
     });
     if (approvalRule != null) {
         const requireApprovalSteps = approvalRule.steps.filter((step) => step.action === 'require_approval');

package/lib/esm/view/spendManagement/commonSetup/setupViewReducer.js

@@ -3,26 +3,60 @@ const initialFetchStatus = {
     fetchState: 'Not-Started',
     error: undefined,
 };
-const emptyOfficerSlot = {
-    autoFilledFields: [],
-    localData: undefined,
-    sendOtpStatus: initialFetchStatus,
-    otpverificationStatus: initialFetchStatus,
-};
 export const initialState = {
     updateStatus: { fetchState: 'Not-Started', error: undefined },
-    companyDetails: { autoFilledFields: [] },
+    companyDetails: {},
     companyOfficerUpdateStatus: {
-        Officer_1: { ...emptyOfficerSlot },
-        Officer_2: { ...emptyOfficerSlot },
-        Officer_3: { ...emptyOfficerSlot },
-        Officer_4: { ...emptyOfficerSlot },
-        Officer_5: { ...emptyOfficerSlot },
-        Officer_6: { ...emptyOfficerSlot },
-        Officer_7: { ...emptyOfficerSlot },
-        Officer_8: { ...emptyOfficerSlot },
-        Officer_9: { ...emptyOfficerSlot },
-        Officer_10: { ...emptyOfficerSlot },
+        Officer_1: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_2: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_3: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_4: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_5: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_6: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_7: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_8: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_9: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
+        Officer_10: {
+            localData: undefined,
+            sendOtpStatus: initialFetchStatus,
+            otpverificationStatus: initialFetchStatus,
+        },
     },
     primaryContactDetails: {},
 };
@@ -263,60 +297,7 @@ const setupView = createSlice({
         clearSetupView(draft) {
             Object.assign(draft, initialState);
         },
-        /**
-         * Merge AI-parsed officer fields into the selected officer's localData and
-         * track which field names were autofilled so the form can show the ✦ badge.
-         */
-        applyKycDocumentAutofillForSetup: {
-            reducer(draft, action) {
-                const { officerType, values, autoFilledFieldNames } = action.payload;
-                const slot = draft.companyOfficerUpdateStatus[officerType];
-                slot.localData = Object.assign({}, slot.localData, values);
-                slot.autoFilledFields = Array.from(new Set([...slot.autoFilledFields, ...autoFilledFieldNames]));
-            },
-            prepare(payload) {
-                return { payload };
-            },
-        },
-        /**
-         * Merge AI-parsed company fields into companyDetails.localData and track
-         * which field names were autofilled.
-         */
-        applyKybDocumentAutofillForSetup: {
-            reducer(draft, action) {
-                const { values, autoFilledFieldNames } = action.payload;
-                draft.companyDetails.localData = Object.assign({}, draft.companyDetails.localData, values);
-                draft.companyDetails.autoFilledFields = Array.from(new Set([
-                    ...draft.companyDetails.autoFilledFields,
-                    ...autoFilledFieldNames,
-                ]));
-            },
-            prepare(payload) {
-                return { payload };
-            },
-        },
-        /**
-         * Wipe AI-autofill badges. If `officerType` is provided, clears only that
-         * officer; otherwise clears company details too.
-         */
-        clearKycKybAutofillForSetup: {
-            reducer(draft, action) {
-                const { officerType } = action.payload;
-                if (officerType != null) {
-                    draft.companyOfficerUpdateStatus[officerType].autoFilledFields = [];
-                }
-                else {
-                    draft.companyDetails.autoFilledFields = [];
-                    Object.keys(draft.companyOfficerUpdateStatus).forEach((key) => {
-                        draft.companyOfficerUpdateStatus[key].autoFilledFields = [];
-                    });
-                }
-            },
-            prepare(payload = {}) {
-                return { payload };
-            },
-        },
     },
 });
-export const { enableSetup, enableSetupSuccess, enableSetupFailure, updateBusinessVerificationDetails, updateBusinessVerificationDetailsSuccess, updateBusinessVerificationDetailsFailure, updateSelectedCompanyOfficer, updateSetupViewLocalStoreData, saveSetupViewDataInLocalStore, saveCompnayOfficerPhoneInLocalStore, saveCompnayOfficerAdditionalDocumentsInLocalStore, saveTreasuryAdditionalDocumentsInLocalStore, sendOtp: sendOtpSpendManagementSetUp, resendOtp: resendOtpSpendManagementSetUp, sendOtpSuccess: sendOtpSuccessSpendManagementSetUp, sendOtpFailure: sendOtpFailureSpendManagementSetUp, verifyOtp: verifyOtpSpendManagementSetUp, verifyOtpSuccess: verifyOtpSuccessSpendManagementSetUp, verifyOtpFailure: verifyOtpFailureSpendManagementSetUp, saveIndustryAndIncDateInLocalStore, clearSetupViewDataInLocalStore, clearSetupView, applyKycDocumentAutofillForSetup, applyKybDocumentAutofillForSetup, clearKycKybAutofillForSetup, } = setupView.actions;
+export const { enableSetup, enableSetupSuccess, enableSetupFailure, updateBusinessVerificationDetails, updateBusinessVerificationDetailsSuccess, updateBusinessVerificationDetailsFailure, updateSelectedCompanyOfficer, updateSetupViewLocalStoreData, saveSetupViewDataInLocalStore, saveCompnayOfficerPhoneInLocalStore, saveCompnayOfficerAdditionalDocumentsInLocalStore, saveTreasuryAdditionalDocumentsInLocalStore, sendOtp: sendOtpSpendManagementSetUp, resendOtp: resendOtpSpendManagementSetUp, sendOtpSuccess: sendOtpSuccessSpendManagementSetUp, sendOtpFailure: sendOtpFailureSpendManagementSetUp, verifyOtp: verifyOtpSpendManagementSetUp, verifyOtpSuccess: verifyOtpSuccessSpendManagementSetUp, verifyOtpFailure: verifyOtpFailureSpendManagementSetUp, saveIndustryAndIncDateInLocalStore, clearSetupViewDataInLocalStore, clearSetupView, } = setupView.actions;
 export default setupView.reducer;

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

@@ -119,7 +119,6 @@ export const getCompanyAndIdentityDetails = (state, companyId, companyAndIdentit
         const companyAddress = addressViewState.newAddressState?.company_address;
         const registeredCompanyAddress = addressViewState.newAddressState?.company_registered_address;
         companyDetailsLocalData = {
-            autoFilledFields: companyDetails.autoFilledFields,
             companyId,
             companyDescription,
             companyLegalName,
@@ -192,7 +191,6 @@ export const getCompanyAndIdentityDetails = (state, companyId, companyAndIdentit
             const companyOfficerAddress = addressViewState.newAddressState?.[addressType];
             companyOfficerLocalData[officerType] = {
                 ...companyOfficer.localData,
-                autoFilledFields: companyOfficer.autoFilledFields,
                 userFiles: getFilesByFileIds(fileState, fileIds),
                 additionalFiles: getFilesByFileIds(fileState, additionalSubmittedDocumentsForVerificationFileIds),
                 deleteFileStatusById,

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,49 @@
+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',
+                }),
+                fetchRemiSetupApproverView(true, true, 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',
+        }),
+        fetchRemiSetupApproverView(true, true, 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);

package/lib/esm/view/spendManagement/reimbursement/remiSetupApproverView/remiSetupApproverViewReducer.js

@@ -13,6 +13,7 @@ export const initialState = {
     newApprovalRuleId: undefined,
     approvalRulesDeleteStatusById: {},
     remiSetupApproverViewUpdateData: undefined,
+    reorderStatus: { fetchState: 'Not-Started', error: undefined },
     hasValidState() {
         return this.fetchState === 'Completed';
     },
@@ -26,12 +27,16 @@ const remiSetupApproverView = createSlice({
                 draft.fetchState = 'In-Progress';
                 draft.error = undefined;
             },
-            prepare(cacheOverride = false, resolveAttributeToUser = false, includeImplicitActors = false) {
+            // Approval Rules 3.0 — `useV3` arrives from the screen connector
+            // (`approval_rule_v3_config` dynamic config) and picks v1 vs v2
+            // endpoint in the fetch epic.
+            prepare(cacheOverride = false, resolveAttributeToUser = false, includeImplicitActors = false, useV3 = false) {
                 return {
                     payload: {
                         cacheOverride,
                         resolveAttributeToUser,
                         includeImplicitActors,
+                        useV3,
                     },
                 };
             },
@@ -134,8 +139,11 @@ const remiSetupApproverView = createSlice({
                     error: undefined,
                 };
             },
-            prepare(approvalRuleId) {
-                return { payload: { approvalRuleId } };
+            // Approval Rules 3.0 — `useV3` flows from the screen connector
+            // (`approval_rule_v3_config` dynamic config) so the delete epic
+            // can pick the v1 vs v2 endpoint.
+            prepare(approvalRuleId, useV3 = false) {
+                return { payload: { approvalRuleId, useV3 } };
             },
         },
         deleteRemiApprovalRuleSuccess: {
@@ -167,13 +175,57 @@ const remiSetupApproverView = createSlice({
                 };
             },
         },
-        saveRemiSetupApproverViewUpdates(draft) {
-            if (draft.remiSetupApproverViewUpdateData != null) {
-                draft.remiSetupApproverViewUpdateData.updateStatus = {
-                    fetchState: 'In-Progress',
-                    error: undefined,
-                };
-            }
+        /**
+         * Approval Rules 3.0 — list-page drag-and-drop reorder.
+         * See BillPay equivalent for the longer rationale.
+         */
+        reorderRemiApprovalRules: {
+            reducer(draft, action) {
+                const { approvalRuleIds } = action.payload;
+                draft.reorderStatus = { fetchState: 'In-Progress', error: undefined };
+                draft.approvalRuleIds = approvalRuleIds;
+            },
+            prepare(approvalRuleIds, useV3 = false) {
+                return { payload: { approvalRuleIds, useV3 } };
+            },
+        },
+        reorderRemiApprovalRulesSuccess: {
+            reducer(draft, action) {
+                const { approvalRuleIds } = action.payload;
+                draft.reorderStatus = { fetchState: 'Completed', error: undefined };
+                draft.approvalRuleIds = approvalRuleIds;
+            },
+            prepare(approvalRuleIds) {
+                return { payload: { approvalRuleIds } };
+            },
+        },
+        reorderRemiApprovalRulesFailure: {
+            reducer(draft, action) {
+                const { status } = action.payload;
+                draft.reorderStatus = { fetchState: 'Error', error: status };
+            },
+            prepare(status) {
+                return { payload: { status } };
+            },
+        },
+        saveRemiSetupApproverViewUpdates: {
+            // Approval Rules 3.0 — `useV3` sourced from
+            // `approval_rule_v3_config` dynamic config in the screen
+            // connector; epic uses it to pick v1 vs v2 URL + mapper. The
+            // reducer doesn't read the action but the parameter must be
+            // declared so the action payload type carries downstream.
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            reducer(draft, _action) {
+                if (draft.remiSetupApproverViewUpdateData != null) {
+                    draft.remiSetupApproverViewUpdateData.updateStatus = {
+                        fetchState: 'In-Progress',
+                        error: undefined,
+                    };
+                }
+            },
+            prepare(useV3) {
+                return { payload: { useV3 } };
+            },
         },
         saveRemiSetupApproverViewUpdatesSuccess: {
             reducer(draft, action) {
@@ -262,5 +314,5 @@ const remiSetupApproverView = createSlice({
         },
     },
 });
-export const { fetchRemiSetupApproverView, fetchRemiSetupApproverViewSuccess, fetchRemiSetupApproverViewFailure, fetchRemiApproversDetails, fetchRemiApproversList, fetchRemiApproversListSuccess, fetchRemiApproversListFailure, deleteRemiApprovalRule, deleteRemiApprovalRuleSuccess, deleteRemiApprovalRuleFailure, saveRemiSetupApproverViewUpdates, saveRemiSetupApproverViewUpdatesSuccess, saveRemiSetupApproverViewUpdatesFailure, initializeRemiSetupApproverViewUpdateData, saveRemiSetupApproverViewUpdateData, setListeningToPusherEvent, clearRemiSetupApproverViewUpdateData, clearRemiSetupApproverView, } = remiSetupApproverView.actions;
+export const { fetchRemiSetupApproverView, fetchRemiSetupApproverViewSuccess, fetchRemiSetupApproverViewFailure, fetchRemiApproversDetails, fetchRemiApproversList, fetchRemiApproversListSuccess, fetchRemiApproversListFailure, deleteRemiApprovalRule, deleteRemiApprovalRuleSuccess, deleteRemiApprovalRuleFailure, reorderRemiApprovalRules, reorderRemiApprovalRulesSuccess, reorderRemiApprovalRulesFailure, saveRemiSetupApproverViewUpdates, saveRemiSetupApproverViewUpdatesSuccess, saveRemiSetupApproverViewUpdatesFailure, initializeRemiSetupApproverViewUpdateData, saveRemiSetupApproverViewUpdateData, setListeningToPusherEvent, clearRemiSetupApproverViewUpdateData, clearRemiSetupApproverView, } = remiSetupApproverView.actions;
 export default remiSetupApproverView.reducer;