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

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),
     };
 };

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

@@ -1,9 +1,11 @@
+import { getInvoicingQboAccountMappingId, } from '../../../entity/invoicing/invoicingCommonPayload';
 export const initialInvoicingCouponFormLocalData = {
     applyOn: 'invoice_amount',
     couponCode: '',
     couponId: '',
     discountPercentage: '',
     discountQuantity: '',
+    discountsAccountId: '',
     discountType: 'percentage',
     durationType: 'one_time',
     invoiceName: '',
@@ -29,6 +31,10 @@ export const entityToInvoicingCouponFormLocalData = (coupon) => {
             ? String(coupon.discountPercentage)
             : '',
         discountQuantity: coupon.discountQuantity != null ? String(coupon.discountQuantity) : '',
+        // The coupon's own account, never the current setting: an edit shows what
+        // this coupon will post against, which is what was stored when it was
+        // saved even if the settings default has moved since.
+        discountsAccountId: coupon.discountsAccountId ?? '',
         discountType: coupon.discountType ?? 'percentage',
         durationType: coupon.durationType ?? 'one_time',
         invoiceName: coupon.invoiceName ?? '',
@@ -41,3 +47,19 @@ export const entityToInvoicingCouponFormLocalData = (coupon) => {
         validTill: coupon.validTill != null ? coupon.validTill.format('YYYY-MM-DD') : '',
     };
 };
+/**
+ * The discounts account a create starts from: the draft's own pick, or the QBO
+ * settings discounts account while the user has not made one. Read by both the
+ * form view and the save, so what the picker shows is what the request sends —
+ * a create that leaves the picker alone still stores the settings account on
+ * the coupon rather than relying on the setting staying put.
+ *
+ * Create only. An edit shows the coupon's stored account, so a coupon saved
+ * without one keeps showing none.
+ */
+export const invoicingCouponDiscountsAccountIdForCreate = (discountsAccountId, accountMappings) => {
+    const pickedAccountId = discountsAccountId.trim();
+    return pickedAccountId !== ''
+        ? pickedAccountId
+        : (getInvoicingQboAccountMappingId(accountMappings ?? undefined, 'discounts_account') ?? '');
+};

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

@@ -1,6 +1,8 @@
 import { EMPTY, from } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
 import { fetchInvoicingConfig } from '../invoicingConfigView/invoicingConfigViewReducer';
+import { fetchInvoicingAccountingPickers, fetchInvoicingQboConnection, } from '../invoicingQboView/invoicingQboViewReducer';
+import { fetchInvoicingSettings } from '../settingsView/settingsViewReducer';
 import { fetchInvoicingCouponDetail, fetchInvoicingCouponDetailPage, } from './editInvoicingCouponDetailViewReducer';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -10,10 +12,12 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
     (fetchStateAndError.fetchState !== 'Completed' &&
         fetchStateAndError.fetchState !== 'In-Progress');
 /**
- * Orchestrates the discount detail page: one action fans out to the coupon
- * record and the invoicing config behind its dropdowns and field help, each
- * skipped when already cached. The page reads a single reduced fetch state off
- * the view, so the form mounts once with real values.
+ * Orchestrates the discount pages: one action fans out to the coupon record,
+ * the invoicing config behind its dropdowns and field help, and the QuickBooks
+ * connection, account list and settings the form's Discounts account picker
+ * renders and seeds from — each skipped when already cached. The page reads a
+ * single reduced fetch state off the view, so the form mounts once with real
+ * values.
  */
 export const fetchInvoicingCouponDetailPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoicingCouponDetailPage.match), withLatestFrom(state$), mergeMap(([action, state]) => {
     const { cacheOverride = false, id } = action.payload;
@@ -32,5 +36,19 @@ export const fetchInvoicingCouponDetailPageEpic = (actions$, state$) => actions$
     if (shouldFetch({ error: configState.error, fetchState: configState.fetchState }, cacheOverride)) {
         pageActions.push(fetchInvoicingConfig());
     }
+    const qboState = state.invoicingQboViewState;
+    if (shouldFetch(qboState.connectionFetchState, cacheOverride)) {
+        pageActions.push(fetchInvoicingQboConnection());
+    }
+    // The picker epic tops up the shared account list and skips what the
+    // store already holds, so this is safe to ask for on every open.
+    pageActions.push(fetchInvoicingAccountingPickers());
+    const settingsState = state.invoicingSettingsViewState;
+    if (shouldFetch({ error: settingsState.error, fetchState: settingsState.fetchState }, cacheOverride)) {
+        // A create seeds its Discounts account from the settings mapping, so
+        // the settings are page data here rather than a settings-screen
+        // concern.
+        pageActions.push(fetchInvoicingSettings());
+    }
     return pageActions.length > 0 ? from(pageActions) : EMPTY;
 }));

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

@@ -5,8 +5,11 @@ import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiE
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { addInvoicingCouponToList } from '../couponView/couponViewReducer';
+import { invoicingQboAccountByQboId } from '../invoicingQboView/invoicingQboViewSelector';
+import { getInvoicingSettings } from '../settingsView/settingsViewSelector';
 import { localDataToSaveInvoicingCouponPayload, } from './editInvoicingCouponDetailViewPayload';
 import { saveInvoicingCoupon, submitInvoicingCouponForm, submitInvoicingCouponFormFailure, submitInvoicingCouponFormSuccess, } from './editInvoicingCouponDetailViewReducer';
+import { invoicingCouponDiscountsAccountIdForCreate } from './editInvoicingCouponDetailViewState';
 export const saveInvoicingCouponEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => submitInvoicingCouponForm.match(action) ||
     saveInvoicingCoupon.match(action)), mergeMap((action) => {
     const { id } = action.payload;
@@ -14,11 +17,22 @@ export const saveInvoicingCouponEpic = (actions$, state$, zeniAPI) => actions$.p
     const data = saveInvoicingCoupon.match(action)
         ? action.payload.data
         : (() => {
-            const viewState = state$.value.editInvoicingCouponDetailViewState;
-            const localData = (id != null
-                ? viewState.editDraftById[id]
+            const state = state$.value;
+            const viewState = state.editInvoicingCouponDetailViewState;
+            const draft = (id != null
+                ? viewState.editDraftById[id]?.localData
                 : viewState.newCouponDraft) ?? viewState.newCouponDraft;
-            return localDataToSaveInvoicingCouponPayload(localData, id == null);
+            // The create default is resolved here as well as in the form view,
+            // so a create that never touched the picker still persists the
+            // settings account on the coupon instead of leaving it to whatever
+            // the setting says the day an invoice is raised.
+            const localData = id == null
+                ? {
+                    ...draft,
+                    discountsAccountId: invoicingCouponDiscountsAccountIdForCreate(draft.discountsAccountId, getInvoicingSettings(state)?.qbo?.account_mappings),
+                }
+                : draft;
+            return localDataToSaveInvoicingCouponPayload(localData, id == null, (qboId) => invoicingQboAccountByQboId(state, qboId));
         })();
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
     const path = id != null