@zeniai/client-epic-state 5.1.68-betaDI2 → 5.1.69-betaAK0

package/lib/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -7,15 +7,28 @@ import { INVOICING_CUSTOMER_COLUMNS, INVOICING_CUSTOMER_TABS, } from './invoicin
  * slice actually change. Without this, the connected list page re-rendered on
  * every unrelated redux action because a fresh array was built each call.
  */
-export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (customerState, listViewState) => ({
-    columns: INVOICING_CUSTOMER_COLUMNS,
-    customers: getInvoicingCustomersByIds(customerState, listViewState.ids),
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    nextCursor: listViewState.nextCursor,
-    filters: listViewState.filters,
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    tabIds: INVOICING_CUSTOMER_TABS,
-    sort: listViewState.sort,
-}));
+export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (customerState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allCustomers = getInvoicingCustomersByIds(customerState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything, 'at_risk' keys off the
+    // `isAtRisk` flag, the rest match the customer `status`).
+    const customers = activeTab === 'all'
+        ? allCustomers
+        : activeTab === 'at_risk'
+            ? allCustomers.filter((customer) => customer.isAtRisk === true)
+            : allCustomers.filter((customer) => customer.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_CUSTOMER_COLUMNS,
+        customers,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        nextCursor: listViewState.nextCursor,
+        filters: listViewState.filters,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        tabIds: INVOICING_CUSTOMER_TABS,
+        sort: listViewState.sort,
+    };
+});

package/lib/esm/view/invoicing/invoicingDunningCaseListView/epics/fetchInvoicingDunningCaseListEpic.js

@@ -6,9 +6,6 @@ import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../..
 import { fetchInvoicingDunningCaseList, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, } from '../invoicingDunningCaseListViewReducer';
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.search != null && filters.search.length > 0) {
         params.set('search', filters.search);
     }

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,10 +81,15 @@ const invoicingDunningCaseListView = createSlice({
         updateInvoicingDunningCaseFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingDunningCaseActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         clearInvoicingDunningCaseListView(draft) {
             Object.assign(draft, initialState);
         },
     },
 });
-export const { fetchInvoicingDunningCaseList, fetchInvoicingDunningCaseListPage, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, fetchInvoicingDunningCaseCounts, updateInvoicingDunningCaseCounts, updateInvoicingDunningCaseCountsFailure, updateInvoicingDunningCaseFilters, clearInvoicingDunningCaseListView, } = invoicingDunningCaseListView.actions;
+export const { fetchInvoicingDunningCaseList, fetchInvoicingDunningCaseListPage, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, fetchInvoicingDunningCaseCounts, updateInvoicingDunningCaseCounts, updateInvoicingDunningCaseCountsFailure, updateInvoicingDunningCaseFilters, setInvoicingDunningCaseActiveTab, clearInvoicingDunningCaseListView, } = invoicingDunningCaseListView.actions;
 export default invoicingDunningCaseListView.reducer;

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewSelector.js

