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

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;
@@ -160,17 +158,30 @@ const editInvoicingCustomerDetailView = (0, toolkit_1.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.
+            (0, invoicingFormDraft_1.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 = { ...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[];

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

@@ -8,6 +8,7 @@ const invoicingCustomerSelector_2 = require("../../../entity/invoicing/invoicing
 const addressViewSelector_1 = require("../../addressView/addressViewSelector");
 const customerPaymentMethodSelector_1 = require("../customerPaymentMethod/customerPaymentMethodSelector");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingSettingsHelpers_1 = require("../settingsView/invoicingSettingsHelpers");
 const settingsViewSelector_1 = require("../settingsView/settingsViewSelector");
 const invoicingCustomerFormConfig_1 = require("./invoicingCustomerFormConfig");
@@ -63,8 +64,7 @@ const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
     // `seedInvoicingCustomerFormDraftEpic` when the detail load lands. Until then
     // the page is showing its skeleton.
     const localData = invoicingCustomerID != null
-        ? (editDraftById[invoicingCustomerID] ??
-            invoicingCustomerFormConfig_1.initialInvoicingCustomerFormLocalData)
+        ? (0, invoicingFormDraft_1.getInvoicingFormDraftLocalData)(editDraftById, invoicingCustomerID, invoicingCustomerFormConfig_1.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
@@ -82,6 +82,7 @@ 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 = (0, invoicingFormDraft_1.isInvoicingFormDraftPending)(editDraftById, invoicingCustomerID);
     return {
         // A preview cached for another customer is not this screen's.
         emailPreview: emailPreviewCustomerId === invoicingCustomerID ? emailPreview : undefined,
@@ -96,6 +97,7 @@ const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         promotionalCreditSubmitState: state.editInvoicingCustomerDetailViewState.promotionalCreditSubmitState,
         record: (0, exports.getInvoicingCustomerRecord)(state, invoicingCustomerID),
         fieldHelp: (0, invoicingConfigViewSelector_1.invoicingFieldHelpForGroup)(state, 'customer'),
+        isFormLoading,
         customerTypeOptions,
         localData,
         mode,

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

@@ -1,4 +1,5 @@
 import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { InvoicingFormDraftById } from '../invoicingFormDraft';
 /**
  * The payment-link email the composer opens with: the backend's prefill plus
  * the tokens the frontend splices the user's edits into. State, not wire shape
@@ -37,7 +38,7 @@ export interface InvoicingCustomerFormLocalData {
     vatNumber: string;
 }
 export interface EditInvoicingCustomerDetailViewState extends FetchedState {
-    editDraftById: Record<ID, InvoicingCustomerFormLocalData>;
+    editDraftById: InvoicingFormDraftById<InvoicingCustomerFormLocalData>;
     /**
      * The payment-link email rendered by the backend, cached per customer so
      * reopening the composer costs nothing. `emailPreviewCustomerId` is the cache

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

@@ -19,7 +19,7 @@ const saveInvoicingCustomerEpic = (actions$, state$, zeniAPI) => actions$.pipe((
     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/view/invoicing/editInvoicingCustomerDetailView/seedInvoicingCustomerFormDraftEpic.d.ts

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

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

@@ -7,13 +7,36 @@ const invoicingCustomerSelector_1 = require("../../../entity/invoicing/invoicing
 const editInvoicingCustomerDetailViewReducer_1 = require("./editInvoicingCustomerDetailViewReducer");
 const invoicingCustomerFormConfig_1 = require("./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.
  */
-const seedInvoicingCustomerFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(editInvoicingCustomerDetailViewReducer_1.updateInvoicingCustomerDetail.match), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
+const seedInvoicingCustomerFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingCustomerDetailViewReducer_1.updateInvoicingCustomerDetail.match(action) ||
+    editInvoicingCustomerDetailViewReducer_1.fetchInvoicingCustomerDetailPage.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.
+    // 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 (editInvoicingCustomerDetailViewReducer_1.fetchInvoicingCustomerDetailPage.match(action) &&
+        (action.payload.cacheOverride === true ||
+            state.editInvoicingCustomerDetailViewState.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 customer = (0, invoicingCustomerSelector_1.getInvoicingCustomerById)(state.invoicingCustomerState, id);
     if (customer == null) {
         return rxjs_1.EMPTY;

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewReducer.d.ts

@@ -55,6 +55,8 @@ export declare const runInvoicingSubscriptionAction: import("@reduxjs/toolkit").
     id: ID;
 }, "editInvoicingSubscriptionDetailView/updateInvoicingSubscriptionDetailFailure">, updateInvoicingSubscriptionFormDraft: import("@reduxjs/toolkit").ActionCreatorWithPayload<UpdateInvoicingSubscriptionFormDraftPayload, "editInvoicingSubscriptionDetailView/updateInvoicingSubscriptionFormDraft">, submitInvoicingSubscriptionForm: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SubmitInvoicingSubscriptionFormPayload], SubmitInvoicingSubscriptionFormPayload, "editInvoicingSubscriptionDetailView/submitInvoicingSubscriptionForm", never, never>, submitInvoicingSubscriptionFormSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     subscriptionId: ID;
-}, "editInvoicingSubscriptionDetailView/submitInvoicingSubscriptionFormSuccess">, submitInvoicingSubscriptionFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingSubscriptionDetailView/submitInvoicingSubscriptionFormFailure">, resetEditInvoicingSubscriptionDetailView: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"editInvoicingSubscriptionDetailView/resetEditInvoicingSubscriptionDetailView">, initializeInvoicingSubscriptionAddress: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: InitializeInvoicingSubscriptionAddressPayload], InitializeInvoicingSubscriptionAddressPayload, "editInvoicingSubscriptionDetailView/initializeInvoicingSubscriptionAddress", never, never>, syncInvoicingSubscriptionCoupons: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SyncInvoicingSubscriptionCouponsPayload], SyncInvoicingSubscriptionCouponsPayload, "editInvoicingSubscriptionDetailView/syncInvoicingSubscriptionCoupons", never, never>;
+}, "editInvoicingSubscriptionDetailView/submitInvoicingSubscriptionFormSuccess">, submitInvoicingSubscriptionFormFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "editInvoicingSubscriptionDetailView/submitInvoicingSubscriptionFormFailure">, resetEditInvoicingSubscriptionDetailView: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<{
+    id?: ID;
+} | undefined, "editInvoicingSubscriptionDetailView/resetEditInvoicingSubscriptionDetailView">, initializeInvoicingSubscriptionAddress: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: InitializeInvoicingSubscriptionAddressPayload], InitializeInvoicingSubscriptionAddressPayload, "editInvoicingSubscriptionDetailView/initializeInvoicingSubscriptionAddress", never, never>, syncInvoicingSubscriptionCoupons: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: SyncInvoicingSubscriptionCouponsPayload], SyncInvoicingSubscriptionCouponsPayload, "editInvoicingSubscriptionDetailView/syncInvoicingSubscriptionCoupons", never, never>;
 declare const _default: import("redux").Reducer<EditInvoicingSubscriptionDetailViewState>;
 export default _default;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.syncInvoicingSubscriptionCoupons = exports.initializeInvoicingSubscriptionAddress = exports.resetEditInvoicingSubscriptionDetailView = exports.submitInvoicingSubscriptionFormFailure = exports.submitInvoicingSubscriptionFormSuccess = exports.submitInvoicingSubscriptionForm = exports.updateInvoicingSubscriptionFormDraft = exports.updateInvoicingSubscriptionDetailFailure = exports.updateInvoicingSubscriptionDetail = exports.seedInvoicingSubscriptionFormDraft = exports.fetchInvoicingSubscriptionFormPage = exports.fetchInvoicingSubscriptionDetailPage = exports.fetchInvoicingSubscriptionDetail = exports.runInvoicingSubscriptionActionSuccess = exports.runInvoicingSubscriptionActionFailure = exports.runInvoicingSubscriptionAction = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingSubscriptionFormConfig_1 = require("./invoicingSubscriptionFormConfig");
 exports.initialState = {
     fetchState: 'Not-Started',
@@ -69,15 +70,12 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftFailure)(draft.editDraftById, action.payload.id, invoicingSubscriptionFormConfig_1.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;
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSeed)(draft.editDraftById, id, localData);
         },
         fetchInvoicingSubscriptionFormPage: {
             reducer() {
@@ -91,7 +89,7 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
         updateInvoicingSubscriptionFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                (0, invoicingFormDraft_1.applyInvoicingFormDraftEdit)(draft.editDraftById, id, localData);
             }
             else {
                 draft.newSubscriptionDraft = localData;
@@ -111,19 +109,32 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.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.
+            (0, invoicingFormDraft_1.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 = {
-                ...invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData,
-            };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newSubscriptionDraft = {
+                    ...invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData,
+                };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingSubscriptionAddressEpic.
         initializeInvoicingSubscriptionAddress: {

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewSelector.d.ts

@@ -41,6 +41,15 @@ export interface InvoicingSubscriptionFormView extends SelectorView {
      * Folded in here so the screen never reaches for the config view itself.
      */
     fieldHelp: InvoicingFieldHelpByCode;
+    /**
+     * True while the subscription 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
+     * subscription. 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: InvoicingSubscriptionFormLocalData;
     mode: 'create' | 'edit';
     /**

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

@@ -8,6 +8,7 @@ const couponViewSelector_1 = require("../couponView/couponViewSelector");
 const invoicingCatalogListViewSelector_1 = require("../invoicingCatalogListView/invoicingCatalogListViewSelector");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
 const invoicingCustomerListViewSelector_1 = require("../invoicingCustomerListView/invoicingCustomerListViewSelector");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingSubscriptionFormConfig_1 = require("./invoicingSubscriptionFormConfig");
 const invoicingSubscriptionFormConfig_2 = require("./invoicingSubscriptionFormConfig");
 const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptionID) => {
@@ -37,8 +38,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     // `seedInvoicingSubscriptionFormDraftEpic` when the detail load lands. Until
     // then the page is showing its skeleton.
     const localData = invoicingSubscriptionID != null
-        ? (editDraftById[invoicingSubscriptionID] ??
-            invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData)
+        ? (0, invoicingFormDraft_1.getInvoicingFormDraftLocalData)(editDraftById, invoicingSubscriptionID, invoicingSubscriptionFormConfig_1.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
@@ -69,6 +69,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
         subscriptionLifecycleActionOptions: configState.subscriptionLifecycleActionOptions,
         subscriptionMetadataEditAllowedFromStatuses: configState.subscriptionMetadataEditAllowedFromStatuses,
         recordState,
+        isFormLoading: (0, invoicingFormDraft_1.isInvoicingFormDraftPending)(editDraftById, invoicingSubscriptionID),
         fieldHelp: (0, invoicingConfigViewSelector_1.invoicingFieldHelpForGroup)(state, 'subscription'),
         coupons: (0, couponViewSelector_1.getInvoicingCouponListItems)(state),
         customers: (0, invoicingCustomerListViewSelector_1.getInvoicingCustomerListView)(state).customers,

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/editInvoicingSubscriptionDetailViewState.d.ts

@@ -1,5 +1,6 @@
 import { Amount } from '../../../commonStateTypes/amount';
 import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { InvoicingFormDraftById } from '../invoicingFormDraft';
 /**
  * Draft form state for the create/edit subscription form. Held in CES so the
  * form flows its data from here (mirrors the customer form / bill-pay pattern).
@@ -41,7 +42,7 @@ export interface InvoicingSubscriptionFormLocalData {
 export interface EditInvoicingSubscriptionDetailViewState extends FetchedState {
     /** Lifecycle action fetch state per subscription id. */
     actionStateById: Record<ID, FetchStateAndError>;
-    editDraftById: Record<ID, InvoicingSubscriptionFormLocalData>;
+    editDraftById: InvoicingFormDraftById<InvoicingSubscriptionFormLocalData>;
     newSubscriptionDraft: InvoicingSubscriptionFormLocalData;
     /** Detail-load state per subscription id. */
     recordStateById: Record<ID, FetchStateAndError>;

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

@@ -19,8 +19,11 @@ const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pipe((0, o
     const { subscriptionId } = action.payload;
     const pageActions = [
         (0, invoicingCustomerListViewReducer_1.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.
         (0, invoicingCatalogListViewReducer_1.fetchInvoicingCatalogPlanList)({
-            filters: {},
+            filters: { type: 'plan' },
             keepExistingListItems: false,
         }),
         (0, couponViewReducer_1.fetchInvoicingCouponList)({ filters: {}, keepExistingListItems: false }),

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

@@ -20,7 +20,7 @@ const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pi
     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/view/invoicing/editInvoicingSubscriptionDetailView/seedInvoicingSubscriptionFormDraftEpic.d.ts

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

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

@@ -7,14 +7,35 @@ const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSub
 const invoicingSubscriptionDetailHelper_1 = require("./invoicingSubscriptionDetailHelper");
 const invoicingSubscriptionFormConfig_1 = require("./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.
  */
-const seedInvoicingSubscriptionFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
-    const { id } = action.payload;
-    const subscription = (0, invoicingSubscriptionDetailHelper_1.getInvoicingSubscriptionById)(state, id);
+const seedInvoicingSubscriptionFormDraftEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match(action) ||
+    editInvoicingSubscriptionDetailViewReducer_1.fetchInvoicingSubscriptionFormPage.match(action)), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([action, state]) => {
+    const id = editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match(action)
+        ? action.payload.id
+        : action.payload.subscriptionId;
+    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 (editInvoicingSubscriptionDetailViewReducer_1.fetchInvoicingSubscriptionFormPage.match(action) &&
+        state.editInvoicingSubscriptionDetailViewState.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 subscription = id != null ? (0, invoicingSubscriptionDetailHelper_1.getInvoicingSubscriptionById)(state, id) : undefined;
     if (subscription == null) {
         return rxjs_1.EMPTY;
     }

package/lib/view/invoicing/invoicingFormDraft.d.ts

@@ -0,0 +1,63 @@
+import { FetchState, ID } from '../../commonStateTypes/common';
+/**
+ * A create/edit form's draft, plus where its values came from.
+ *
+ * The status is what lets an edit form tell "these are the record's values"
+ * from "these are whatever the form had at first render". It cannot be read off
+ * the presence of a draft, because the form writes drafts too: it pushes its
+ * whole state back on every change, so a change made before the record landed
+ * leaves a draft that looks seeded but holds nothing.
+ *
+ * `Not-Started` — not (or no longer) the loaded record's values: written by the
+ *                 form before the record landed, or just saved and awaiting the
+ *                 refetch that follows. A successful load replaces it.
+ * `Completed`   — filled from the loaded record; the form may have edited it since.
+ * `Error`       — the record's fetch failed, so the form starts blank and a
+ *                 later successful fetch is still allowed to seed it.
+ */
+export interface InvoicingFormDraft<TLocalData> {
+    fetchState: FetchState;
+    localData: TLocalData;
+}
+export type InvoicingFormDraftById<TLocalData> = Record<ID, InvoicingFormDraft<TLocalData>>;
+/**
+ * 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 declare function applyInvoicingFormDraftEdit<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID, localData: TLocalData): void;
+/**
+ * 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 declare function applyInvoicingFormDraftSeed<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID, localData: TLocalData): void;
+/**
+ * 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 declare function applyInvoicingFormDraftFailure<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID, blankLocalData: TLocalData): void;
+/**
+ * The record behind this draft was just saved and is about to be refetched.
+ * Keep the values on screen — dropping them would blank the form for the round
+ * trip, and the form remounts on the response anyway — but stop counting them
+ * as the loaded record's, so that response is allowed to replace them.
+ */
+export declare function applyInvoicingFormDraftSaved<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID): void;
+/** The draft's values, or the blank form when nothing is drafted yet. */
+export declare function getInvoicingFormDraftLocalData<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID | undefined, blankLocalData: TLocalData): TLocalData;
+/**
+ * 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 declare function isInvoicingFormDraftPending<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID | undefined): boolean;

package/lib/view/invoicing/invoicingFormDraft.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyInvoicingFormDraftEdit = applyInvoicingFormDraftEdit;
+exports.applyInvoicingFormDraftSeed = applyInvoicingFormDraftSeed;
+exports.applyInvoicingFormDraftFailure = applyInvoicingFormDraftFailure;
+exports.applyInvoicingFormDraftSaved = applyInvoicingFormDraftSaved;
+exports.getInvoicingFormDraftLocalData = getInvoicingFormDraftLocalData;
+exports.isInvoicingFormDraftPending = isInvoicingFormDraftPending;
+/**
+ * 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.
+ */
+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.
+ */
+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.
+ */
+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 record behind this draft was just saved and is about to be refetched.
+ * Keep the values on screen — dropping them would blank the form for the round
+ * trip, and the form remounts on the response anyway — but stop counting them
+ * as the loaded record's, so that response is allowed to replace them.
+ */
+function applyInvoicingFormDraftSaved(draftById, id) {
+    const existing = draftById[id];
+    if (existing == null) {
+        return;
+    }
+    existing.fetchState = 'Not-Started';
+}
+/** The draft's values, or the blank form when nothing is drafted yet. */
+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.
+ */
+function isInvoicingFormDraftPending(draftById, id) {
+    if (id == null) {
+        return false;
+    }
+    const fetchState = draftById[id]?.fetchState;
+    return fetchState !== 'Completed' && fetchState !== 'Error';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.49",
+  "version": "5.2.50-betaAK0",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",