@zeniai/client-epic-state 5.2.41-beta5MM → 5.2.41-beta7MM

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

@@ -3,7 +3,6 @@ import { toClassBasePayload } from '../../../entity/class/classPayload';
 import { blankInvoicingCatalogSubFamily, isTieredCatalogPricingModel, } from './invoicingCatalogItemFormHelper';
 const CURRENCY_CODE = 'USD';
 const trimOrUndefined = (value) => value.trim() !== '' ? value.trim() : undefined;
-const trimOrNull = (value) => value.trim() !== '' ? value.trim() : null;
 const toProductCode = (value) => value
     .trim()
     .toLowerCase()
@@ -91,13 +90,24 @@ const buildSubFamilyPayload = (localData, subFamily, clearEmptyValues, lookup) =
 /** `unit` is the item's unit of measure, not a currency; `CURRENCY_CODE` above prices Price points. */
 const DEFAULT_CATALOG_ITEM_UNIT = 'USD';
 /**
- * Build the parent catalog-item request body from the form draft. Creates omit
- * both parent and price point IDs; edits retain returned price point IDs.
+ * Build the parent catalog-item request body from the form draft. Every field
+ * the form holds is sent, so a value cleared on the form is cleared on the
+ * item: the service reads an absent key as "leave it alone", which is why
+ * `description` travels as an empty string and `applicable_items` as an empty
+ * list rather than being dropped. Fields the form does not collect
+ * (`external_name`, `item_family_id`, `metadata`, …) stay off the body so an
+ * edit cannot overwrite them with a value nobody chose.
  */
 export const localDataToSaveInvoicingCatalogItemPayload = (localData, isCreate, lookup) => {
-    const description = trimOrUndefined(localData.description);
     const productCode = trimOrUndefined(localData.productCode) ?? toProductCode(localData.name);
     const itemPayload = {
+        // `applicable_items` only means anything while the item is restricted;
+        // sending the empty list otherwise is what clears a restriction that was
+        // just lifted.
+        applicable_items: localData.itemApplicability === 'restricted'
+            ? localData.applicableItems
+            : [],
+        description: trimOrUndefined(localData.description) ?? '',
         enabled_for_checkout: true,
         enabled_in_portal: true,
         is_giftable: false,
@@ -107,41 +117,63 @@ export const localDataToSaveInvoicingCatalogItemPayload = (localData, isCreate,
         name: localData.name.trim(),
         product_code: productCode,
         type: localData.catalogType,
+        // The form no longer collects a unit; an item that already has one keeps it.
+        unit: trimOrUndefined(localData.unit) ?? DEFAULT_CATALOG_ITEM_UNIT,
     };
-    if (description != null) {
-        itemPayload.description = description;
-    }
-    // The form no longer collects a unit; an item that already has one keeps it.
-    itemPayload.unit =
-        trimOrUndefined(localData.unit) ?? DEFAULT_CATALOG_ITEM_UNIT;
-    if (localData.itemApplicability === 'restricted' &&
-        localData.applicableItems.length > 0) {
-        itemPayload.applicable_items = localData.applicableItems;
+    // The external id is assigned by the billing service and shown read-only, so
+    // it is echoed back only when the item already has one: sending the blank a
+    // create starts with would clear an id assigned in the meantime.
+    const externalId = trimOrUndefined(localData.externalId);
+    if (externalId != null) {
+        itemPayload.external_id = externalId;
     }
     const subFamilies = localData.subFamilies.length > 0
         ? localData.subFamilies
         : [blankInvoicingCatalogSubFamily()];
-    itemPayload.sub_family_details = isCreate
-        ? subFamilies.map((subFamily) => buildSubFamilyPayload(localData, subFamily, false, lookup))
-        : subFamilies.map((subFamily) => {
-            const priceCode = trimOrUndefined(subFamily.priceCode) ?? toProductCode(subFamily.name);
-            const detail = {
-                description: trimOrNull(subFamily.description),
-                invoice_notes: trimOrNull(subFamily.invoiceNotes),
-                name: subFamily.name.trim(),
-                price_code: priceCode,
-                show_description_in_invoices: subFamily.showDescriptionInInvoices,
-            };
-            // Edits send a narrower body than creates, but the accounting mapping
-            // is editable on this form, so leaving it out dropped the account and
-            // class the user had just picked. `null` rather than omitted when it is
-            // empty: an absent key on an update reads as "leave it alone", which
-            // would make a cleared mapping impossible to save — the same reason
-            // `description` and `invoice_notes` go through `trimOrNull`.
-            detail.accounting_detail =
-                buildAccountingDetail(subFamily, lookup) ?? null;
-            const id = trimOrUndefined(subFamily.id);
-            return id != null ? { ...detail, id } : detail;
-        });
+    if (isCreate) {
+        itemPayload.sub_families = subFamilies.map((subFamily) => buildSubFamilyPayload(localData, subFamily, false, lookup));
+        return itemPayload;
+    }
+    // Only price points the service has already stored travel in an update: it
+    // addresses them by id, and a blank one has nothing to address. A price point
+    // added on the form is created by its own request once the item is saved,
+    // rather than riding along as a row the update cannot place.
+    itemPayload.sub_families = subFamilies
+        .filter((subFamily) => subFamily.id !== '')
+        .map((subFamily) => {
+        // Edits send the same body a create does. The narrower hand-built one
+        // this replaces had to be kept in step by hand and was not: it dropped
+        // `accounting_detail` once, and `billing_cycles`, `price`,
+        // `pricing_model`, `period`, the trial fields, `proration_type`,
+        // `free_quantity`, `is_taxable` and `tiers` were never added at all, so
+        // editing any of them looked saved and changed nothing.
+        const detail = buildSubFamilyPayload(localData, subFamily, true, lookup);
+        // `null` rather than omitted when empty: an absent key on an update
+        // reads as "leave it alone", which would make a cleared mapping
+        // impossible to save — the same reason `description` and
+        // `invoice_notes` are cleared rather than dropped above.
+        detail.accounting_detail = detail.accounting_detail ?? null;
+        // Never blank: the filter above leaves only price points the service has
+        // already stored, which is the only kind an update can address.
+        return { ...detail, id: subFamily.id };
+    });
     return itemPayload;
 };
+/**
+ * The bodies that create the price points added on an edit form, one per
+ * request to `/catalog/products`.
+ *
+ * An update cannot carry them: it addresses price points by id, and these have
+ * none until the service assigns one. They are bound to their item by
+ * `item_id`, so this needs the saved item's id and runs after the item itself
+ * is saved.
+ *
+ * Empty values are left off rather than sent as `null`: there is nothing on a
+ * price point that does not exist yet to clear.
+ */
+export const localDataToCreateInvoicingCatalogProductPayloads = (localData, itemId, lookup) => localData.subFamilies
+    .filter((subFamily) => subFamily.id === '')
+    .map((subFamily) => ({
+    ...buildSubFamilyPayload(localData, subFamily, false, lookup),
+    item_id: itemId,
+}));

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,7 +2,8 @@ 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 { getInvoicingQboView, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
+import { INVOICING_DEFAULT_INCOME_ACCOUNT_TYPES, INVOICING_INCOME_ACCOUNT_MAPPING_SLOT, NO_INVOICING_ACCOUNT_HIERARCHY, NO_INVOICING_ACCOUNT_IDS, NO_INVOICING_CLASS_HIERARCHY, getInvoicingQboAccountOptions, getInvoicingQboView, invoicingQboAccountIdsForMappingSlot, 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) => ({
     fetchState: state.editInvoicingCatalogItemDetailViewState.fetchState,
@@ -43,6 +44,21 @@ const NOT_STARTED = {
     error: undefined,
     fetchState: 'Not-Started',
 };
+/**
+ * The QuickBooks ids a price point's income account may be picked from.
+ *
+ * Memoized, and collapsing to one shared empty array while QBO is disconnected:
+ * the pages turn this into their picker options and re-seed their form defaults
+ * when those change, so a fresh array on every store change would reset the form
+ * under the user — including mid-save.
+ */
+const getInvoicingCatalogIncomeAccountIds = createSelector([
+    getInvoicingQboAccountOptions,
+    (state) => getInvoicingConfigView(state).qboAccountMappingKindOptions,
+    isInvoicingQboConnected,
+], (accounts, qboAccountMappingKindOptions, isQboConnected) => isQboConnected
+    ? invoicingQboAccountIdsForMappingSlot(accounts, qboAccountMappingKindOptions, INVOICING_INCOME_ACCOUNT_MAPPING_SLOT, INVOICING_DEFAULT_INCOME_ACCOUNT_TYPES)
+    : NO_INVOICING_ACCOUNT_IDS);
 export const getInvoicingCatalogItemFormView = (state, id) => {
     const { editDraftById, error, fetchState, newItemDraft, savedItemId, savedKind, } = state.editInvoicingCatalogItemDetailViewState;
     const plan = id != null ? getInvoicingPlanById(state.invoicingPlanState, id) : undefined;
@@ -52,7 +68,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,9 +106,12 @@ 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 ?? [],
+        qboAccountHierarchy: qboView?.nestedAccountHierarchy ?? NO_INVOICING_ACCOUNT_HIERARCHY,
+        qboClassHierarchy: qboView?.nestedClassHierarchy ?? NO_INVOICING_CLASS_HIERARCHY,
+        qboIncomeAccountIds: getInvoicingCatalogIncomeAccountIds(state),
         applicabilityValues: INVOICING_CATALOG_APPLICABILITY_VALUES,
         applicableItemOptions,
         localData,

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

@@ -3,13 +3,7 @@
  * for pricing model, tier type, proration or applicability yet, so these stay
  * here until it does. Everything else on this form comes from `/1.0/config`.
  */
-export const INVOICING_CATALOG_PRICING_MODEL_VALUES = [
-    'flat_fee',
-    'per_unit',
-    'tiered',
-    'volume',
-    'stairstep',
-];
+export const INVOICING_CATALOG_PRICING_MODEL_VALUES = ['flat_fee', 'per_unit', 'tiered', 'volume', 'stairstep'];
 export const INVOICING_CATALOG_TIER_TYPE_VALUES = [
     'per_unit',
     'flat_fee',

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

@@ -1,4 +1,4 @@
-import { from } from 'rxjs';
+import { forkJoin, from } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { mergeInvoicingPlanSubFamily, updateInvoicingPlans, } from '../../../entity/invoicing/plan/planReducer';
 import { updateInvoicingProducts } from '../../../entity/invoicing/product/productReducer';
@@ -7,7 +7,7 @@ import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { addInvoicingCatalogItem } from '../invoicingCatalogListView/invoicingCatalogListViewReducer';
 import { getInvoicingCatalogAccountingLookup } from '../invoicingQboView/invoicingQboViewSelector';
-import { localDataToSaveInvoicingCatalogItemPayload, } from './editInvoicingCatalogItemDetailViewPayload';
+import { localDataToCreateInvoicingCatalogProductPayloads, localDataToSaveInvoicingCatalogItemPayload, } from './editInvoicingCatalogItemDetailViewPayload';
 import { submitInvoicingCatalogItemForm, submitInvoicingCatalogItemFormFailure, submitInvoicingCatalogItemFormSuccess, } from './editInvoicingCatalogItemDetailViewReducer';
 export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => submitInvoicingCatalogItemForm.match(action)), mergeMap((action) => {
     const { id } = action.payload;
@@ -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
@@ -80,7 +81,20 @@ export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actio
                 }));
                 return resultActions;
             };
-            return completeSave([]);
+            // Price points added on an edit form cannot ride in the update:
+            // it addresses them by id and they have none yet. They are created
+            // against the item that was just saved, and their responses join
+            // the same success — one of them failing is the whole save
+            // failing, since the item on screen would otherwise claim price
+            // points the service never stored. A create needs none of this:
+            // its price points are nested in the item body.
+            const newProductPayloads = id != null
+                ? localDataToCreateInvoicingCatalogProductPayloads(localData, savedItem.id, accountingLookup)
+                : [];
+            if (newProductPayloads.length === 0) {
+                return completeSave([]);
+            }
+            return forkJoin(newProductPayloads.map((productPayload) => zeniAPI.postAndGetJSON(`${baseUrl}/catalog/products`, productPayload))).pipe(mergeMap((productResponses) => completeSave(productResponses)));
         }
         return from([
             submitInvoicingCatalogItemFormFailure(response.status),

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/editInvoicingCouponDetailViewPayload.js

@@ -1,9 +1,13 @@
+import { toAccountPayload } from '../../../entity/account/accountPayload';
 /**
  * Build the create/update discount request body from the form draft (snake_case
  * matching the `/discounts` schema). On create the coupon id is part of the
  * body; on edit it is the URL param, so it is omitted here.
+ *
+ * `accountByQboId` resolves the discounts-account picker back to the account
+ * record the body carries, the same way the catalog and QBO settings bodies do.
  */
-export const localDataToSaveInvoicingCouponPayload = (localData, isCreate) => {
+export const localDataToSaveInvoicingCouponPayload = (localData, isCreate, accountByQboId) => {
     const data = {
         apply_on: localData.applyOn,
         discount_type: localData.discountType,
@@ -54,5 +58,16 @@ export const localDataToSaveInvoicingCouponPayload = (localData, isCreate) => {
     if (invoiceNotes !== '') {
         data.invoice_notes = invoiceNotes;
     }
+    // Omitted rather than sent as `null` when there is none: the service reads a
+    // blank discounts account as "not given" and leaves what it has, which is
+    // what keeps a form that never showed the picker — QBO disconnected — from
+    // clearing an account set elsewhere.
+    const discountsAccountId = localData.discountsAccountId.trim();
+    const discountsAccount = discountsAccountId !== ''
+        ? accountByQboId?.(discountsAccountId)
+        : undefined;
+    if (discountsAccount != null) {
+        data.discounts_account = toAccountPayload(discountsAccount);
+    }
     return data;
 };

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

@@ -1,13 +1,32 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
 import { getInvoicingCouponById } from '../../../entity/invoicing/coupon/couponSelector';
 import { toInvoicingFormOption, } from '../../../entity/invoicing/invoicingCommonPayload';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { initialInvoicingCouponFormLocalData, } from './editInvoicingCouponDetailViewState';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
+import { INVOICING_DEFAULT_INCOME_ACCOUNT_TYPES, INVOICING_DISCOUNTS_ACCOUNT_MAPPING_SLOT, NO_INVOICING_ACCOUNT_HIERARCHY, NO_INVOICING_ACCOUNT_IDS, getInvoicingQboAccountOptions, getInvoicingQboView, invoicingQboAccountByQboId, invoicingQboAccountIdsForMappingSlot, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
+import { getInvoicingSettings, getInvoicingSettingsFetchState, } from '../settingsView/settingsViewSelector';
+import { initialInvoicingCouponFormLocalData, invoicingCouponDiscountsAccountIdForCreate, } from './editInvoicingCouponDetailViewState';
 /**
  * Bundled view for the discount create/edit form: the save fetch state/error,
  * the id of the coupon last saved, and — when a `couponId` is passed (edit
  * mode) — the existing coupon entity to prefill the form.
  */
+/**
+ * The QuickBooks ids the discounts account may be picked from.
+ *
+ * Memoized, and collapsing to one shared empty array while QBO is disconnected:
+ * the form turns this into its picker options and re-seeds its defaults when
+ * those change, so a fresh array on every store change would reset the form
+ * under the user until their first edit.
+ */
+const getInvoicingCouponDiscountsAccountIds = createSelector([
+    getInvoicingQboAccountOptions,
+    (state) => getInvoicingConfigView(state).qboAccountMappingKindOptions,
+    isInvoicingQboConnected,
+], (accounts, qboAccountMappingKindOptions, isQboConnected) => isQboConnected
+    ? invoicingQboAccountIdsForMappingSlot(accounts, qboAccountMappingKindOptions, INVOICING_DISCOUNTS_ACCOUNT_MAPPING_SLOT, INVOICING_DEFAULT_INCOME_ACCOUNT_TYPES)
+    : NO_INVOICING_ACCOUNT_IDS);
 const NOT_STARTED = {
     error: undefined,
     fetchState: 'Not-Started',
@@ -23,6 +42,9 @@ export const getEditInvoicingCouponDetailViewState = (state, couponId) => {
             fetchState: 'Not-Started',
         })
         : { error: undefined, fetchState: 'Completed' };
+    const coupon = couponId != null
+        ? getInvoicingCouponById(state.invoicingCouponState, couponId)
+        : undefined;
     return {
         actionState: couponId != null
             ? (state.editInvoicingCouponDetailViewState.actionStateById[couponId] ??
@@ -36,9 +58,9 @@ export const getEditInvoicingCouponDetailViewState = (state, couponId) => {
             { error: undefined, fetchState: configFetchState },
         ]),
         recordState,
-        coupon: couponId != null
-            ? getInvoicingCouponById(state.invoicingCouponState, couponId)
-            : undefined,
+        isFormLoading: isInvoicingFormDraftPending(state.editInvoicingCouponDetailViewState.editDraftById, couponId),
+        coupon,
+        discountsAccountName: invoicingQboAccountByQboId(state, coupon?.discountsAccountId)?.accountName,
         savedCouponId,
         fetchState,
         error,
@@ -58,16 +80,57 @@ 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, } = getInvoicingConfigView(state);
+    const isQboConnected = isInvoicingQboConnected(state);
+    const qboView = isQboConnected ? getInvoicingQboView(state) : undefined;
+    const isQboPickerDataLoading = isInvoicingAccountingPickerDataLoading(state);
+    const settingsFetchState = getInvoicingSettingsFetchState(state).fetchState;
+    // Only a create reads the settings, and only until they arrive: an `Error`
+    // is a create that starts on no account, not a page that never renders.
+    const isCreateSeedPending = couponId == null &&
+        (settingsFetchState === 'Not-Started' ||
+            settingsFetchState === 'In-Progress');
     return {
         ...base,
         applyOnOptions: discountApplyOnOptions.map(toInvoicingFormOption),
         discountTypeOptions: discountTypeOptions.map(toInvoicingFormOption),
         durationTypeOptions: discountDurationTypeOptions.map(toInvoicingFormOption),
-        localData,
+        isQboConnected,
+        isQboPickerDataLoading,
+        // Widened past the record and config the detail page waits on: the form
+        // also renders from the account list, and seeds a create from the settings
+        // discounts account. A form that mounted before those landed would offer an
+        // empty picker and save a coupon with no account of its own — not wrong,
+        // since blank means "use the settings account", but not what the user was
+        // shown either. Widened here rather than on the base view, so the detail
+        // page does not start waiting on lists it never renders.
+        //
+        // Only while they are still coming, though, and the settings only on a
+        // create: a coupon saves fine without a discounts account, so neither is
+        // allowed to hold the form behind a skeleton once it has failed.
+        pageFetchState: reduceAllFetchState([
+            base.pageFetchState,
+            {
+                error: undefined,
+                fetchState: isQboPickerDataLoading || isCreateSeedPending
+                    ? 'In-Progress'
+                    : 'Completed',
+            },
+        ]),
+        localData: couponId != null
+            ? localData
+            : {
+                ...localData,
+                // Seeded from settings only while the draft has none of its own, so
+                // the picker shows the account a create would post against before
+                // the user touches it, and stops seeding the moment they pick.
+                discountsAccountId: invoicingCouponDiscountsAccountIdForCreate(localData.discountsAccountId, getInvoicingSettings(state)?.qbo?.account_mappings),
+            },
         mode: couponId != null ? 'edit' : 'create',
         periodUnitOptions: billingPeriodUnitOptions.map(toInvoicingFormOption),
+        qboAccountHierarchy: qboView?.nestedAccountHierarchy ?? NO_INVOICING_ACCOUNT_HIERARCHY,
+        qboIncomeAccountIds: getInvoicingCouponDiscountsAccountIds(state),
     };
 };