@zeniai/client-epic-state 5.2.48 → 5.2.49-betaAK0

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

@@ -102,32 +102,27 @@ const expenseAutomationReconciliationView = createSlice({
                         draft.selectedTab = 'review';
                         draft.selectedAccountId = action.payload.accountId;
                     }
-                    const accountReconciliationRecords = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(action.payload.selectedPeriod)];
-                    const { transactionFetchState } = accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId];
-                    if (transactionFetchState.fetchState !== 'Completed' ||
+                    const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(action.payload.selectedPeriod)]?.reconciliationByAccountID[action.payload.accountId];
+                    if (accountRecon == null) {
+                        return;
+                    }
+                    if (accountRecon.transactionFetchState.fetchState !== 'Completed' ||
                         action.payload.cacheOverride === true) {
-                        const data = accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId];
                         if (action.payload.refreshViewInBackground === true) {
-                            accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId] = {
-                                ...data,
-                                refreshStatus: {
-                                    fetchState: 'In-Progress',
-                                    error: undefined,
-                                },
-                                accountId: action.payload.accountId,
-                                reconciliationId: undefined,
+                            accountRecon.refreshStatus = {
+                                fetchState: 'In-Progress',
+                                error: undefined,
                             };
+                            accountRecon.accountId = action.payload.accountId;
+                            accountRecon.reconciliationId = undefined;
                         }
                         else {
-                            accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId] = {
-                                ...data,
-                                transactionFetchState: {
-                                    fetchState: 'In-Progress',
-                                    error: undefined,
-                                },
-                                accountId: action.payload.accountId,
-                                reconciliationId: undefined,
+                            accountRecon.transactionFetchState = {
+                                fetchState: 'In-Progress',
+                                error: undefined,
                             };
+                            accountRecon.accountId = action.payload.accountId;
+                            accountRecon.reconciliationId = undefined;
                         }
                     }
                 }
@@ -179,14 +174,17 @@ const expenseAutomationReconciliationView = createSlice({
                 }
             }
             else {
-                const accountReconciliationRecords = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(action.payload.selectedPeriod)];
+                const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(action.payload.selectedPeriod)]?.reconciliationByAccountID[action.payload.accountId];
+                if (accountRecon == null) {
+                    return;
+                }
                 if (action.payload.refreshViewInBackground === true) {
-                    accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId].refreshStatus.error = action.payload.error;
-                    accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId].refreshStatus.fetchState = 'Error';
+                    accountRecon.refreshStatus.error = action.payload.error;
+                    accountRecon.refreshStatus.fetchState = 'Error';
                 }
                 else {
-                    accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId].transactionFetchState.error = action.payload.error;
-                    accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId].transactionFetchState.fetchState = 'Error';
+                    accountRecon.transactionFetchState.error = action.payload.error;
+                    accountRecon.transactionFetchState.fetchState = 'Error';
                 }
             }
         },
@@ -391,8 +389,11 @@ const expenseAutomationReconciliationView = createSlice({
         },
         setStatementParseInProgress: (draft, action) => {
             const { accountId, selectedPeriod, statementParseInProgress } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].statementParseInProgress =
-                statementParseInProgress;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementParseInProgress = statementParseInProgress;
         },
         setStatementProcessingDismissedToBackground: (draft, action) => {
             const { accountId, selectedPeriod, dismissedToBackground } = action.payload;
@@ -476,15 +477,23 @@ const expenseAutomationReconciliationView = createSlice({
         },
         uploadAccountStatementSuccess: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].statementUploadStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementUploadStatus = {
                 fetchState: 'Completed',
                 error: undefined,
             };
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].statementParseInProgress = true;
+            accountRecon.statementParseInProgress = true;
         },
         uploadAccountStatementFailure: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].statementUploadStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementUploadStatus = {
                 fetchState: 'Error',
                 error: action.payload.error,
             };
