@zeniai/client-epic-state 5.2.50-betaRD1 → 5.2.50

package/lib/esm/view/expenseAutomationView/epics/jeSchedule/initializeJeScheduleLocalDataEpic.js

@@ -7,36 +7,22 @@ export const initializeJeScheduleLocalDataEpic = (actions$, state$) => actions$.
     const actions = [];
     const { jeScheduleTransactionKeys } = action.payload;
     jeScheduleTransactionKeys.forEach((jeScheduleTransactionKey) => {
-        // Checked before the selector runs, not after: the selector destructures the record it
-        // looks up, so a key that is not in the store throws a TypeError rather than returning
-        // undefined. This epic is a mergeMap with no catchError, so that throw would take its
-        // subscription down for the rest of the session and silently stop local-data
-        // initialisation everywhere -- not just for this row.
-        if (state.jeSchedulesState.schedulesByTransactionKey[jeScheduleTransactionKey] == null) {
-            return;
-        }
         const jeScheduledTransaction = getJEScheduledTransactionByJEScheduleTransactionKey(jeScheduleTransactionKey, state);
-        // One record per journal entry, not per schedule. A schedule that failed in two months is
-        // two rows and each needs its own vendor / category edits -- keying only the first left
-        // every later row without local data, which the list renders read-only and without a
-        // Retry button. An empty array is possible when details have not landed yet; it must not
-        // throw, because this runs in a mergeMap with no catchError and the throw would take the
-        // epic's subscription down for the rest of the session.
-        jeScheduledTransaction.scheduledJournalEntry.forEach((journalEntry) => {
-            const { scheduledJournalEntryID } = journalEntry;
-            actions.push(updateJeScheduleLocalDataById({
-                localData: {
-                    jeScheduleType: jeScheduledTransaction.jeScheduleType,
-                    jeScheduleID: jeScheduledTransaction.jeScheduleId,
-                    scheduledJournalEntryID,
-                    updatedVendor: undefined,
-                    updatedCategoryId: undefined,
-                    updatedAccumulatedDepreciationCategoryID: undefined,
-                    updatedClassId: undefined,
-                },
-                scheduledJournalEntryID,
-            }));
-        });
+        const initLocalData = {
+            jeScheduleType: jeScheduledTransaction.jeScheduleType,
+            jeScheduleID: jeScheduledTransaction.jeScheduleId,
+            scheduledJournalEntryID: jeScheduledTransaction.scheduledJournalEntry[0]
+                .scheduledJournalEntryID,
+            updatedVendor: undefined,
+            updatedCategoryId: undefined,
+            updatedAccumulatedDepreciationCategoryID: undefined,
+            updatedClassId: undefined,
+        };
+        actions.push(updateJeScheduleLocalDataById({
+            localData: initLocalData,
+            scheduledJournalEntryID: jeScheduledTransaction.scheduledJournalEntry[0]
+                .scheduledJournalEntryID,
+        }));
     });
     return from(actions);
 }));

package/lib/esm/view/expenseAutomationView/epics/jeSchedule/retryJeSchedulesEpic.js

@@ -1,6 +1,5 @@
 import { from } from 'rxjs';
 import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
-import { removeScheduledJournalEntryFromJESchedule, } from '../../../../entity/jeSchedules/jeSchedulesReducer';
 import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
 import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
 import { createZeniAPIStatus, isSuccessStatus, } from '../../../../responsePayload';
