@zeniai/client-epic-state 5.2.49 → 5.2.50

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

@@ -0,0 +1,65 @@
+/**
+ * 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 };
+}
+/**
+ * Record that the fetch failed, so the form renders instead of waiting behind a
+ * skeleton that will never resolve.
+ *
+ * Mirrors the seed: a draft holding the record is left alone, since a
+ * background refetch failing is no reason to discard it, and anything else is
+ * marked failed. A draft the form wrote before the record landed keeps its
+ * values — there is no reason to throw away what the user typed — but stops
+ * counting as still loading, and a later successful fetch can still seed it.
+ */
+export function applyInvoicingFormDraftFailure(draftById, id, blankLocalData) {
+    const existing = draftById[id];
+    if (existing == null) {
+        draftById[id] = { fetchState: 'Error', localData: blankLocalData };
+        return;
+    }
+    if (existing.fetchState === 'Completed') {
+        return;
+    }
+    existing.fetchState = 'Error';
+}
+/** 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/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>;

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

@@ -7,13 +7,32 @@ const planSelector_1 = require("../../../entity/invoicing/plan/planSelector");
 const editInvoicingCatalogItemDetailViewReducer_1 = require("./editInvoicingCatalogItemDetailViewReducer");
 const invoicingCatalogItemFormHelper_1 = require("./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.
  */
-const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(editInvoicingCatalogItemDetailViewReducer_1.updateInvoicingCatalogItemDetail.match), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
-    const { id } = action.payload;
+const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingCatalogItemDetailViewReducer_1.updateInvoicingCatalogItemDetail.match(action) ||
+    editInvoicingCatalogItemDetailViewReducer_1.fetchInvoicingCatalogItemDetailPage.match(action)), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
+    const id = action.payload.id;
+    if (id == null) {
+        return rxjs_1.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 (editInvoicingCatalogItemDetailViewReducer_1.fetchInvoicingCatalogItemDetailPage.match(action) &&
+        state.editInvoicingCatalogItemDetailViewState.recordStateById[id]
+            ?.fetchState !== 'Completed') {
+        return rxjs_1.EMPTY;
+    }
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
     const plan = (0, planSelector_1.getInvoicingPlanById)(state.invoicingPlanState, id);
     if (plan == null) {
         return rxjs_1.EMPTY;

package/lib/view/invoicing/editInvoicingCouponDetailView/editInvoicingCouponDetailViewReducer.d.ts

@@ -48,6 +48,8 @@ export declare const updateInvoicingCouponFormDraft: import("@reduxjs/toolkit").
     id: ID;
 }, "editInvoicingCouponDetailView/runInvoicingDiscountActionFailure">, submitInvoicingCouponForm: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SubmitInvoicingCouponFormPayload], SubmitInvoicingCouponFormPayload, "editInvoicingCouponDetailView/submitInvoicingCouponForm", never, never>, saveInvoicingCoupon: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SaveInvoicingCouponPayload], SaveInvoicingCouponPayload, "editInvoicingCouponDetailView/saveInvoicingCoupon", never, never>, submitInvoicingCouponFormSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     couponId: ID;
