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

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, 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;
@@ -42,6 +43,9 @@ const editInvoicingCatalogItemDetailView = createSlice({
             draft.error = undefined;
             draft.savedItemId = action.payload.itemId;
             draft.savedKind = action.payload.kind;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.itemId);
         },
         submitInvoicingCatalogItemFormFailure(draft, action) {
             draft.fetchState = 'Error';
@@ -64,6 +68,7 @@ const editInvoicingCatalogItemDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingCatalogItemFormLocalData);
         },
         fetchInvoicingCatalogItemDetailPage: {
             reducer() {
@@ -79,14 +84,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 +126,23 @@ const editInvoicingCatalogItemDetailView = createSlice({
                 error: action.payload.error,
             };
         },
-        resetEditInvoicingCatalogItemDetailView(draft) {
+        /**
+         * Discard a form's draft — the catalog item's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * catalog item's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCatalogItemDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedItemId = undefined;
             draft.savedKind = undefined;
-            draft.editDraftById = {};
-            draft.newItemDraft = { ...initialInvoicingCatalogItemFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newItemDraft = { ...initialInvoicingCatalogItemFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, 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;
@@ -50,6 +51,9 @@ const editInvoicingCouponDetailView = createSlice({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedCouponId = action.payload.couponId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.couponId);
         },
         submitInvoicingCouponFormFailure(draft, action) {
             draft.fetchState = 'Error';
@@ -85,15 +89,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 +114,22 @@ const editInvoicingCouponDetailView = createSlice({
                 error: action.payload.error,
             };
         },
-        resetEditInvoicingCouponDetailView(draft) {
+        /**
+         * Discard a form's draft — the coupon's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * coupon's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCouponDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedCouponId = undefined;
-            draft.editDraftById = {};
-            draft.newCouponDraft = { ...initialInvoicingCouponFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCouponDraft = { ...initialInvoicingCouponFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
     },
     extraReducers: (builder) => {

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, 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;
@@ -156,17 +154,30 @@ const editInvoicingCustomerDetailView = createSlice({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedCustomerId = action.payload.customerId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.customerId);
         },
         submitInvoicingCustomerFormFailure(draft, action) {
             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

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

@@ -1,16 +1,39 @@
 import { EMPTY, of } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
 import { getInvoicingCustomerById } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
-import { seedInvoicingCustomerFormDraft, updateInvoicingCustomerDetail, } from './editInvoicingCustomerDetailViewReducer';
+import { fetchInvoicingCustomerDetailPage, seedInvoicingCustomerFormDraft, updateInvoicingCustomerDetail, } from './editInvoicingCustomerDetailViewReducer';
 import { entityToInvoicingCustomerFormLocalData } from './invoicingCustomerFormConfig';
 /**
- * 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 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 seedInvoicingCustomerFormDraftEpic = (actions$, state$) => actions$.pipe(filter(updateInvoicingCustomerDetail.match), withLatestFrom(state$), mergeMap(([action, state]) => {
+export const seedInvoicingCustomerFormDraftEpic = (actions$, state$) => actions$.pipe(filter((action) => updateInvoicingCustomerDetail.match(action) ||
+    fetchInvoicingCustomerDetailPage.match(action)), withLatestFrom(state$), mergeMap(([action, state]) => {
     const { id } = action.payload;
+    if (id == null) {
+        return EMPTY;
+    }
+    // The entity alone does not say the whole record is loaded — the list
+    // endpoints merge their own list-shaped rows into the same store. Only a
+    // completed detail load does, which is also exactly when the page's
+    // cache-guarded fetch issues no request and this is the sole seed.
+    // A forced refetch is the caller asking for fresh data: the response will
+    // seed, and seeding first from the entity as it stands would mark the
+    // draft loaded and lock that response out.
+    if (fetchInvoicingCustomerDetailPage.match(action) &&
+        (action.payload.cacheOverride === true ||
+            state.editInvoicingCustomerDetailViewState.recordStateById[id]
+                ?.fetchState !== 'Completed')) {
+        return EMPTY;
+    }
+    // Nothing to seed from on a cold open; the detail response triggers this
+    // again once it lands.
     const customer = getInvoicingCustomerById(state.invoicingCustomerState, id);
     if (customer == null) {
         return EMPTY;

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, 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;
@@ -107,19 +105,32 @@ const editInvoicingSubscriptionDetailView = createSlice({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedSubscriptionId = action.payload.subscriptionId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.subscriptionId);
         },
         submitInvoicingSubscriptionFormFailure(draft, action) {
             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).