@@ -23,16 +22,9 @@ export const retryJeScheduleEpic = (actions$, state$, zeniAPI) => actions$.pipe(
         .pipe(mergeMap((response) => {
         if (isSuccessStatus(response)) {
             const updateActions = [];
-            // Retire this entry, and the schedule itself only when this was its last failed
-            // one. A schedule that failed in several months is several rows sharing one
-            // schedule key, so dropping the key outright took the still-failing months off the
-            // list with it and nothing would have surfaced them again.
-            const failedEntriesForSchedule = state.jeSchedulesState.schedulesByTransactionKey[jeScheduleTransactionKey]?.scheduledJournalEntry ?? [];
-            const wasLastFailedEntryForSchedule = failedEntriesForSchedule.filter((journalEntry) => journalEntry.scheduledJournalEntryID !==
-                scheduledJournalEntryID).length === 0;
             updateActions.push(retryJeScheduleSuccess({
                 scheduledJournalEntryID,
-            }), removeScheduledJournalEntryFromJESchedule(jeScheduleTransactionKey, scheduledJournalEntryID), removeJeScheduleLocalDataById({ scheduledJournalEntryID }), // Important to remove localdata after success.
+            }), removeFailedJeScheduleTransactionKey(jeScheduleTransactionKey, selectedPeriod), removeJeScheduleLocalDataById({ scheduledJournalEntryID }), // Important to remove localdata after success.
             fetchMonthEndCloseChecks({
                 tenantId: currentTenant.tenantId,
                 period: selectedPeriod,
@@ -42,9 +34,6 @@ export const retryJeScheduleEpic = (actions$, state$, zeniAPI) => actions$.pipe(
                 messageText: 'success',
                 type: 'success',
             }));
-            if (wasLastFailedEntryForSchedule) {
-                updateActions.push(removeFailedJeScheduleTransactionKey(jeScheduleTransactionKey, selectedPeriod));
-            }
             return from(updateActions);
         }
         else {

package/lib/esm/view/expenseAutomationView/reducers/jeSchedulesViewReducer.js

@@ -62,10 +62,6 @@ export const initialState = {
     jeScheduleAccruedKeysByPeriodAndTab: {},
     jeScheduleOneTimeAccrualKeysByPeriodAndTab: {},
     failedJeScheduleTransactionKeysByPeriodAndTab: {},
-    failedJePostings: {
-        fetchState: { fetchState: 'Not-Started', error: undefined },
-        jeScheduleTransactionKeys: [],
-    },
     postStatusById: {},
     ignoreStatusById: {},
     revertStatusById: {},
@@ -75,9 +71,6 @@ export const initialState = {
     oneTimeAccrualFetchStatusById: {},
     uiState: {
         createdGroupCollapsed: false,
-        // Expanded, like the other two. A failed posting is the only thing on this page that is
-        // actively wrong, so folding it away by default would hide the reason to open the tab.
-        failedGroupCollapsed: false,
         pendingGroupCollapsed: false,
         scrollPosition: { scrollTop: 0, scrollLeft: undefined },
         searchString: '',
@@ -149,53 +142,6 @@ const expenseAutomationJESchedulesView = createSlice({
                 };
             },
         },
-        /**
-         * The Failed Postings list, fetched separately from the schedules it belongs to.
-         *
-         * No period and no tab in any of these three: the endpoint applies no date window, so there is
-         * one list per tenant and one slot to hold it. `refreshInBackground` keeps a silent refetch
-         * from dropping a skeleton over rows already on screen, the same way refreshStatus does for
-         * the schedules list.
-         */
-        fetchFailedJePostings: {
-            reducer(draft, action) {
-                if (!action.payload.refreshInBackground) {
-                    draft.failedJePostings.fetchState = {
-                        fetchState: 'In-Progress',
-                        error: undefined,
-                    };
-                }
-            },
-            prepare(refreshInBackground = false) {
-                return { payload: { refreshInBackground } };
-            },
-        },
-        fetchFailedJePostingsSuccess: {
-            reducer(draft, action) {
-                draft.failedJePostings = {
-                    fetchState: { fetchState: 'Completed', error: undefined },
-                    jeScheduleTransactionKeys: action.payload.failedJeSchedules.map((schedule) => getJEScheduleTransactionDetailKeyPayload(schedule.base_transaction)),
-                };
-            },
-            prepare(failedJeSchedules) {
-                return { payload: { failedJeSchedules } };
-            },
-        },
-        fetchFailedJePostingsFailure: {
-            reducer(draft, action) {
-                // Keys are deliberately left alone. The schedules list clears its buckets on failure so an
-                // errored tab cannot read as "these are all the schedules there are", but this list is a
-                // set of outstanding problems -- showing the last known ones beside an error beats
-                // implying there are none.
-                draft.failedJePostings.fetchState = {
-                    fetchState: 'Error',
-                    error: action.payload.status,
-                };
-            },
-            prepare(status) {
-                return { payload: { status } };
-            },
-        },
         fetchJeSchedulesSuccess(draft, action) {
             const { jeSchedules, selectedPeriod, selectedPageTab, failedJeSchedules, accruedJeSchedules, oneTimeAccruals, refreshViewInBackground, } = action.payload;
             const periodTabKey = getJESchedulePeriodTabKey(selectedPageTab, toMonthYearPeriodId(selectedPeriod));
@@ -412,8 +358,6 @@ const expenseAutomationJESchedulesView = createSlice({
             reducer(draft, action) {
                 const { failedJeScheduleKey } = action.payload;
                 removeKeyFromEveryTabSlot(draft.failedJeScheduleTransactionKeysByPeriodAndTab, failedJeScheduleKey);
-                draft.failedJePostings.jeScheduleTransactionKeys =
-                    draft.failedJePostings.jeScheduleTransactionKeys.filter((jeScheduleKey) => jeScheduleKey !== failedJeScheduleKey);
             },
         },
         initializeJeScheduleLocalData: {
@@ -756,9 +700,6 @@ const expenseAutomationJESchedulesView = createSlice({
             draft.uiState.createdGroupCollapsed =
                 !draft.uiState.createdGroupCollapsed;
         },
-        toggleJEFailedGroupCollapsed(draft) {
-            draft.uiState.failedGroupCollapsed = !draft.uiState.failedGroupCollapsed;
-        },
         clearExpenseAutomationJESchedulesView(draft) {
             Object.assign(draft, initialState);
         },
@@ -769,7 +710,7 @@ const expenseAutomationJESchedulesView = createSlice({
         });
     },
 });
-export const { clearExpenseAutomationJESchedulesView, clearJeAccountSettingsLocalData, clearJeScheduleLocalData, clearSearchTransactionsForNewSchedule, createOneTimeAccrual, createOneTimeAccrualFailure, createOneTimeAccrualSuccess, ignoreOneTimeAccrual, oneTimeAccrualActionFailure, oneTimeAccrualActionSuccess, promoteOneTimeAccrual, revertJeSchedule, revertJeScheduleFailure, revertJeScheduleSuccess, revertOneTimeAccrual, fetchAccountSettingsListForAccountTypes, fetchJeSchedules, fetchFailedJePostings, fetchFailedJePostingsFailure, fetchFailedJePostingsSuccess, fetchJeSchedulesFailure, fetchJeSchedulesPage, fetchJeSchedulesSuccess, fetchOneTimeAccrual, fetchOneTimeAccrualFailure, fetchOneTimeAccrualSuccess, fetchRecommendationForAccountSettings, ignoreRecommendedJeSchedule, ignoreRecommendedJeScheduleFailure, ignoreRecommendedJeScheduleSuccess, initializeAccountSettingsView, initializeJeScheduleLocalData, initializeNewSchedule, removeFailedJeScheduleTransactionKey, removeJeOneTimeAccrualLocalData, removeJeScheduleLocalDataById, removeJeAccruedScheduleKey, removeJeScheduleTransactionKey, resetNewScheduleLocalData, retryJeSchedule, retryJeScheduleFailure, retryJeScheduleSuccess, saveAccountSettings, saveAccountSettingsFailure, saveAccountSettingsLocalData, saveAccountSettingsSuccess, saveNewSchedule, saveNewScheduleFailure, saveNewScheduleSuccess, searchTransactionsForNewSchedule, searchTransactionsForNewScheduleFailure, searchTransactionsForNewScheduleSuccess, toggleJECreatedGroupCollapsed, toggleJEFailedGroupCollapsed, toggleJEPendingGroupCollapsed, updateAccountSettingsListForAccountTypes, updateAccountSettingsListForAccountTypesFailure, updateJESchedulesUIState, updateJEScheduleTypeFilter, updateJeOneTimeAccrualLocalData, updateJeScheduleLocalDataById, updateJeScheduleTransactionKeys, updateNewScheduleLocalData, updateRecommendationForAccountSettings, updateRecommendationForAccountSettingsFailure, } = expenseAutomationJESchedulesView.actions;
+export const { clearExpenseAutomationJESchedulesView, clearJeAccountSettingsLocalData, clearJeScheduleLocalData, clearSearchTransactionsForNewSchedule, createOneTimeAccrual, createOneTimeAccrualFailure, createOneTimeAccrualSuccess, ignoreOneTimeAccrual, oneTimeAccrualActionFailure, oneTimeAccrualActionSuccess, promoteOneTimeAccrual, revertJeSchedule, revertJeScheduleFailure, revertJeScheduleSuccess, revertOneTimeAccrual, fetchAccountSettingsListForAccountTypes, fetchJeSchedules, fetchJeSchedulesFailure, fetchJeSchedulesPage, fetchJeSchedulesSuccess, fetchOneTimeAccrual, fetchOneTimeAccrualFailure, fetchOneTimeAccrualSuccess, fetchRecommendationForAccountSettings, ignoreRecommendedJeSchedule, ignoreRecommendedJeScheduleFailure, ignoreRecommendedJeScheduleSuccess, initializeAccountSettingsView, initializeJeScheduleLocalData, initializeNewSchedule, removeFailedJeScheduleTransactionKey, removeJeOneTimeAccrualLocalData, removeJeScheduleLocalDataById, removeJeAccruedScheduleKey, removeJeScheduleTransactionKey, resetNewScheduleLocalData, retryJeSchedule, retryJeScheduleFailure, retryJeScheduleSuccess, saveAccountSettings, saveAccountSettingsFailure, saveAccountSettingsLocalData, saveAccountSettingsSuccess, saveNewSchedule, saveNewScheduleFailure, saveNewScheduleSuccess, searchTransactionsForNewSchedule, searchTransactionsForNewScheduleFailure, searchTransactionsForNewScheduleSuccess, toggleJECreatedGroupCollapsed, toggleJEPendingGroupCollapsed, updateAccountSettingsListForAccountTypes, updateAccountSettingsListForAccountTypesFailure, updateJESchedulesUIState, updateJEScheduleTypeFilter, updateJeOneTimeAccrualLocalData, updateJeScheduleLocalDataById, updateJeScheduleTransactionKeys, updateNewScheduleLocalData, updateRecommendationForAccountSettings, updateRecommendationForAccountSettingsFailure, } = expenseAutomationJESchedulesView.actions;
 export default expenseAutomationJESchedulesView.reducer;
 const doUpdateRecommendationForAccountSettings = (draft, payload) => {
     const { prepaidExpensesRecommendations, fixedAssetsRecommendations, accruedExpensesRecommendations, } = mapAccountTypeRecommendationPayloadToAccountRecommendationByType(payload);

package/lib/esm/view/expenseAutomationView/selectors/jeSchedulesViewSelector.js

@@ -210,7 +210,7 @@ export function getExpenseAutomationJESchedulesView(state) {
     const accruedSchedules = [];
     const oneTimeAccruals = [];
     const { accountState, accountListState, classState, classListState, expenseAutomationJESchedulesViewState, expenseAutomationViewState, monthEndCloseChecksState, } = state;
-    const { jeScheduleTransactionKeysByPeriodAndTab, jeScheduleAccruedKeysByPeriodAndTab, jeScheduleOneTimeAccrualKeysByPeriodAndTab, failedJePostings, jeScheduleLocalDataById, postStatusById, ignoreStatusById, revertStatusById, oneTimeAccrualActionStatusById, uiState, error, fetchState, refreshStatus, newSchedule, } = expenseAutomationJESchedulesViewState;
+    const { jeScheduleTransactionKeysByPeriodAndTab, jeScheduleAccruedKeysByPeriodAndTab, jeScheduleOneTimeAccrualKeysByPeriodAndTab, failedJeScheduleTransactionKeysByPeriodAndTab, jeScheduleLocalDataById, postStatusById, ignoreStatusById, revertStatusById, oneTimeAccrualActionStatusById, uiState, error, fetchState, refreshStatus, newSchedule, } = expenseAutomationJESchedulesViewState;
     const accountSettingsView = getJEAccountSettingsView(state);
     const newScheduleView = newSchedule.selectedDetailScheduleType === 'fixed_assets' ||
         newSchedule.selectedDetailScheduleType === 'prepaid_expenses'
@@ -249,11 +249,15 @@ export function getExpenseAutomationJESchedulesView(state) {
     const jeScheduleTransactionKeysForSelectedTab = selectedPeriodTabKey != null
         ? jeScheduleTransactionKeysByPeriodAndTab[selectedPeriodTabKey]
         : undefined;
+    const failedJeScheduleTransactionKeysForSelectedTab = selectedPeriodTabKey != null
+        ? failedJeScheduleTransactionKeysByPeriodAndTab[selectedPeriodTabKey]
+        : undefined;
     // Distinguishes "this tab has never been fetched for this period" from "fetched and genuinely
     // empty". Without it the page cannot tell a first visit from a real empty state, and renders an
     // empty table where it should render a skeleton.
     const hasLoadedForSelectedTab = jeScheduleTransactionKeysForSelectedTab != null;
     const jeScheduleTransactionKeys = jeScheduleTransactionKeysForSelectedTab ?? [];
+    const failedJeScheduleTransactionKeys = failedJeScheduleTransactionKeysForSelectedTab ?? [];
     const jeScheduleAccruedKeys = (selectedPeriodTabKey != null
         ? jeScheduleAccruedKeysByPeriodAndTab[selectedPeriodTabKey]
         : undefined) ?? [];
@@ -276,16 +280,11 @@ export function getExpenseAutomationJESchedulesView(state) {
             accruedSchedules.push(accruedScheduleDetails);
         }
     });
-    // Sourced from the tenant-wide bucket, not the per-period one: a failed posting belongs to no
-    // close month, and windowing it is what kept older failures off the only tab that can resolve
-    // them.
-    failedJePostings.jeScheduleTransactionKeys.forEach((jeScheduleKey) => {
+    failedJeScheduleTransactionKeys.forEach((jeScheduleKey) => {
         const jeScheduleDetails = getJEScheduledTransactionByJEScheduleTransactionKey(jeScheduleKey, state);
         failedJeScheduledTransaction.push(jeScheduleDetails);
     });
     const { sortKey, sortOrder, selectedJETypeFilter } = uiState;
-    const matchesTypeFilter = (schedule) => selectedJETypeFilter == null ||
-        getJEScheduleRowType(schedule) === selectedJETypeFilter;
     const unsortedResolveSchedules = [];
     failedJeScheduledTransaction.forEach((schedule) => {
         schedule.scheduledJournalEntry.forEach((journalEntry) => {
@@ -295,7 +294,10 @@ export function getExpenseAutomationJESchedulesView(state) {
             });
         });
     });
-    const resolveSchedules = sortJEScheduledTransactions(unsortedResolveSchedules.filter(matchesTypeFilter), sortKey, sortOrder);
+    const resolveSchedules = sortJEScheduledTransactions(unsortedResolveSchedules, sortKey, sortOrder);
+    const validResolveForPending = unsortedResolveSchedules.filter((r) => jeScheduleLocalDataById[r.scheduledJournalEntry.scheduledJournalEntryID] != null);
+    const matchesTypeFilter = (schedule) => selectedJETypeFilter == null ||
+        getJEScheduleRowType(schedule) === selectedJETypeFilter;
     const isCreatedStatus = (schedule) => {
         // An accrual is "created" once it is not review work: posted, reversing, reversed, or in a
         // transient posting claim.
@@ -313,6 +315,7 @@ export function getExpenseAutomationJESchedulesView(state) {
     ];
     const pendingReviewSchedules = sortJEScheduledTransactions([
         ...allScheduleRows.filter((schedule) => isPendingReviewRow(schedule) && matchesTypeFilter(schedule)),
+        ...validResolveForPending,
     ], sortKey, sortOrder);
     const createdSchedules = sortJEScheduledTransactions(allScheduleRows.filter((schedule) => isCreatedStatus(schedule) && matchesTypeFilter(schedule)), sortKey, sortOrder);
     // KPI summary — derived from unfiltered schedules so counts are always accurate
@@ -431,9 +434,6 @@ export function getExpenseAutomationJESchedulesView(state) {
         kpiSummary,
         pendingReviewSchedules,
         pendingReviewTotal,
-        failedPostings: resolveSchedules,
-        // Deprecated alias of failedPostings. Still read by the section's footer-form effect and by
-        // app-ui analytics; remove once both are repointed.
         resolveSchedules: resolveSchedules,
         accountSettingsView,
         newScheduleView,

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCatalogItemFormLocalData } from './invoicingCatalogItemFormHelper';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -21,7 +22,7 @@ const editInvoicingCatalogItemDetailView = createSlice({
         updateInvoicingCatalogItemFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newItemDraft = localData;
@@ -64,6 +65,7 @@ const editInvoicingCatalogItemDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingCatalogItemFormLocalData);
         },
         fetchInvoicingCatalogItemDetailPage: {
             reducer() {
@@ -79,14 +81,10 @@ const editInvoicingCatalogItemDetailView = createSlice({
                 };
             },
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late-arriving refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingCatalogItemFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            applyInvoicingFormDraftSeed(draft.editDraftById, id, localData);
         },
         runInvoicingCatalogPlanAction(draft, action) {
             draft.actionStateById[action.payload.id] = {
@@ -125,13 +123,23 @@ const editInvoicingCatalogItemDetailView = createSlice({
                 error: action.payload.error,
             };
         },
-        resetEditInvoicingCatalogItemDetailView(draft) {
+        /**
+         * Discard a form's draft — the catalog item's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * catalog item's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCatalogItemDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedItemId = undefined;
             draft.savedKind = undefined;
-            draft.editDraftById = {};
-            draft.newItemDraft = { ...initialInvoicingCatalogItemFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newItemDraft = { ...initialInvoicingCatalogItemFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewSelector.js

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
 import { getInvoicingPlanById, getInvoicingPlansByIds, } from '../../../entity/invoicing/plan/planSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { getInvoicingQboView, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
 import { INVOICING_CATALOG_APPLICABILITY_VALUES, INVOICING_CATALOG_PRICING_MODEL_VALUES, INVOICING_CATALOG_PRORATION_VALUES, INVOICING_CATALOG_TIER_TYPE_VALUES, initialInvoicingCatalogItemFormLocalData, } from './invoicingCatalogItemFormHelper';
 export const getEditInvoicingCatalogItemDetailViewState = (state) => ({
@@ -52,7 +53,7 @@ export const getInvoicingCatalogItemFormView = (state, id) => {
     // lands. Until then the page is showing its skeleton, so the blank shape here
     // is never rendered.
     const localData = id != null
-        ? (editDraftById[id] ?? initialInvoicingCatalogItemFormLocalData)
+        ? getInvoicingFormDraftLocalData(editDraftById, id, initialInvoicingCatalogItemFormLocalData)
         : newItemDraft;
     const allApplicableItemOptions = getInvoicingApplicableCatalogItemOptions(state);
     const applicableItemOptions = id != null
@@ -90,6 +91,8 @@ export const getInvoicingCatalogItemFormView = (state, id) => {
         catalogProductLifecycleActionOptions,
         recordState,
         fieldHelp: invoicingFieldHelpForGroup(state, 'catalog'),
+        isFormLoading: isInvoicingAccountingPickerDataLoading(state) ||
+            isInvoicingFormDraftPending(editDraftById, id),
         isQboPickerDataLoading: isInvoicingAccountingPickerDataLoading(state),
         qboAccountHierarchy: qboView?.nestedAccountHierarchy ?? [],
         qboClassHierarchy: qboView?.nestedClassHierarchy ?? [],

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/saveInvoicingCatalogItemEpic.js

@@ -17,8 +17,9 @@ export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actio
     // class become the records the service stores. Price points ride along
     // nested, so the detail page and the create/edit form share one request.
     const viewState = state.editInvoicingCatalogItemDetailViewState;
-    const localData = (id != null ? viewState.editDraftById[id] : viewState.newItemDraft) ??
-        viewState.newItemDraft;
+    const localData = (id != null
+        ? viewState.editDraftById[id]?.localData
+        : viewState.newItemDraft) ?? viewState.newItemDraft;
     const data = localDataToSaveInvoicingCatalogItemPayload(localData, id == null, accountingLookup);
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
     const path = id != null

package/lib/esm/view/invoicing/editInvoicingCatalogItemDetailView/seedInvoicingCatalogItemFormDraftEpic.js

@@ -1,16 +1,35 @@
 import { EMPTY, of } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
 import { getInvoicingPlanById } from '../../../entity/invoicing/plan/planSelector';
-import { seedInvoicingCatalogItemFormDraft, updateInvoicingCatalogItemDetail, } from './editInvoicingCatalogItemDetailViewReducer';
+import { fetchInvoicingCatalogItemDetailPage, seedInvoicingCatalogItemFormDraft, updateInvoicingCatalogItemDetail, } from './editInvoicingCatalogItemDetailViewReducer';
 import { entityToInvoicingCatalogItemFormLocalData } from './invoicingCatalogItemFormHelper';
 /**
- * Seeds the edit draft from the record the moment the detail fetch lands, so
- * the form has its values before it mounts. The reducer ignores the seed when a
- * draft already exists, which is what stops a background refetch from
- * overwriting edits in progress.
+ * Seeds the edit draft from the record, so the form has its values before it
+ * mounts. The reducer ignores a seed once the draft holds the record, which is
+ * what stops a background refetch from overwriting edits in progress.
+ *
+ * Opening the page counts as a trigger, not just the detail response: the page
+ * fetch is cache-guarded, so re-opening a form for a record already loaded this
+ * session issues no request at all — and a draft cleared in between (by a save
+ * or a cancel) would have nothing left to seed it.
  */
-export const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actions$.pipe(filter(updateInvoicingCatalogItemDetail.match), withLatestFrom(state$), mergeMap(([action, state]) => {
-    const { id } = action.payload;
+export const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actions$.pipe(filter((action) => updateInvoicingCatalogItemDetail.match(action) ||
+    fetchInvoicingCatalogItemDetailPage.match(action)), withLatestFrom(state$), mergeMap(([action, state]) => {
+    const id = action.payload.id;
+    if (id == null) {
+        return EMPTY;
+    }
+    // The entity alone does not say the whole record is loaded — the list
+    // endpoints merge their own list-shaped rows into the same store. Only a
+    // completed detail load does, which is also exactly when the page's
+    // cache-guarded fetch issues no request and this is the sole seed.
+    if (fetchInvoicingCatalogItemDetailPage.match(action) &&
+        state.editInvoicingCatalogItemDetailViewState.recordStateById[id]
+            ?.fetchState !== 'Completed') {
+        return EMPTY;
+    }
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
     const plan = getInvoicingPlanById(state.invoicingPlanState, id);
     if (plan == null) {
         return EMPTY;

package/lib/esm/view/invoicing/editInvoicingCouponDetailView/editInvoicingCouponDetailViewReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCouponFormLocalData, } from './editInvoicingCouponDetailViewState';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -20,7 +21,7 @@ const editInvoicingCouponDetailView = createSlice({
         updateInvoicingCouponFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newCouponDraft = localData;
@@ -85,15 +86,12 @@ const editInvoicingCouponDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.status,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingCouponFormLocalData);
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingCouponFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            applyInvoicingFormDraftSeed(draft.editDraftById, id, localData);
         },
         runInvoicingDiscountAction(draft, action) {
             draft.actionStateById[action.payload.id] = {
@@ -113,12 +111,22 @@ const editInvoicingCouponDetailView = createSlice({
                 error: action.payload.error,
             };
         },
-        resetEditInvoicingCouponDetailView(draft) {
+        /**
+         * Discard a form's draft — the coupon's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * coupon's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCouponDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedCouponId = undefined;
-            draft.editDraftById = {};
-            draft.newCouponDraft = { ...initialInvoicingCouponFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCouponDraft = { ...initialInvoicingCouponFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

package/lib/esm/view/invoicing/editInvoicingCouponDetailView/editInvoicingCouponDetailViewSelector.js

@@ -2,6 +2,7 @@ import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState'
 import { getInvoicingCouponById } from '../../../entity/invoicing/coupon/couponSelector';
 import { toInvoicingFormOption, toInvoicingQboAccountMappingSlot, } from '../../../entity/invoicing/invoicingCommonPayload';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { getInvoicingQboView, invoicingAccountsForQboAccountTypes, invoicingQboAccountByQboId, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
 import { getInvoicingSettings, getInvoicingSettingsFetchState, } from '../settingsView/settingsViewSelector';
 import { initialInvoicingCouponFormLocalData, invoicingCouponDiscountsAccountIdForCreate, } from './editInvoicingCouponDetailViewState';
@@ -41,6 +42,7 @@ export const getEditInvoicingCouponDetailViewState = (state, couponId) => {
             { error: undefined, fetchState: configFetchState },
         ]),
         recordState,
+        isFormLoading: isInvoicingFormDraftPending(state.editInvoicingCouponDetailViewState.editDraftById, couponId),
         coupon,
         discountsAccountName: invoicingQboAccountByQboId(state, coupon?.discountsAccountId)?.accountName,
         savedCouponId,
@@ -70,7 +72,7 @@ export const getInvoicingCouponFormView = (state, couponId) => {
     // `seedInvoicingCouponFormDraftEpic` when the detail load lands. Until then
     // the page is showing its skeleton.
     const localData = couponId != null
-        ? (editDraftById[couponId] ?? initialInvoicingCouponFormLocalData)
+        ? getInvoicingFormDraftLocalData(editDraftById, couponId, initialInvoicingCouponFormLocalData)
         : newCouponDraft;
     const { billingPeriodUnitOptions, discountApplyOnOptions, discountDurationTypeOptions, discountTypeOptions, qboAccountMappingKindOptions, } = getInvoicingConfigView(state);
     const isQboConnected = isInvoicingQboConnected(state);

package/lib/esm/view/invoicing/editInvoicingCouponDetailView/saveInvoicingCouponEpic.js

@@ -20,7 +20,7 @@ export const saveInvoicingCouponEpic = (actions$, state$, zeniAPI) => actions$.p
             const state = state$.value;
             const viewState = state.editInvoicingCouponDetailViewState;
             const draft = (id != null
-                ? viewState.editDraftById[id]
+                ? viewState.editDraftById[id]?.localData
                 : viewState.newCouponDraft) ?? viewState.newCouponDraft;
             // The create default is resolved here as well as in the form view,
             // so a create that never touched the picker still persists the

package/lib/esm/view/invoicing/editInvoicingCouponDetailView/seedInvoicingCouponFormDraftEpic.js

@@ -1,16 +1,35 @@
 import { EMPTY, of } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
 import { getInvoicingCouponById } from '../../../entity/invoicing/coupon/couponSelector';
-import { seedInvoicingCouponFormDraft, updateInvoicingCouponDetail, } from './editInvoicingCouponDetailViewReducer';
+import { fetchInvoicingCouponDetailPage, seedInvoicingCouponFormDraft, updateInvoicingCouponDetail, } from './editInvoicingCouponDetailViewReducer';
 import { entityToInvoicingCouponFormLocalData } from './editInvoicingCouponDetailViewState';
 /**
- * Seeds the edit draft from the record the moment the detail fetch lands, so
- * the form has its values before it mounts. The reducer ignores the seed when a
- * draft already exists, which is what stops a background refetch from
- * overwriting edits in progress.
+ * Seeds the edit draft from the record, so the form has its values before it
+ * mounts. The reducer ignores a seed once the draft holds the record, which is
+ * what stops a background refetch from overwriting edits in progress.
+ *
+ * Opening the page counts as a trigger, not just the detail response: the page
+ * fetch is cache-guarded, so re-opening a form for a record already loaded this
+ * session issues no request at all — and a draft cleared in between (by a save
+ * or a cancel) would have nothing left to seed it.
  */
-export const seedInvoicingCouponFormDraftEpic = (actions$, state$) => actions$.pipe(filter(updateInvoicingCouponDetail.match), withLatestFrom(state$), mergeMap(([action, state]) => {
+export const seedInvoicingCouponFormDraftEpic = (actions$, state$) => actions$.pipe(filter((action) => updateInvoicingCouponDetail.match(action) ||
+    fetchInvoicingCouponDetailPage.match(action)), withLatestFrom(state$), mergeMap(([action, state]) => {
     const { id } = action.payload;
+    if (id == null) {
+        return EMPTY;
+    }
+    // The entity alone does not say the whole record is loaded — the list
+    // endpoints merge their own list-shaped rows into the same store. Only a
+    // completed detail load does, which is also exactly when the page's
+    // cache-guarded fetch issues no request and this is the sole seed.
+    if (fetchInvoicingCouponDetailPage.match(action) &&
+        state.editInvoicingCouponDetailViewState.recordStateById[id]
+            ?.fetchState !== 'Completed') {
+        return EMPTY;
+    }
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
     const coupon = getInvoicingCouponById(state.invoicingCouponState, id);
     if (coupon == null) {
         return EMPTY;

package/lib/esm/view/invoicing/editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCustomerFormLocalData } from './invoicingCustomerFormConfig';
 export const initialState = {
     emailPreviewFetchState: { fetchState: 'Not-Started', error: undefined },
@@ -123,20 +124,17 @@ const editInvoicingCustomerDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.status,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingCustomerFormLocalData);
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingCustomerFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            applyInvoicingFormDraftSeed(draft.editDraftById, id, localData);
         },
         updateInvoicingCustomerFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newCustomerDraft = localData;
@@ -161,12 +159,22 @@ const editInvoicingCustomerDetailView = createSlice({
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
-        resetEditInvoicingCustomerDetailView(draft) {
+        /**
+         * Discard a form's draft — the customer's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * customer's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCustomerDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedCustomerId = undefined;
-            draft.editDraftById = {};
-            draft.newCustomerDraft = { ...initialInvoicingCustomerFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCustomerDraft = { ...initialInvoicingCustomerFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingCustomerAddressEpic.
         initializeInvoicingCustomerAddress: {