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

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewReducer.js

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -65,15 +66,12 @@ const editInvoicingSubscriptionDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingSubscriptionFormLocalData);
         },
-        /**
-         * 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`. */
         seedInvoicingSubscriptionFormDraft(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);
         },
         fetchInvoicingSubscriptionFormPage: {
             reducer() {
@@ -87,7 +85,7 @@ const editInvoicingSubscriptionDetailView = createSlice({
         updateInvoicingSubscriptionFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newSubscriptionDraft = localData;
@@ -112,14 +110,24 @@ const editInvoicingSubscriptionDetailView = createSlice({
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
-        resetEditInvoicingSubscriptionDetailView(draft) {
+        /**
+         * Discard a form's draft — the subscription's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * subscription's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingSubscriptionDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedSubscriptionId = undefined;
-            draft.editDraftById = {};
-            draft.newSubscriptionDraft = {
-                ...initialInvoicingSubscriptionFormLocalData,
-            };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newSubscriptionDraft = {
+                    ...initialInvoicingSubscriptionFormLocalData,
+                };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingSubscriptionAddressEpic.
         initializeInvoicingSubscriptionAddress: {

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewSelector.js

@@ -5,6 +5,7 @@ import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
 import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
 export const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptionID) => {
@@ -33,8 +34,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
     // `seedInvoicingSubscriptionFormDraftEpic` when the detail load lands. Until
     // then the page is showing its skeleton.
     const localData = invoicingSubscriptionID != null
-        ? (editDraftById[invoicingSubscriptionID] ??
-            initialInvoicingSubscriptionFormLocalData)
+        ? getInvoicingFormDraftLocalData(editDraftById, invoicingSubscriptionID, initialInvoicingSubscriptionFormLocalData)
         : newSubscriptionDraft;
     // Shipping address is captured via the shared Address screen and seeded there
     // (looked up in the shared address store by `shippingAddressId`) on detail
@@ -65,6 +65,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
         subscriptionLifecycleActionOptions: configState.subscriptionLifecycleActionOptions,
         subscriptionMetadataEditAllowedFromStatuses: configState.subscriptionMetadataEditAllowedFromStatuses,
         recordState,
+        isFormLoading: isInvoicingFormDraftPending(editDraftById, invoicingSubscriptionID),
         fieldHelp: invoicingFieldHelpForGroup(state, 'subscription'),
         coupons: getInvoicingCouponListItems(state),
         customers: getInvoicingCustomerListView(state).customers,

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/fetchInvoicingSubscriptionFormPageEpic.js

@@ -16,8 +16,11 @@ export const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pip
     const { subscriptionId } = action.payload;
     const pageActions = [
         fetchInvoicingCustomerList({ filters: {}, keepExistingListItems: false }),
+        // Plans only: the form's plan picker is the one consumer, and an
+        // unfiltered list would replace the store's plans with every catalog
+        // item.
         fetchInvoicingCatalogPlanList({
-            filters: {},
+            filters: { type: 'plan' },
             keepExistingListItems: false,
         }),
         fetchInvoicingCouponList({ filters: {}, keepExistingListItems: false }),

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/saveInvoicingSubscriptionEpic.js

@@ -17,7 +17,7 @@ export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => acti
     const rootState = state$.value;
     const viewState = rootState.editInvoicingSubscriptionDetailViewState;
     const localData = (id != null
-        ? viewState.editDraftById[id]
+        ? viewState.editDraftById[id]?.localData
         : viewState.newSubscriptionDraft) ?? viewState.newSubscriptionDraft;
     // Shipping address captured via the shared Address screen is sent as an
     // object in the payload (same pattern as the customer save flow).

package/lib/esm/view/invoicing/editInvoicingSubscriptionDetailView/seedInvoicingSubscriptionFormDraftEpic.js

@@ -1,18 +1,27 @@
 import { EMPTY, of } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
-import { seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, } from './editInvoicingSubscriptionDetailViewReducer';
+import { fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, } from './editInvoicingSubscriptionDetailViewReducer';
 import { getInvoicingSubscriptionById } from './invoicingSubscriptionDetailHelper';
 import { entityToInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 /**
- * 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 seedInvoicingSubscriptionFormDraftEpic = (actions$, state$) => actions$.pipe(filter(updateInvoicingSubscriptionDetail.match), withLatestFrom(state$), mergeMap(([action, state]) => {
-    const { id } = action.payload;
-    const subscription = getInvoicingSubscriptionById(state, id);
-    if (subscription == null) {
+export const seedInvoicingSubscriptionFormDraftEpic = (actions$, state$) => actions$.pipe(filter((action) => updateInvoicingSubscriptionDetail.match(action) ||
+    fetchInvoicingSubscriptionFormPage.match(action)), withLatestFrom(state$), mergeMap(([action, state]) => {
+    const id = updateInvoicingSubscriptionDetail.match(action)
+        ? action.payload.id
+        : action.payload.subscriptionId;
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
+    const subscription = id != null ? getInvoicingSubscriptionById(state, id) : undefined;
+    if (id == null || subscription == null) {
         return EMPTY;
     }
     return of(seedInvoicingSubscriptionFormDraft({

package/lib/esm/view/invoicing/invoicingFormDraft.js

@@ -0,0 +1,56 @@
+/**
+ * The form's own write. Keeps the status: an edit on top of a seeded draft is
+ * still the record's draft, and an edit made before the record arrived must not
+ * pass for one.
+ */
+export function applyInvoicingFormDraftEdit(draftById, id, localData) {
+    draftById[id] = {
+        fetchState: draftById[id]?.fetchState ?? 'Not-Started',
+        localData,
+    };
+}
+/**
+ * Fill the draft from the loaded record, once. A second seed is ignored so a
+ * late refetch cannot overwrite edits in progress — but a draft the form wrote
+ * before the record landed is replaced, since it was never the record's.
+ */
+export function applyInvoicingFormDraftSeed(draftById, id, localData) {
+    if (draftById[id]?.fetchState === 'Completed') {
+        return;
+    }
+    draftById[id] = { fetchState: 'Completed', localData };
+}
+/**
+ * Stand the draft up blank when the record's fetch fails, so the form renders
+ * instead of waiting behind a skeleton that will never resolve. A draft that
+ * already exists is left alone: a background refetch failing is no reason to
+ * discard what the user has.
+ */
+export function applyInvoicingFormDraftFailure(draftById, id, blankLocalData) {
+    if (draftById[id] != null) {
+        return;
+    }
+    draftById[id] = { fetchState: 'Error', localData: blankLocalData };
+}
+/** The draft's values, or the blank form when nothing is drafted yet. */
+export function getInvoicingFormDraftLocalData(draftById, id, blankLocalData) {
+    if (id == null) {
+        return blankLocalData;
+    }
+    return draftById[id]?.localData ?? blankLocalData;
+}
+/**
+ * Whether the form should still be showing its skeleton — the record has
+ * neither reached the draft nor failed trying.
+ *
+ * Settles once and stays settled, which is what keeps a later refetch from
+ * swapping a form the user is typing into back for a skeleton. Create mode
+ * (no id) has no record to wait for.
+ */
+export function isInvoicingFormDraftPending(draftById, id) {
+    if (id == null) {
+        return false;
+    }
+    const fetchState = draftById[id]?.fetchState;
+    return fetchState !== 'Completed' && fetchState !== 'Error';
+}

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

@@ -107,32 +107,27 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
                         draft.selectedTab = 'review';
                         draft.selectedAccountId = action.payload.accountId;
                     }
-                    const accountReconciliationRecords = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(action.payload.selectedPeriod)];
-                    const { transactionFetchState } = accountReconciliationRecords.reconciliationByAccountID[action.payload.accountId];
-                    if (transactionFetchState.fetchState !== 'Completed' ||
+                    const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.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;
                         }
                     }
                 }
@@ -184,14 +179,17 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
                 }
             }
             else {
-                const accountReconciliationRecords = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(action.payload.selectedPeriod)];
+                const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.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';
                 }
             }
         },