@@ -677,23 +686,34 @@ const expenseAutomationReconciliationView = createSlice({
         },
         reparseStatementFailure: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].reparseStatementStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.reparseStatementStatus = {
                 fetchState: 'Error',
                 error: action.payload.error,
             };
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].statementProcessingFailed = true;
+            accountRecon.statementProcessingFailed = true;
         },
         resetReparseStatementStatus: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].reparseStatementStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.reparseStatementStatus = {
                 fetchState: 'Not-Started',
                 error: undefined,
             };
         },
         updateParsedStatementData: (draft, action) => {
             const { accountId, selectedPeriod, parsedStatementData } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].parsedStatementData =
-                parsedStatementData;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.parsedStatementData = parsedStatementData;
         },
         updateStatementUpdateLocalData: (draft, action) => {
             const { accountId, selectedPeriod, statementUpdateLocalData, statementUploadId, } = action.payload;
@@ -819,17 +839,21 @@ const expenseAutomationReconciliationView = createSlice({
         },
         updateAccountReconciliationLocalData: (draft, action) => {
             const { accountId, selectedPeriod, localData } = action.payload;
-            const oldLocalData = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].localData;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            const oldLocalData = accountRecon.localData;
             if (oldLocalData == null) {
-                draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].localData = localData;
+                accountRecon.localData = localData;
             }
             else {
-                draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].localData = {
+                accountRecon.localData = {
                     ...oldLocalData,
                     ...localData,
                 };
             }
-            draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId].localData = {
+            accountRecon.localData = {
                 ...oldLocalData,
                 ...localData,
             };
@@ -1119,7 +1143,10 @@ function updateAllReconciliation(draft, accounts, selectedPeriod, reconciliation
     }
 }
 function updateReconciliationByAccountID(draft, accounts, selectedPeriod, accountId, reconciliationData, refreshViewInBackground) {
-    const oldRecord = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId];
+    const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)]?.reconciliationByAccountID[accountId];
+    if (accountRecon == null) {
+        return;
+    }
     const oldConnectionStatus = draft.accountConnectionStatusByAccountID[accountId];
     draft.accountConnectionStatusByAccountID[accountId] = {
         status: toBankStatusCodeType(reconciliationData.bank_status.code),
@@ -1129,21 +1156,17 @@ function updateReconciliationByAccountID(draft, accounts, selectedPeriod, accoun
             : false,
         paymentAccountId: accounts.payment_account_id ?? undefined,
     };
-    const statementParseInProgress = resolveStatementParseInProgressAfterFetch(oldRecord, reconciliationData);
+    const statementParseInProgress = resolveStatementParseInProgressAfterFetch(accountRecon, reconciliationData);
+    accountRecon.reconciliationId =
+        reconciliationData.reconciliation_id ?? undefined;
+    accountRecon.statementParseInProgress = statementParseInProgress;
     if (refreshViewInBackground === true) {
-        draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId] = {
-            ...oldRecord,
-            reconciliationId: reconciliationData.reconciliation_id ?? undefined,
-            refreshStatus: { fetchState: 'Completed', error: undefined },
-            statementParseInProgress,
-        };
+        accountRecon.refreshStatus = { fetchState: 'Completed', error: undefined };
     }
     else {
-        draft.accountReconciliationRecordsBySelectedPeriod[toMonthYearPeriodId(selectedPeriod)].reconciliationByAccountID[accountId] = {
-            ...oldRecord,
-            statementParseInProgress,
-            reconciliationId: reconciliationData.reconciliation_id ?? undefined,
-            transactionFetchState: { fetchState: 'Completed', error: undefined },
+        accountRecon.transactionFetchState = {
+            fetchState: 'Completed',
+            error: undefined,
         };
     }
 }