@@ -6,16 +6,26 @@ import { INVOICING_DUNNING_CASE_COLUMNS, INVOICING_DUNNING_CASE_TABS, } from './
  * object) keep referential identity until the dunning-case entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (dunningCaseState, listViewState) => ({
-    columns: INVOICING_DUNNING_CASE_COLUMNS,
-    dunningCases: getInvoicingDunningCasesByIds(dunningCaseState, listViewState.ids),
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    tabIds: INVOICING_DUNNING_CASE_TABS,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (dunningCaseState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allDunningCases = getInvoicingDunningCasesByIds(dunningCaseState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const dunningCases = activeTab === 'all'
+        ? allDunningCases
+        : allDunningCases.filter((dunningCase) => dunningCase.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_DUNNING_CASE_COLUMNS,
+        dunningCases,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        nextCursor: listViewState.nextCursor,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        tabIds: INVOICING_DUNNING_CASE_TABS,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListEpic.js

@@ -8,9 +8,6 @@ import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../..
 import { fetchInvoicingSubscriptionList, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, } from '../invoicingSubscriptionListViewReducer';
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,6 +81,11 @@ const invoicingSubscriptionListView = createSlice({
         updateInvoicingSubscriptionFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingSubscriptionActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created subscription in the cached list + tab counts so the
         // subscription page shows it without refetching from the server. The status
         // doubles as the per-tab count key (tab ids mirror InvoicingSubscriptionStatus).
@@ -99,5 +105,5 @@ const invoicingSubscriptionListView = createSlice({
         },
     },
 });
-export const { fetchInvoicingSubscriptionList, fetchInvoicingSubscriptionListPage, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, fetchInvoicingSubscriptionCounts, updateInvoicingSubscriptionCounts, updateInvoicingSubscriptionCountsFailure, updateInvoicingSubscriptionFilters, addInvoicingSubscriptionToList, clearInvoicingSubscriptionListView, } = invoicingSubscriptionListView.actions;
+export const { fetchInvoicingSubscriptionList, fetchInvoicingSubscriptionListPage, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, fetchInvoicingSubscriptionCounts, updateInvoicingSubscriptionCounts, updateInvoicingSubscriptionCountsFailure, updateInvoicingSubscriptionFilters, setInvoicingSubscriptionActiveTab, addInvoicingSubscriptionToList, clearInvoicingSubscriptionListView, } = invoicingSubscriptionListView.actions;
 export default invoicingSubscriptionListView.reducer;

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -8,15 +8,25 @@ import { INVOICING_SUBSCRIPTION_COLUMNS, INVOICING_SUBSCRIPTION_TABS, } from './
  * re-rendered on every unrelated redux action because a fresh array was built
  * each call.
  */
-export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (subscriptionState, listViewState) => ({
-    columns: INVOICING_SUBSCRIPTION_COLUMNS,
-    subscriptions: getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids),
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    nextCursor: listViewState.nextCursor,
-    filters: listViewState.filters,
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    tabIds: INVOICING_SUBSCRIPTION_TABS,
-    sort: listViewState.sort,
-}));
+export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (subscriptionState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allSubscriptions = getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const subscriptions = activeTab === 'all'
+        ? allSubscriptions
+        : allSubscriptions.filter((subscription) => subscription.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_SUBSCRIPTION_COLUMNS,
+        subscriptions,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        nextCursor: listViewState.nextCursor,
+        filters: listViewState.filters,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        tabIds: INVOICING_SUBSCRIPTION_TABS,
+        sort: listViewState.sort,
+    };
+});

package/lib/esm/view/invoicing/invoicingTransactionListView/epics/fetchInvoicingTransactionListEpic.js

@@ -4,13 +4,13 @@ import { updateInvoicingTransactions } from '../../../../entity/invoicing/invoic
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
 import { fetchInvoicingTransactionList, updateInvoicingTransactionList, updateInvoicingTransactionListFailure, } from '../invoicingTransactionListViewReducer';
-const buildQuery = (filters, cursor, sort) => {
+const buildQuery = (filters, type, cursor, sort) => {
     const params = new URLSearchParams();
     if (filters.status != null && filters.status.length > 0) {
         params.set('status', filters.status);
     }
-    if (filters.type != null && filters.type.length > 0) {
-        params.set('type', filters.type);
+    if (type != null && type.length > 0) {
+        params.set('type', type);
     }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
@@ -25,9 +25,11 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingTransactionListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingTransactionList.match), switchMap((action) => {
+export const fetchInvoicingTransactionListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingTransactionList.match), switchMap((action) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/payments`, buildQuery(filters, cursor, sort));
+    const { activeTab } = state$.value.invoicingTransactionListViewState;
+    const type = activeTab !== 'all' ? activeTab : undefined;
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/payments`, buildQuery(filters, type, cursor, sort));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];

package/lib/esm/view/invoicing/invoicingTransactionListView/epics/fetchInvoicingTransactionListPageEpic.js

@@ -16,8 +16,9 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 export const fetchInvoicingTransactionListPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoicingTransactionListPage.match), mergeMap((action) => {
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingTransactionListViewState;
+    const activeTabState = state.byTab[state.activeTab];
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
+    if (shouldFetch({ fetchState: activeTabState.fetchState, error: activeTabState.error }, cacheOverride)) {
         pageActions.push(fetchInvoicingTransactionList({ filters, sort }));
     }
     return concat(from(pageActions));

package/lib/esm/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewReducer.js

@@ -1,13 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { makeInvoicingTransactionIdsByTab, } from './invoicingTransactionListViewState';
+/**
+ * Whether two transaction-list queries share the same base (tab-independent)
+ * query. When the base query changes (search / customer / status / sort) every
+ * per-tab cache is stale, so the reducer resets them all.
+ */
+const sameTransactionBaseQuery = (a, b) => a.filters.customerId === b.filters.customerId &&
+    a.filters.status === b.filters.status &&
+    a.filters.search === b.filters.search &&
+    a.sort?.field === b.sort?.field &&
+    a.sort?.dir === b.sort?.dir;
 export const initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
-    ids: [],
-    nextCursor: null,
+    activeTab: 'all',
+    byTab: makeInvoicingTransactionIdsByTab(),
     filters: {},
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingTransactionListView = createSlice({
     name: 'invoicingTransactionListView',
@@ -15,14 +21,15 @@ const invoicingTransactionListView = createSlice({
     reducers: {
         fetchInvoicingTransactionList: {
             reducer(draft, action) {
+                const tab = draft.byTab[draft.activeTab];
                 if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
+                    tab.ids = [];
+                    tab.nextCursor = null;
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
+                tab.fetchState = 'In-Progress';
+                tab.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -37,6 +44,12 @@ const invoicingTransactionListView = createSlice({
         },
         fetchInvoicingTransactionListPage: {
             reducer(draft, action) {
+                // A different base query invalidates every tab's cache — reset so the
+                // page epic's shouldFetch refetches the active tab instead of showing
+                // rows fetched under a stale search/customer/status/sort.
+                if (!sameTransactionBaseQuery(draft, action.payload)) {
+                    draft.byTab = makeInvoicingTransactionIdsByTab();
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -51,34 +64,52 @@ const invoicingTransactionListView = createSlice({
             },
         },
         updateInvoicingTransactionList(draft, action) {
-            draft.ids = action.payload.keepExistingListItems
-                ? [...new Set([...draft.ids, ...action.payload.ids])]
+            const tab = draft.byTab[draft.activeTab];
+            tab.ids = action.payload.keepExistingListItems
+                ? [...new Set([...tab.ids, ...action.payload.ids])]
                 : action.payload.ids;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            tab.nextCursor = action.payload.nextCursor;
+            tab.fetchState = 'Completed';
+            tab.error = undefined;
         },
         updateInvoicingTransactionListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            const tab = draft.byTab[draft.activeTab];
+            tab.fetchState = 'Error';
+            tab.error = action.payload;
         },
         updateInvoicingTransactionFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a type tab. The view dispatches the follow-up
+        // fetchInvoicingTransactionListPage so the page epic fetches the tab when
+        // its cache is empty and reuses it when already loaded.
+        setInvoicingTransactionActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly recorded payment's transaction in the cached list so the
-        // payments page shows it without refetching. The list view has no counts
-        // slice, so we only prepend the id (dedup/no-op if already present).
+        // payments page shows it without refetching. The payload carries no type,
+        // so prepend to the 'all' tab and the tab currently in view (dedup/no-op if
+        // already present); other tabs refetch fresh on their next visit.
         addInvoicingTransactionToList(draft, action) {
             const id = action.payload;
-            if (draft.ids.includes(id)) {
-                return;
+            const prependTo = (tabId) => {
+                const tab = draft.byTab[tabId];
+                if (!tab.ids.includes(id)) {
+                    tab.ids = [id, ...tab.ids];
+                }
+            };
+            prependTo('all');
+            if (draft.activeTab !== 'all') {
+                prependTo(draft.activeTab);
             }
-            draft.ids = [id, ...draft.ids];
         },
         clearInvoicingTransactionListView(draft) {
-            Object.assign(draft, initialState);
+            draft.activeTab = 'all';
+            draft.byTab = makeInvoicingTransactionIdsByTab();
+            draft.filters = {};
+            draft.sort = undefined;
         },
     },
 });
-export const { fetchInvoicingTransactionList, fetchInvoicingTransactionListPage, updateInvoicingTransactionList, updateInvoicingTransactionListFailure, updateInvoicingTransactionFilters, addInvoicingTransactionToList, clearInvoicingTransactionListView, } = invoicingTransactionListView.actions;
+export const { fetchInvoicingTransactionList, fetchInvoicingTransactionListPage, updateInvoicingTransactionList, updateInvoicingTransactionListFailure, updateInvoicingTransactionFilters, setInvoicingTransactionActiveTab, addInvoicingTransactionToList, clearInvoicingTransactionListView, } = invoicingTransactionListView.actions;
 export default invoicingTransactionListView.reducer;

package/lib/esm/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewSelector.js

@@ -6,14 +6,18 @@ import { INVOICING_TRANSACTION_COLUMNS, INVOICING_TRANSACTION_TABS, } from './in
  * object) keep referential identity until the transaction entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingTransactionListView = createSelector((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (transactionState, listViewState) => ({
-    columns: INVOICING_TRANSACTION_COLUMNS,
-    transactions: getInvoicingTransactionsByIds(transactionState, listViewState.ids),
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    tabIds: INVOICING_TRANSACTION_TABS,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+export const getInvoicingTransactionListView = createSelector((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (transactionState, listViewState) => {
+    const activeTabState = listViewState.byTab[listViewState.activeTab];
+    return {
+        activeTab: listViewState.activeTab,
+        columns: INVOICING_TRANSACTION_COLUMNS,
+        transactions: getInvoicingTransactionsByIds(transactionState, activeTabState.ids),
+        filters: listViewState.filters,
+        nextCursor: activeTabState.nextCursor,
+        fetchState: activeTabState.fetchState,
+        error: activeTabState.error,
+        tabIds: INVOICING_TRANSACTION_TABS,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewState.js

@@ -37,3 +37,13 @@ export const toInvoicingTransactionTabId = (v) => stringToUnion(v, ALL_INVOICING
 export const INVOICING_TRANSACTION_TABS = [
     ...ALL_INVOICING_TRANSACTION_TAB_IDS,
 ];
+export const makeInvoicingTransactionTabState = () => ({
+    ids: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+export const makeInvoicingTransactionIdsByTab = () => ALL_INVOICING_TRANSACTION_TAB_IDS.reduce((acc, tabId) => {
+    acc[tabId] = makeInvoicingTransactionTabState();
+    return acc;
+}, {});

package/lib/esm/view/notificationPreferencesView/epics/saveNotificationPreferencesEpic.js

@@ -1,12 +1,17 @@
-import { EMPTY, of } from 'rxjs';
-import { catchError, filter, finalize, mergeMap, switchMap, takeUntil, withLatestFrom, } from 'rxjs/operators';
+import { EMPTY, concat, of } from 'rxjs';
+import { catchError, debounceTime, filter, finalize, mergeMap, switchMap, takeUntil, withLatestFrom, } from 'rxjs/operators';
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../responsePayload';
 import { notificationPreferencesUrl } from '../notificationPreferencesEndpoint';
 import { mapPreferencesToPayload, } from '../notificationPreferencesViewPayload';
-import { clearAllNotificationPreferencesView, clearNotificationPreferencesLocalOverrides, saveNotificationPreferences, saveNotificationPreferencesFailure, saveNotificationPreferencesSuccess, } from '../notificationPreferencesViewReducer';
+import { clearAllNotificationPreferencesView, clearNotificationPreferencesLocalOverrides, saveNotificationPreferences, saveNotificationPreferencesFailure, saveNotificationPreferencesSuccess, setGroupFrequency, toggleEventChannel, } from '../notificationPreferencesViewReducer';
 import { getNotificationLocalOverrides } from '../notificationPreferencesViewSelector';
-export const saveNotificationPreferencesEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => saveNotificationPreferences.match(action)), withLatestFrom(state$), 
+const DEBOUNCE_MS = 300;
+export const saveNotificationPreferencesEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => toggleEventChannel.match(action) || setGroupFrequency.match(action)), 
+// Coalesce bursts of toggles into a single PUT. Trade-off: rapid clickers
+// defer saves until they pause. Consider a max-wait wrapper if this
+// becomes a UX problem.
+debounceTime(DEBOUNCE_MS), withLatestFrom(state$), 
 // `switchMap` unsubscribes from any in-flight PUT observable when a new
 // debounced batch fires. The prior HTTP request has already left the
 // client — the network call is NOT cancelled — but its response is
@@ -105,9 +110,7 @@ switchMap(([, state]) => {
     // under patch-semantic LWW. Cursor Bugbot 3637969823 + 3641372002.
     takeUntil(actions$.pipe(filter((action) => clearNotificationPreferencesLocalOverrides.match(action) ||
         clearAllNotificationPreferencesView.match(action)))));
-    // `saveNotificationPreferences` (the trigger) already flipped
-    // savePreferencesState to In-Progress via its reducer case, so the PUT
-    // observable is returned directly — re-emitting the trigger here would
-    // loop the epic on itself.
-    return request$;
+    // Flip savePreferencesState to In-Progress BEFORE the network call so
+    // any "saving…" UI can render.
+    return concat(of(saveNotificationPreferences()), request$);
 }));

package/lib/esm/view/notificationPreferencesView/notificationPreferencesViewPayload.js

@@ -1,5 +1,5 @@
 import { toNotificationChannel, toNotificationFrequency, } from '../../entity/notificationRegistry/notificationRegistryState';
-const mapChannelEnabledMap = (raw) => {
+const mapEventEnabledByChannel = (raw) => {
     if (raw == null) {
         return {};
     }
@@ -20,8 +20,7 @@ export const mapPayloadToPreferences = (payload) => {
         toNotificationFrequency(frequency),
     ]));
     return {
-        eventEnabledByChannel: mapChannelEnabledMap(payload?.event_enabled_by_channel),
-        groupChannelEnabledByGroupId: mapChannelEnabledMap(payload?.group_channel_enabled_by_group_id),
+        eventEnabledByChannel: mapEventEnabledByChannel(payload?.event_enabled_by_channel),
         groupFrequencyByGroupId,
     };
 };
@@ -30,10 +29,6 @@ export const mapPreferencesToPayload = (preferences) => {
     if (Object.keys(preferences.eventEnabledByChannel).length > 0) {
         payload.event_enabled_by_channel = preferences.eventEnabledByChannel;
     }
-    if (Object.keys(preferences.groupChannelEnabledByGroupId).length > 0) {
-        payload.group_channel_enabled_by_group_id =
-            preferences.groupChannelEnabledByGroupId;
-    }
     if (Object.keys(preferences.groupFrequencyByGroupId).length > 0) {
         payload.group_frequency_by_group_id = preferences.groupFrequencyByGroupId;
     }

package/lib/esm/view/notificationPreferencesView/notificationPreferencesViewReducer.js

@@ -18,18 +18,8 @@ const mergePreferences = (base, patch) => {
             ...channels,
         };
     });
-    const groupChannelEnabledByGroupId = {
-        ...base.groupChannelEnabledByGroupId,
-    };
-    Object.entries(patch.groupChannelEnabledByGroupId).forEach(([groupId, channels]) => {
-        groupChannelEnabledByGroupId[groupId] = {
-            ...(base.groupChannelEnabledByGroupId[groupId] ?? {}),
-            ...channels,
-        };
-    });
     return {
         eventEnabledByChannel,
-        groupChannelEnabledByGroupId,
         groupFrequencyByGroupId: {
             ...base.groupFrequencyByGroupId,
             ...patch.groupFrequencyByGroupId,
@@ -71,38 +61,13 @@ const subtractSavedOverrides = (current, saved) => {
             eventEnabledByChannel[eventId] = remainingChannels;
         }
     });
-    // Same value-equality subtraction as eventEnabledByChannel above — a
-    // group-channel master the user re-flipped while a PUT was in flight must
-    // survive so the next debounce cycle re-sends it.
-    const groupChannelEnabledByGroupId = {};
-    Object.entries(current.groupChannelEnabledByGroupId).forEach(([groupId, channels]) => {
-        const savedChannels = saved.groupChannelEnabledByGroupId[groupId];
-        if (savedChannels == null) {
-            groupChannelEnabledByGroupId[groupId] = channels;
-            return;
-        }
-        const remainingChannels = {};
-        Object.keys(channels).forEach((channel) => {
-            if (!(channel in savedChannels) ||
-                channels[channel] !== savedChannels[channel]) {
-                remainingChannels[channel] = channels[channel];
-            }
-        });
-        if (Object.keys(remainingChannels).length > 0) {
-            groupChannelEnabledByGroupId[groupId] = remainingChannels;
-        }
-    });
     const groupFrequencyByGroupId = {};
     Object.entries(current.groupFrequencyByGroupId).forEach(([groupId, frequency]) => {
         if (saved.groupFrequencyByGroupId[groupId] !== frequency) {
             groupFrequencyByGroupId[groupId] = frequency;
         }
     });
-    return {
-        eventEnabledByChannel,
-        groupChannelEnabledByGroupId,
-        groupFrequencyByGroupId,
-    };
+    return { eventEnabledByChannel, groupFrequencyByGroupId };
 };
 const notificationPreferencesView = createSlice({
     name: 'notificationPreferencesView',
@@ -239,16 +204,6 @@ const notificationPreferencesView = createSlice({
             draft.preferences = mergePreferences(draft.preferences, patch);
             draft.localOverrides = subtractSavedOverrides(draft.localOverrides, action.payload.savedOverrides);
         },
-        setGroupChannelMaster(draft, action) {
-            // Mirror of `toggleEventChannel` but scoped to the group-channel master
-            // held under `groupChannelEnabledByGroupId[groupId][channel]`.
-            const { channel, enabled, groupId } = action.payload;
-            const groupMap = {
-                ...(draft.localOverrides.groupChannelEnabledByGroupId[groupId] ?? {}),
-            };
-            groupMap[channel] = enabled;
-            draft.localOverrides.groupChannelEnabledByGroupId[groupId] = groupMap;
-        },
         setGroupFrequency(draft, action) {
             draft.localOverrides.groupFrequencyByGroupId[action.payload.groupId] =
                 action.payload.frequency;
@@ -263,5 +218,5 @@ const notificationPreferencesView = createSlice({
         },
     },
 });
-export const { clearAllNotificationPreferencesView, clearNotificationPreferencesLocalOverrides, fetchNotificationPreferencesSuccess, saveNotificationPreferences, saveNotificationPreferencesFailure, saveNotificationPreferencesSuccess, setGroupChannelMaster, setGroupFrequency, toggleEventChannel, } = notificationPreferencesView.actions;
+export const { clearAllNotificationPreferencesView, clearNotificationPreferencesLocalOverrides, fetchNotificationPreferencesSuccess, saveNotificationPreferences, saveNotificationPreferencesFailure, saveNotificationPreferencesSuccess, setGroupFrequency, toggleEventChannel, } = notificationPreferencesView.actions;
 export default notificationPreferencesView.reducer;

package/lib/esm/view/notificationPreferencesView/notificationPreferencesViewSelector.js

@@ -9,16 +9,8 @@ export const getEffectiveNotificationPreferences = (state) => {
             ...channels,
         };
     });
-    const mergedGroupChannelEnabledByGroupId = { ...view.preferences.groupChannelEnabledByGroupId };
-    Object.entries(view.localOverrides.groupChannelEnabledByGroupId).forEach(([groupId, channels]) => {
-        mergedGroupChannelEnabledByGroupId[groupId] = {
-            ...(view.preferences.groupChannelEnabledByGroupId[groupId] ?? {}),
-            ...channels,
-        };
-    });
     return {
         eventEnabledByChannel: mergedEventEnabledByChannel,
-        groupChannelEnabledByGroupId: mergedGroupChannelEnabledByGroupId,
         groupFrequencyByGroupId: {
             ...view.preferences.groupFrequencyByGroupId,
             ...view.localOverrides.groupFrequencyByGroupId,
@@ -29,6 +21,5 @@ export const getNotificationLocalOverrides = (state) => getView(state).localOver
 export const hasUnsavedNotificationPreferences = (state) => {
     const overrides = getView(state).localOverrides;
     return (Object.keys(overrides.eventEnabledByChannel).length > 0 ||
-        Object.keys(overrides.groupChannelEnabledByGroupId).length > 0 ||
         Object.keys(overrides.groupFrequencyByGroupId).length > 0);
 };

package/lib/esm/view/notificationPreferencesView/notificationPreferencesViewState.js

@@ -1,5 +1,4 @@
 export const emptyNotificationPreferences = () => ({
     eventEnabledByChannel: {},
-    groupChannelEnabledByGroupId: {},
     groupFrequencyByGroupId: {},
 });

package/lib/esm/view/spendManagement/billPay/billDetailView/billDetailViewSelector.js

@@ -13,7 +13,7 @@ import { getUserByUserId } from '../../../../entity/user/userSelector';
 import { getUserRoleByUserId } from '../../../../entity/userRole/userRoleSelector';
 import { getActivityHistory, } from '../../commonHistoryView/commonHistorySelector';
 import { getAllFundingAccounts, } from '../../commonSetup/setupViewSelector';
-import { getLatestApprovalDate, isAwaitingMarkAsPaid, isSodAdminFallbackEligibleForStep, isSodExcludedViewerBlocked, } from '../../helpers';
+import { getLatestApprovalDate, isAwaitingMarkAsPaid, isSodAdminFallbackEligibleForStep, isSodExcludedViewerBlocked, shouldShowSodAdminLabel, } from '../../helpers';
 import { getActivityRealTimeApproval, } from '../../realTimeApprovalView/realTimeApprovalSelector';
 import { getEntityRealTimeApprovalDetailKey } from '../../realTimeApprovalView/realTimeApprovalState';
 import { getBillPaymentSubConfigCodeKey, getInternationalSubConfigCodeKey, getInternationalWireMethodCodeKey, } from '../billPayConfig/billPayConfigPayload';
@@ -22,7 +22,12 @@ import { getBillPayConfigMethodKey, toBillPaymentSubConfigCodeKeyType, } from '.
 import { getPreviousBills, } from '../previousBills/previousBillsSelector';
 import { getBillTransactionDetailKey, initialBillDetailView, } from './billDetailViewState';
 export const getBillActivities = (state, billId, billStageCode) => {
-    const { billDetailViewState, approvalRuleState, entityApprovalStatusState, userState, } = state;
+    const { billDetailViewState, approvalRuleState, entityApprovalStatusState, userState, billTransactionState, } = state;
+    // Note: createdBy is undefined until billTransactionState is populated.
+    // getBillActivities is called from getBillDetailView which runs after the
+    // bill entity epic completes — this assumption must hold for showSodAdminLabel
+    // to render on first paint.
+    const createdBy = billTransactionState.transactionById[billId]?.createdBy;
     const key = getBillTransactionDetailKey(billId);
     const billDetail = recordGet(billDetailViewState.billDetailById, key, undefined);
     let billActivities = [];
@@ -85,6 +90,7 @@ export const getBillActivities = (state, billId, billStageCode) => {
                             actorsActivity,
                             isOriginalApprovalStep: step.isOriginalApprovalStep,
                             displayPendingApproverAsAdmin: isSodAdminFallbackEligibleForStep(sodExcludedApproverUserId, isAdminFallbackApprover, actorsActivity),
+                            showSodAdminLabel: shouldShowSodAdminLabel(sodExcludedApproverUserId, actorsActivity, createdBy),
                         };
                     }),
                 };