@@ -396,8 +394,11 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
         },
         setStatementParseInProgress: (draft, action) => {
             const { accountId, selectedPeriod, statementParseInProgress } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].statementParseInProgress =
-                statementParseInProgress;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementParseInProgress = statementParseInProgress;
         },
         setStatementProcessingDismissedToBackground: (draft, action) => {
             const { accountId, selectedPeriod, dismissedToBackground } = action.payload;
@@ -481,15 +482,23 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
         },
         uploadAccountStatementSuccess: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].statementUploadStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementUploadStatus = {
                 fetchState: 'Completed',
                 error: undefined,
             };
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].statementParseInProgress = true;
+            accountRecon.statementParseInProgress = true;
         },
         uploadAccountStatementFailure: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].statementUploadStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.statementUploadStatus = {
                 fetchState: 'Error',
                 error: action.payload.error,
             };
@@ -682,23 +691,34 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
         },
         reparseStatementFailure: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].reparseStatementStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.reparseStatementStatus = {
                 fetchState: 'Error',
                 error: action.payload.error,
             };
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].statementProcessingFailed = true;
+            accountRecon.statementProcessingFailed = true;
         },
         resetReparseStatementStatus: (draft, action) => {
             const { accountId, selectedPeriod } = action.payload;
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].reparseStatementStatus = {
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.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[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].parsedStatementData =
-                parsedStatementData;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            accountRecon.parsedStatementData = parsedStatementData;
         },
         updateStatementUpdateLocalData: (draft, action) => {
             const { accountId, selectedPeriod, statementUpdateLocalData, statementUploadId, } = action.payload;
@@ -824,17 +844,21 @@ const expenseAutomationReconciliationView = (0, toolkit_1.createSlice)({
         },
         updateAccountReconciliationLocalData: (draft, action) => {
             const { accountId, selectedPeriod, localData } = action.payload;
-            const oldLocalData = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].localData;
+            const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+            if (accountRecon == null) {
+                return;
+            }
+            const oldLocalData = accountRecon.localData;
             if (oldLocalData == null) {
-                draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].localData = localData;
+                accountRecon.localData = localData;
             }
             else {
-                draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].localData = {
+                accountRecon.localData = {
                     ...oldLocalData,
                     ...localData,
                 };
             }
-            draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId].localData = {
+            accountRecon.localData = {
                 ...oldLocalData,
                 ...localData,
             };
@@ -1124,7 +1148,10 @@ function updateAllReconciliation(draft, accounts, selectedPeriod, reconciliation
     }
 }
 function updateReconciliationByAccountID(draft, accounts, selectedPeriod, accountId, reconciliationData, refreshViewInBackground) {
-    const oldRecord = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId];
+    const accountRecon = draft.accountReconciliationRecordsBySelectedPeriod[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)]?.reconciliationByAccountID[accountId];
+    if (accountRecon == null) {
+        return;
+    }
     const oldConnectionStatus = draft.accountConnectionStatusByAccountID[accountId];
     draft.accountConnectionStatusByAccountID[accountId] = {
         status: (0, accountReconState_1.toBankStatusCodeType)(reconciliationData.bank_status.code),
@@ -1134,21 +1161,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[(0, timePeriod_1.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[(0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod)].reconciliationByAccountID[accountId] = {
-            ...oldRecord,
-            statementParseInProgress,
-            reconciliationId: reconciliationData.reconciliation_id ?? undefined,
-            transactionFetchState: { fetchState: 'Completed', error: undefined },
+        accountRecon.transactionFetchState = {
+            fetchState: 'Completed',
+            error: undefined,
         };
     }
 }
@@ -1178,7 +1201,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/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewReducer.d.ts

@@ -74,6 +74,8 @@ export declare const updateInvoicingCatalogItemFormDraft: import("@reduxjs/toolk
 }, "editInvoicingCatalogItemDetailView/runInvoicingCatalogProductActionFailure">, submitInvoicingCatalogItemForm: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SubmitInvoicingCatalogItemFormPayload], SubmitInvoicingCatalogItemFormPayload, "editInvoicingCatalogItemDetailView/submitInvoicingCatalogItemForm", never, never>, submitInvoicingCatalogItemFormSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     itemId: ID;
     kind: InvoicingCatalogItemKind;
-}, "editInvoicingCatalogItemDetailView/submitInvoicingCatalogItemFormSuccess">, submitInvoicingCatalogItemFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCatalogItemDetailView/submitInvoicingCatalogItemFormFailure">, resetEditInvoicingCatalogItemDetailView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"editInvoicingCatalogItemDetailView/resetEditInvoicingCatalogItemDetailView">;
+}, "editInvoicingCatalogItemDetailView/submitInvoicingCatalogItemFormSuccess">, submitInvoicingCatalogItemFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCatalogItemDetailView/submitInvoicingCatalogItemFormFailure">, resetEditInvoicingCatalogItemDetailView: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<{
+    id?: ID;
+} | undefined, "editInvoicingCatalogItemDetailView/resetEditInvoicingCatalogItemDetailView">;
 declare const _default: import("redux").Reducer<EditInvoicingCatalogItemDetailViewState>;
 export default _default;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.resetEditInvoicingCatalogItemDetailView = exports.submitInvoicingCatalogItemFormFailure = exports.submitInvoicingCatalogItemFormSuccess = exports.submitInvoicingCatalogItemForm = exports.runInvoicingCatalogProductActionFailure = exports.runInvoicingCatalogProductActionSuccess = exports.runInvoicingCatalogProductAction = exports.runInvoicingCatalogPlanActionFailure = exports.runInvoicingCatalogPlanActionSuccess = exports.runInvoicingCatalogPlanAction = exports.seedInvoicingCatalogItemFormDraft = exports.updateInvoicingCatalogItemDetailFailure = exports.updateInvoicingCatalogItemDetail = exports.fetchInvoicingCatalogItemDetailPage = exports.fetchInvoicingCatalogItemDetail = exports.updateInvoicingCatalogItemFormDraft = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingCatalogItemFormHelper_1 = require("./invoicingCatalogItemFormHelper");
 exports.initialState = {
     fetchState: 'Not-Started',
@@ -25,7 +26,7 @@ const editInvoicingCatalogItemDetailView = (0, toolkit_1.createSlice)({
         updateInvoicingCatalogItemFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                (0, invoicingFormDraft_1.applyInvoicingFormDraftEdit)(draft.editDraftById, id, localData);
             }
             else {
                 draft.newItemDraft = localData;
@@ -68,6 +69,7 @@ const editInvoicingCatalogItemDetailView = (0, toolkit_1.createSlice)({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftFailure)(draft.editDraftById, action.payload.id, invoicingCatalogItemFormHelper_1.initialInvoicingCatalogItemFormLocalData);
         },
         fetchInvoicingCatalogItemDetailPage: {
             reducer() {
@@ -83,14 +85,10 @@ const editInvoicingCatalogItemDetailView = (0, toolkit_1.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;
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSeed)(draft.editDraftById, id, localData);
         },
         runInvoicingCatalogPlanAction(draft, action) {
             draft.actionStateById[action.payload.id] = {
@@ -129,13 +127,23 @@ const editInvoicingCatalogItemDetailView = (0, toolkit_1.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 = { ...invoicingCatalogItemFormHelper_1.initialInvoicingCatalogItemFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newItemDraft = { ...invoicingCatalogItemFormHelper_1.initialInvoicingCatalogItemFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

package/lib/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewSelector.d.ts

@@ -44,6 +44,16 @@ export interface InvoicingCatalogItemFormView extends SelectorView {
      * Folded in here so the screen never reaches for the config view itself.
      */
     fieldHelp: InvoicingFieldHelpByCode;
+    /**
+     * True while anything the form's fields mount against is still loading: the
+     * accounting lists, and — until it has reached the draft — the item being
+     * edited. The form holds a skeleton on this rather than mount, because both
+     * arrive too late to be picked up: it seeds react-hook-form once, at first
+     * render, and the accounting fields choose between a picker and a text input
+     * from the lists. A later refetch does not raise this again, so a refresh
+     * leaves the form on screen instead of blanking it mid-edit.
+     */
+    isFormLoading: boolean;
     /**
      * True while the accounting lists are still loading, so the form can wait
      * instead of mounting pickers whose options are not there yet.

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

@@ -5,6 +5,7 @@ const toolkit_1 = require("@reduxjs/toolkit");
 const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState");
 const planSelector_1 = require("../../../entity/invoicing/plan/planSelector");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingQboViewSelector_1 = require("../invoicingQboView/invoicingQboViewSelector");
 const invoicingCatalogItemFormHelper_1 = require("./invoicingCatalogItemFormHelper");
 const getEditInvoicingCatalogItemDetailViewState = (state) => ({
@@ -58,7 +59,7 @@ 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] ?? invoicingCatalogItemFormHelper_1.initialInvoicingCatalogItemFormLocalData)
+        ? (0, invoicingFormDraft_1.getInvoicingFormDraftLocalData)(editDraftById, id, invoicingCatalogItemFormHelper_1.initialInvoicingCatalogItemFormLocalData)
         : newItemDraft;
     const allApplicableItemOptions = (0, exports.getInvoicingApplicableCatalogItemOptions)(state);
     const applicableItemOptions = id != null
@@ -96,6 +97,8 @@ const getInvoicingCatalogItemFormView = (state, id) => {
         catalogProductLifecycleActionOptions,
         recordState,
         fieldHelp: (0, invoicingConfigViewSelector_1.invoicingFieldHelpForGroup)(state, 'catalog'),
+        isFormLoading: (0, invoicingQboViewSelector_1.isInvoicingAccountingPickerDataLoading)(state) ||
+            (0, invoicingFormDraft_1.isInvoicingFormDraftPending)(editDraftById, id),
         isQboPickerDataLoading: (0, invoicingQboViewSelector_1.isInvoicingAccountingPickerDataLoading)(state),
         qboAccountHierarchy: qboView?.nestedAccountHierarchy ?? [],
         qboClassHierarchy: qboView?.nestedClassHierarchy ?? [],

package/lib/view/invoicing/editInvoicingCatalogItemDetailView/editInvoicingCatalogItemDetailViewState.d.ts

@@ -1,5 +1,6 @@
 import { Amount } from '../../../commonStateTypes/amount';
 import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { InvoicingFormDraftById } from '../invoicingFormDraft';
 /** A single pricing tier within a price point (values kept as raw strings). */
 export interface InvoicingCatalogItemFormTier {
     endingUnit: string;
@@ -63,7 +64,7 @@ export interface EditInvoicingCatalogItemDetailViewState extends FetchedState {
      */
     actionStateById: Record<ID, FetchStateAndError>;
     /** Inline-edit drafts, keyed by catalog item id. */
-    editDraftById: Record<ID, InvoicingCatalogItemFormLocalData>;
+    editDraftById: InvoicingFormDraftById<InvoicingCatalogItemFormLocalData>;
     newItemDraft: InvoicingCatalogItemFormLocalData;
     /**
      * Detail-load state per catalog item id. Keyed rather than a single slot, so

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

@@ -20,8 +20,9 @@ const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actions$.pip
     // 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 = (0, editInvoicingCatalogItemDetailViewPayload_1.localDataToSaveInvoicingCatalogItemPayload)(localData, id == null, accountingLookup);
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
     const path = id != null

package/lib/view/invoicing/editInvoicingCatalogItemDetailView/seedInvoicingCatalogItemFormDraftEpic.d.ts

@@ -1,12 +1,16 @@
 import { ActionsObservable, StateObservable } from 'redux-observable';
 import { Observable } from 'rxjs';
 import { RootState } from '../../../rootStateTypes';
-import { seedInvoicingCatalogItemFormDraft, updateInvoicingCatalogItemDetail } from './editInvoicingCatalogItemDetailViewReducer';
-export type ActionType = ReturnType<typeof updateInvoicingCatalogItemDetail> | ReturnType<typeof seedInvoicingCatalogItemFormDraft>;
+import { fetchInvoicingCatalogItemDetailPage, seedInvoicingCatalogItemFormDraft, updateInvoicingCatalogItemDetail } from './editInvoicingCatalogItemDetailViewReducer';
+export type ActionType = ReturnType<typeof fetchInvoicingCatalogItemDetailPage> | ReturnType<typeof updateInvoicingCatalogItemDetail> | ReturnType<typeof seedInvoicingCatalogItemFormDraft>;
 /**
- * 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 declare const seedInvoicingCatalogItemFormDraftEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>) => Observable<ActionType>;