@@ -1173,7 +1196,11 @@ const updateExcludedAccountExclusionInfo = (draft, account) => {
     };
 };
 const updateReconciliationByAccountIDOnIncludeAccount = (draft, accountId, reconciliation, monthYearPeriodId) => {
-    draft.accountReconciliationRecordsBySelectedPeriod[monthYearPeriodId].reconciliationByAccountID[accountId] = {
+    const accountReconciliationRecords = draft.accountReconciliationRecordsBySelectedPeriod[monthYearPeriodId];
+    if (accountReconciliationRecords == null) {
+        return;
+    }
+    accountReconciliationRecords.reconciliationByAccountID[accountId] = {
         accountId,
         reconciliationId: reconciliation.reconciliation_id ?? undefined,
         transactionFetchState: { fetchState: 'Not-Started', error: undefined },

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,18 +1,27 @@
 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;
-    const plan = getInvoicingPlanById(state.invoicingPlanState, id);
-    if (plan == null) {
+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;
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
+    const plan = id != null
+        ? getInvoicingPlanById(state.invoicingPlanState, id)
+        : undefined;
+    if (id == null || plan == null) {
         return EMPTY;
     }
     return of(seedInvoicingCatalogItemFormDraft({

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,17 +1,26 @@
 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;
-    const coupon = getInvoicingCouponById(state.invoicingCouponState, id);
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
+    const coupon = id != null
+        ? getInvoicingCouponById(state.invoicingCouponState, id)
+        : undefined;
     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: {

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

@@ -5,6 +5,7 @@ import { invoicingCustomerPaymentMethods } from '../../../entity/invoicing/invoi
 import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingPaymentLinkSendState, getInvoicingPaymentMethodSaveState, getInvoicingPlaidLinkToken, getInvoicingPlaidLinkTokenFetchState, getInvoicingSentPaymentLinkEmail, getInvoicingSentPaymentLinkMagicUrl, getInvoicingSetupIntent, getInvoicingSetupIntentFetchState, } from '../customerPaymentMethod/customerPaymentMethodSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { isStripeConnectedFromSettings } from '../settingsView/invoicingSettingsHelpers';
 import { getInvoicingSettings } from '../settingsView/settingsViewSelector';
 import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE, initialInvoicingCustomerFormLocalData, } from './invoicingCustomerFormConfig';
@@ -59,8 +60,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
     // `seedInvoicingCustomerFormDraftEpic` when the detail load lands. Until then
     // the page is showing its skeleton.
     const localData = invoicingCustomerID != null
-        ? (editDraftById[invoicingCustomerID] ??
-            initialInvoicingCustomerFormLocalData)
+        ? getInvoicingFormDraftLocalData(editDraftById, invoicingCustomerID, initialInvoicingCustomerFormLocalData)
         : newCustomerDraft;
     // Billing address is captured via the shared Address screen and seeded there
     // (from the address entity) on detail load, so the formatted label comes from
@@ -78,6 +78,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         ? { error: undefined, fetchState: 'Completed' }
         : (state.editInvoicingCustomerDetailViewState.recordStateById[invoicingCustomerID] ?? { error: undefined, fetchState: 'Not-Started' });
     const { emailPreview, emailPreviewCustomerId, emailPreviewFetchState } = state.editInvoicingCustomerDetailViewState;
+    const isFormLoading = isInvoicingFormDraftPending(editDraftById, invoicingCustomerID);
     return {
         // A preview cached for another customer is not this screen's.
         emailPreview: emailPreviewCustomerId === invoicingCustomerID ? emailPreview : undefined,
@@ -92,6 +93,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         promotionalCreditSubmitState: state.editInvoicingCustomerDetailViewState.promotionalCreditSubmitState,
         record: getInvoicingCustomerRecord(state, invoicingCustomerID),
         fieldHelp: invoicingFieldHelpForGroup(state, 'customer'),
+        isFormLoading,
         customerTypeOptions,
         localData,
         mode,

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

@@ -16,7 +16,7 @@ export const saveInvoicingCustomerEpic = (actions$, state$, zeniAPI) => actions$
     const rootState = state$.value;
     const viewState = rootState.editInvoicingCustomerDetailViewState;
     const localData = (id != null
-        ? viewState.editDraftById[id]
+        ? viewState.editDraftById[id]?.localData
         : viewState.newCustomerDraft) ?? viewState.newCustomerDraft;
     // Billing address captured via the shared Address screen is sent as an
     // object in the payload; the backend creates it and returns its id