-}, "editInvoicingCouponDetailView/submitInvoicingCouponFormSuccess">, submitInvoicingCouponFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCouponDetailView/submitInvoicingCouponFormFailure">, resetEditInvoicingCouponDetailView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"editInvoicingCouponDetailView/resetEditInvoicingCouponDetailView">;
+}, "editInvoicingCouponDetailView/submitInvoicingCouponFormSuccess">, submitInvoicingCouponFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCouponDetailView/submitInvoicingCouponFormFailure">, resetEditInvoicingCouponDetailView: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<{
+    id?: ID;
+} | undefined, "editInvoicingCouponDetailView/resetEditInvoicingCouponDetailView">;
 declare const _default: import("redux").Reducer<EditInvoicingCouponDetailViewState>;
 export default _default;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.resetEditInvoicingCouponDetailView = exports.submitInvoicingCouponFormFailure = exports.submitInvoicingCouponFormSuccess = exports.saveInvoicingCoupon = exports.submitInvoicingCouponForm = exports.runInvoicingDiscountActionFailure = exports.runInvoicingDiscountActionSuccess = exports.runInvoicingDiscountAction = exports.updateInvoicingCouponDetailFailure = exports.updateInvoicingCouponDetail = exports.seedInvoicingCouponFormDraft = exports.fetchInvoicingCouponDetailPage = exports.fetchInvoicingCouponDetail = exports.updateInvoicingCouponFormDraft = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const editInvoicingCouponDetailViewState_1 = require("./editInvoicingCouponDetailViewState");
 exports.initialState = {
     fetchState: 'Not-Started',
@@ -24,7 +25,7 @@ const editInvoicingCouponDetailView = (0, toolkit_1.createSlice)({
         updateInvoicingCouponFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                (0, invoicingFormDraft_1.applyInvoicingFormDraftEdit)(draft.editDraftById, id, localData);
             }
             else {
                 draft.newCouponDraft = localData;
@@ -89,15 +90,12 @@ const editInvoicingCouponDetailView = (0, toolkit_1.createSlice)({
                 fetchState: 'Error',
                 error: action.payload.status,
             };
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftFailure)(draft.editDraftById, action.payload.id, editInvoicingCouponDetailViewState_1.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;
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSeed)(draft.editDraftById, id, localData);
         },
         runInvoicingDiscountAction(draft, action) {
             draft.actionStateById[action.payload.id] = {
@@ -117,12 +115,22 @@ const editInvoicingCouponDetailView = (0, toolkit_1.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 = { ...editInvoicingCouponDetailViewState_1.initialInvoicingCouponFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCouponDraft = { ...editInvoicingCouponDetailViewState_1.initialInvoicingCouponFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

package/lib/view/invoicing/editInvoicingCouponDetailView/editInvoicingCouponDetailViewSelector.d.ts

@@ -19,6 +19,19 @@ export interface EditInvoicingCouponDetailView extends SelectorView {
      * Folded in here so the screen never reaches for the config view itself.
      */
     fieldHelp: InvoicingFieldHelpByCode;
+    /**
+     * True while the coupon being edited is still on its way to the form. The
+     * form holds a skeleton on this rather than mount: it seeds react-hook-form
+     * once, at first render, so fields mounted against the blank draft stay blank
+     * and the first change writes that blankness back over the coupon. A later
+     * refetch does not raise this again, so a refresh leaves the form on screen
+     * instead of blanking it mid-edit.
+     *
+     * Narrower than `pageFetchState`, which also waits on the accounting lists:
+     * the discounts-account picker carries its own loading state, so the form is
+     * useful before the lists land.
+     */
+    isFormLoading: boolean;
     /**
      * Every request the page renders from, reduced to one state: the record and
      * the config behind its dropdowns and field help. The page holds a skeleton

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

@@ -5,6 +5,7 @@ const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState")
 const couponSelector_1 = require("../../../entity/invoicing/coupon/couponSelector");
 const invoicingCommonPayload_1 = require("../../../entity/invoicing/invoicingCommonPayload");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingQboViewSelector_1 = require("../invoicingQboView/invoicingQboViewSelector");
 const settingsViewSelector_1 = require("../settingsView/settingsViewSelector");
 const editInvoicingCouponDetailViewState_1 = require("./editInvoicingCouponDetailViewState");
@@ -44,6 +45,7 @@ const getEditInvoicingCouponDetailViewState = (state, couponId) => {
             { error: undefined, fetchState: configFetchState },
         ]),
         recordState,
+        isFormLoading: (0, invoicingFormDraft_1.isInvoicingFormDraftPending)(state.editInvoicingCouponDetailViewState.editDraftById, couponId),
         coupon,
         discountsAccountName: (0, invoicingQboViewSelector_1.invoicingQboAccountByQboId)(state, coupon?.discountsAccountId)?.accountName,
         savedCouponId,
@@ -74,7 +76,7 @@ const getInvoicingCouponFormView = (state, couponId) => {
     // `seedInvoicingCouponFormDraftEpic` when the detail load lands. Until then
     // the page is showing its skeleton.
     const localData = couponId != null
-        ? (editDraftById[couponId] ?? editInvoicingCouponDetailViewState_1.initialInvoicingCouponFormLocalData)
+        ? (0, invoicingFormDraft_1.getInvoicingFormDraftLocalData)(editDraftById, couponId, editInvoicingCouponDetailViewState_1.initialInvoicingCouponFormLocalData)
         : newCouponDraft;
     const { billingPeriodUnitOptions, discountApplyOnOptions, discountDurationTypeOptions, discountTypeOptions, qboAccountMappingKindOptions, } = (0, invoicingConfigViewSelector_1.getInvoicingConfigView)(state);
     const isQboConnected = (0, invoicingQboViewSelector_1.isInvoicingQboConnected)(state);

package/lib/view/invoicing/editInvoicingCouponDetailView/editInvoicingCouponDetailViewState.d.ts

@@ -2,6 +2,7 @@ import { Amount } from '../../../commonStateTypes/amount';
 import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
 import { InvoicingCoupon } from '../../../entity/invoicing/coupon/couponState';
 import { InvoicingQboAccountMappingsPayload } from '../../../entity/invoicing/invoicingCommonPayload';
+import { InvoicingFormDraftById } from '../invoicingFormDraft';
 /**
  * Draft form state for the create/edit discount-coupon form. Held in CES so the
  * form flows its data from here (mirrors the customer form pattern). Dates are
@@ -37,7 +38,7 @@ export interface InvoicingCouponFormLocalData {
 export interface EditInvoicingCouponDetailViewState extends FetchedState {
     /** Lifecycle action (archive, activate, …) fetch state per coupon id. */
     actionStateById: Record<ID, FetchStateAndError>;
-    editDraftById: Record<ID, InvoicingCouponFormLocalData>;
+    editDraftById: InvoicingFormDraftById<InvoicingCouponFormLocalData>;
     newCouponDraft: InvoicingCouponFormLocalData;
     /** Detail-load state per coupon id. */
     recordStateById: Record<ID, FetchStateAndError>;

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

@@ -23,7 +23,7 @@ const saveInvoicingCouponEpic = (actions$, state$, zeniAPI) => actions$.pipe((0,
             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/view/invoicing/editInvoicingCouponDetailView/seedInvoicingCouponFormDraftEpic.d.ts

@@ -1,12 +1,16 @@
 import { ActionsObservable, StateObservable } from 'redux-observable';
 import { Observable } from 'rxjs';
 import { RootState } from '../../../rootStateTypes';
-import { seedInvoicingCouponFormDraft, updateInvoicingCouponDetail } from './editInvoicingCouponDetailViewReducer';
-export type ActionType = ReturnType<typeof updateInvoicingCouponDetail> | ReturnType<typeof seedInvoicingCouponFormDraft>;
+import { fetchInvoicingCouponDetailPage, seedInvoicingCouponFormDraft, updateInvoicingCouponDetail } from './editInvoicingCouponDetailViewReducer';
+export type ActionType = ReturnType<typeof fetchInvoicingCouponDetailPage> | ReturnType<typeof updateInvoicingCouponDetail> | ReturnType<typeof seedInvoicingCouponFormDraft>;
 /**
- * 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 seedInvoicingCouponFormDraftEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>) => Observable<ActionType>;

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

@@ -7,13 +7,32 @@ const couponSelector_1 = require("../../../entity/invoicing/coupon/couponSelecto
 const editInvoicingCouponDetailViewReducer_1 = require("./editInvoicingCouponDetailViewReducer");
 const editInvoicingCouponDetailViewState_1 = require("./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.
  */
-const seedInvoicingCouponFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(editInvoicingCouponDetailViewReducer_1.updateInvoicingCouponDetail.match), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
+const seedInvoicingCouponFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingCouponDetailViewReducer_1.updateInvoicingCouponDetail.match(action) ||
+    editInvoicingCouponDetailViewReducer_1.fetchInvoicingCouponDetailPage.match(action)), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
     const { id } = action.payload;
+    if (id == null) {
+        return rxjs_1.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 (editInvoicingCouponDetailViewReducer_1.fetchInvoicingCouponDetailPage.match(action) &&
+        state.editInvoicingCouponDetailViewState.recordStateById[id]
+            ?.fetchState !== 'Completed') {
+        return rxjs_1.EMPTY;
+    }
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
     const coupon = (0, couponSelector_1.getInvoicingCouponById)(state.invoicingCouponState, id);
     if (coupon == null) {
         return rxjs_1.EMPTY;

package/lib/view/invoicing/editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewReducer.d.ts

@@ -54,6 +54,8 @@ export declare const fetchInvoicingPaymentLinkEmailPreview: import("@reduxjs/too
     status: ZeniAPIStatus;
 }, "editInvoicingCustomerDetailView/updateInvoicingCustomerDetailFailure">, updateInvoicingCustomerFormDraft: import("@reduxjs/toolkit").ActionCreatorWithPayload<UpdateInvoicingCustomerFormDraftPayload, "editInvoicingCustomerDetailView/updateInvoicingCustomerFormDraft">, submitInvoicingCustomerForm: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SubmitInvoicingCustomerFormPayload], SubmitInvoicingCustomerFormPayload, "editInvoicingCustomerDetailView/submitInvoicingCustomerForm", never, never>, submitInvoicingCustomerFormSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     customerId: ID;
-}, "editInvoicingCustomerDetailView/submitInvoicingCustomerFormSuccess">, submitInvoicingCustomerFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCustomerDetailView/submitInvoicingCustomerFormFailure">, resetEditInvoicingCustomerDetailView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"editInvoicingCustomerDetailView/resetEditInvoicingCustomerDetailView">, initializeInvoicingCustomerAddress: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: InitializeInvoicingCustomerAddressPayload], InitializeInvoicingCustomerAddressPayload, "editInvoicingCustomerDetailView/initializeInvoicingCustomerAddress", never, never>;
+}, "editInvoicingCustomerDetailView/submitInvoicingCustomerFormSuccess">, submitInvoicingCustomerFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingCustomerDetailView/submitInvoicingCustomerFormFailure">, resetEditInvoicingCustomerDetailView: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<{
+    id?: ID;
+} | undefined, "editInvoicingCustomerDetailView/resetEditInvoicingCustomerDetailView">, initializeInvoicingCustomerAddress: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: InitializeInvoicingCustomerAddressPayload], InitializeInvoicingCustomerAddressPayload, "editInvoicingCustomerDetailView/initializeInvoicingCustomerAddress", never, never>;
 declare const _default: import("redux").Reducer<EditInvoicingCustomerDetailViewState>;
 export default _default;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.initializeInvoicingCustomerAddress = exports.resetEditInvoicingCustomerDetailView = exports.submitInvoicingCustomerFormFailure = exports.submitInvoicingCustomerFormSuccess = exports.submitInvoicingCustomerForm = exports.updateInvoicingCustomerFormDraft = exports.updateInvoicingCustomerDetailFailure = exports.submitAddPromotionalCredits = exports.resetPromotionalCreditAction = exports.updateInvoicingCustomerDetail = exports.seedInvoicingCustomerFormDraft = exports.fetchInvoicingCustomerDetailPage = exports.fetchInvoicingCustomerDetail = exports.addPromotionalCreditsSuccess = exports.addPromotionalCreditsFailure = exports.updateInvoicingPaymentLinkEmailPreviewFailure = exports.updateInvoicingPaymentLinkEmailPreview = exports.fetchInvoicingPaymentLinkEmailPreviewPage = exports.fetchInvoicingPaymentLinkEmailPreview = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingCustomerFormConfig_1 = require("./invoicingCustomerFormConfig");
 exports.initialState = {
     emailPreviewFetchState: { fetchState: 'Not-Started', error: undefined },
@@ -127,20 +128,17 @@ const editInvoicingCustomerDetailView = (0, toolkit_1.createSlice)({
                 fetchState: 'Error',
                 error: action.payload.status,
             };
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftFailure)(draft.editDraftById, action.payload.id, invoicingCustomerFormConfig_1.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;
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSeed)(draft.editDraftById, id, localData);
         },
         updateInvoicingCustomerFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                (0, invoicingFormDraft_1.applyInvoicingFormDraftEdit)(draft.editDraftById, id, localData);
             }
             else {
                 draft.newCustomerDraft = localData;
@@ -165,12 +163,22 @@ const editInvoicingCustomerDetailView = (0, toolkit_1.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 = { ...invoicingCustomerFormConfig_1.initialInvoicingCustomerFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCustomerDraft = { ...invoicingCustomerFormConfig_1.initialInvoicingCustomerFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingCustomerAddressEpic.
         initializeInvoicingCustomerAddress: {

package/lib/view/invoicing/editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewSelector.d.ts

@@ -53,6 +53,15 @@ export interface InvoicingCustomerFormView extends SelectorView {
      * Folded in here so the screen never reaches for the config view itself.
      */
     fieldHelp: InvoicingFieldHelpByCode;
+    /**
+     * True while the customer being edited is still on its way to the form. The
+     * form holds a skeleton on this rather than mount: it seeds react-hook-form
+     * once, at first render, so fields mounted against the blank draft stay blank
+     * and the first change writes that blankness back over the customer. A later
+     * refetch does not raise this again, so a refresh leaves the form on screen
+     * instead of blanking it mid-edit.
+     */
+    isFormLoading: boolean;
     localData: InvoicingCustomerFormLocalData;
     mode: 'create' | 'edit';
     netTermDayOptions: InvoicingNamedOption[];