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

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

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

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

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCustomerFormLocalData } from './invoicingCustomerFormConfig';
 export const initialState = {
     emailPreviewFetchState: { fetchState: 'Not-Started', error: undefined },
@@ -7,6 +8,7 @@ export const initialState = {
     emailPreviewCustomerId: undefined,
     promotionalCreditSubmitState: { fetchState: 'Not-Started', error: undefined },
     recordStateById: {},
+    billingAddressOwnerId: undefined,
     fetchState: 'Not-Started',
     error: undefined,
     editDraftById: {},
@@ -123,20 +125,17 @@ const editInvoicingCustomerDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.status,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingCustomerFormLocalData);
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingCustomerFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            applyInvoicingFormDraftSeed(draft.editDraftById, id, localData);
         },
         updateInvoicingCustomerFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newCustomerDraft = localData;
@@ -156,17 +155,30 @@ const editInvoicingCustomerDetailView = createSlice({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedCustomerId = action.payload.customerId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.customerId);
         },
         submitInvoicingCustomerFormFailure(draft, action) {
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
-        resetEditInvoicingCustomerDetailView(draft) {
+        /**
+         * Discard a form's draft — the customer's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * customer's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingCustomerDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedCustomerId = undefined;
-            draft.editDraftById = {};
-            draft.newCustomerDraft = { ...initialInvoicingCustomerFormLocalData };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newCustomerDraft = { ...initialInvoicingCustomerFormLocalData };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingCustomerAddressEpic.
         initializeInvoicingCustomerAddress: {
@@ -175,6 +187,10 @@ const editInvoicingCustomerDetailView = createSlice({
                 return { payload };
             },
         },
+        /** Record which customer the shared billing-address slot now belongs to. */
+        claimInvoicingCustomerBillingAddress(draft, action) {
+            draft.billingAddressOwnerId = action.payload.id;
+        },
     },
     extraReducers: (builder) => {
         builder.addCase(clearAll, (draft) => {
@@ -182,5 +198,5 @@ const editInvoicingCustomerDetailView = createSlice({
         });
     },
 });
-export const { fetchInvoicingPaymentLinkEmailPreview, fetchInvoicingPaymentLinkEmailPreviewPage, updateInvoicingPaymentLinkEmailPreview, updateInvoicingPaymentLinkEmailPreviewFailure, addPromotionalCreditsFailure, addPromotionalCreditsSuccess, fetchInvoicingCustomerDetail, fetchInvoicingCustomerDetailPage, seedInvoicingCustomerFormDraft, updateInvoicingCustomerDetail, resetPromotionalCreditAction, submitAddPromotionalCredits, updateInvoicingCustomerDetailFailure, updateInvoicingCustomerFormDraft, submitInvoicingCustomerForm, submitInvoicingCustomerFormSuccess, submitInvoicingCustomerFormFailure, resetEditInvoicingCustomerDetailView, initializeInvoicingCustomerAddress, } = editInvoicingCustomerDetailView.actions;
+export const { fetchInvoicingPaymentLinkEmailPreview, fetchInvoicingPaymentLinkEmailPreviewPage, updateInvoicingPaymentLinkEmailPreview, updateInvoicingPaymentLinkEmailPreviewFailure, addPromotionalCreditsFailure, addPromotionalCreditsSuccess, fetchInvoicingCustomerDetail, fetchInvoicingCustomerDetailPage, seedInvoicingCustomerFormDraft, updateInvoicingCustomerDetail, resetPromotionalCreditAction, submitAddPromotionalCredits, updateInvoicingCustomerDetailFailure, updateInvoicingCustomerFormDraft, submitInvoicingCustomerForm, submitInvoicingCustomerFormSuccess, submitInvoicingCustomerFormFailure, resetEditInvoicingCustomerDetailView, initializeInvoicingCustomerAddress, claimInvoicingCustomerBillingAddress, } = editInvoicingCustomerDetailView.actions;
 export default editInvoicingCustomerDetailView.reducer;

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

@@ -1,10 +1,12 @@
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
+import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { getInvoicesByIds } from '../../../entity/invoicing/invoice/invoiceSelector';
 import { getInvoicingCustomerById } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
 import { invoicingCustomerPaymentMethods } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
 import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingPaymentLinkSendState, getInvoicingPaymentMethodSaveState, getInvoicingPlaidLinkToken, getInvoicingPlaidLinkTokenFetchState, getInvoicingSentPaymentLinkEmail, getInvoicingSentPaymentLinkMagicUrl, getInvoicingSetupIntent, getInvoicingSetupIntentFetchState, } from '../customerPaymentMethod/customerPaymentMethodSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
+import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { isStripeConnectedFromSettings } from '../settingsView/invoicingSettingsHelpers';
 import { getInvoicingSettings } from '../settingsView/settingsViewSelector';
 import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE, initialInvoicingCustomerFormLocalData, } from './invoicingCustomerFormConfig';
@@ -49,6 +51,37 @@ export const getInvoicingCustomerRecord = (state, invoicingCustomerID) => {
  * fetch state/error, and the id of the customer last saved — so the form screen
  * depends on this single selector.
  */
+/**
+ * Whether the billing address entered on the Address screen is a change the
+ * customer has not saved. Presence alone cannot say so: the detail page seeds
+ * the address store with the saved address on load so the Address screen opens
+ * prefilled. Only a pending address that differs from the saved one — or one
+ * where nothing is saved yet — is an unsaved change. Compared on what the user
+ * enters; a saved address's coordinates and timestamps are left out.
+ */
+const isBillingAddressUnsaved = (state, id, savedBillingAddressId) => {
+    // The slot is keyed by address type alone; only a draft this customer owns counts.
+    if (id == null ||
+        state.editInvoicingCustomerDetailViewState.billingAddressOwnerId !== id) {
+        return false;
+    }
+    const pending = state.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE]?.addressToCreate;
+    if (pending == null) {
+        return false;
+    }
+    const saved = savedBillingAddressId != null
+        ? getAddressByAddressId(state.addressState, savedBillingAddressId)
+        : undefined;
+    if (saved == null) {
+        return true;
+    }
+    return !(pending.street.join('\u0000') === saved.street.join('\u0000') &&
+        pending.city === saved.city &&
+        pending.state === saved.state &&
+        pending.postalCode === saved.postalCode &&
+        pending.country === saved.country &&
+        (pending.countryCode ?? '') === (saved.countryCode ?? ''));
+};
 export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
     const { editDraftById, error, fetchState, newCustomerDraft, savedCustomerId } = state.editInvoicingCustomerDetailViewState;
     const mode = invoicingCustomerID != null ? 'edit' : 'create';
@@ -59,8 +92,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
     // `seedInvoicingCustomerFormDraftEpic` when the detail load lands. Until then
     // the page is showing its skeleton.
     const localData = invoicingCustomerID != null
-        ? (editDraftById[invoicingCustomerID] ??
-            initialInvoicingCustomerFormLocalData)
+        ? getInvoicingFormDraftLocalData(editDraftById, invoicingCustomerID, initialInvoicingCustomerFormLocalData)
         : newCustomerDraft;
     // Billing address is captured via the shared Address screen and seeded there
     // (from the address entity) on detail load, so the formatted label comes from
@@ -78,6 +110,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         ? { error: undefined, fetchState: 'Completed' }
         : (state.editInvoicingCustomerDetailViewState.recordStateById[invoicingCustomerID] ?? { error: undefined, fetchState: 'Not-Started' });
     const { emailPreview, emailPreviewCustomerId, emailPreviewFetchState } = state.editInvoicingCustomerDetailViewState;
+    const isFormLoading = isInvoicingFormDraftPending(editDraftById, invoicingCustomerID);
     return {
         // A preview cached for another customer is not this screen's.
         emailPreview: emailPreviewCustomerId === invoicingCustomerID ? emailPreview : undefined,
@@ -92,6 +125,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         promotionalCreditSubmitState: state.editInvoicingCustomerDetailViewState.promotionalCreditSubmitState,
         record: getInvoicingCustomerRecord(state, invoicingCustomerID),
         fieldHelp: invoicingFieldHelpForGroup(state, 'customer'),
+        isFormLoading,
         customerTypeOptions,
         localData,
         mode,
@@ -99,6 +133,7 @@ export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
         taxabilityOptions,
         billingAddressId,
         billingAddressLabel,
+        hasUnsavedBillingAddress: isBillingAddressUnsaved(state, invoicingCustomerID, customer?.billingAddressId),
         savedCustomerId,
         fetchState,
         error,

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

@@ -1,35 +1,61 @@
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { getInvoicingCustomerById } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
-import { newAddressInLocalStore } from '../../addressView/addressViewReducer';
-import { updateInvoicingCustomerDetail } from '../editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewReducer';
-import { initializeInvoicingCustomerAddress } from './editInvoicingCustomerDetailViewReducer';
+import { newAddressInLocalStore, removeNewAddressDataInLocalStore, } from '../../addressView/addressViewReducer';
+import { claimInvoicingCustomerBillingAddress, fetchInvoicingCustomerDetail, fetchInvoicingCustomerDetailPage, initializeInvoicingCustomerAddress, updateInvoicingCustomerDetail, } from './editInvoicingCustomerDetailViewReducer';
 import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE } from './invoicingCustomerFormConfig';
 /**
- * Seed the shared Address screen with an existing customer's saved billing
- * address (looked up in the address entity store by `billingAddressId`). Runs
- * both when the customer detail loads and on an explicit initialize trigger.
- * Skips when an in-progress draft already exists, so an address the user just
- * entered survives navigating between the form and the Address screen. Mirrors
- * `initializeVendorAddressEpic`.
+ * Seed the shared Address screen with the customer's saved billing address, and
+ * record that the slot is this customer's. Runs when a detail request is issued
+ * (every path that loads a record issues one — the detail page when not cached,
+ * the create/edit form always), when the page opens, when the detail load
+ * lands, and on an explicit initialize trigger.
+ *
+ * The address store slot is keyed by address type alone, so it can still hold
+ * another customer's draft. Only a draft this customer owns is left alone —
+ * that is what lets an address the user just entered survive a trip to the
+ * Address screen. Anything else is replaced by this customer's saved address,
+ * or cleared when it has none. Opening the page counts as a trigger because a
+ * record already loaded this session issues no detail request at all.
  */
 export const initializeInvoicingCustomerAddressEpic = (actions$, state$) => actions$.pipe(filter((action) => initializeInvoicingCustomerAddress.match(action) ||
-    updateInvoicingCustomerDetail.match(action)), mergeMap((action) => {
+    updateInvoicingCustomerDetail.match(action) ||
+    fetchInvoicingCustomerDetailPage.match(action) ||
+    fetchInvoicingCustomerDetail.match(action)), mergeMap((action) => {
     const { id } = action.payload;
+    if (id == null) {
+        return EMPTY;
+    }
     const rootState = state$.value;
-    const existingDraft = rootState.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE]?.addressToCreate;
-    if (existingDraft != null || id == null) {
+    const pending = rootState.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE]?.addressToCreate;
+    const ownerId = rootState.editInvoicingCustomerDetailViewState.billingAddressOwnerId;
+    // A detail response speaks for the record it loaded, which may no longer
+    // be the one on screen: its request keeps running when the user moves on
+    // to a cached record, which issues no request of its own to cancel it.
+    // Only the page-open and explicit triggers define the current record.
+    if (updateInvoicingCustomerDetail.match(action) &&
+        ownerId != null &&
+        ownerId !== id) {
+        return EMPTY;
+    }
+    if (pending != null && ownerId === id) {
         return EMPTY;
     }
     const customer = getInvoicingCustomerById(rootState.invoicingCustomerState, id);
     const address = customer?.billingAddressId != null
         ? getAddressByAddressId(rootState.addressState, customer.billingAddressId)
         : undefined;
-    return address != null
-        ? of(newAddressInLocalStore({
+    const actions = [];
+    if (address != null) {
+        actions.push(newAddressInLocalStore({
             addressType: INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE,
             addressToCreate: address,
-        }))
-        : EMPTY;
+        }));
+    }
+    else if (pending != null) {
+        actions.push(removeNewAddressDataInLocalStore(INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE));
+    }
+    actions.push(claimInvoicingCustomerBillingAddress({ id }));
+    return from(actions);
 }));

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

@@ -16,7 +16,7 @@ export const saveInvoicingCustomerEpic = (actions$, state$, zeniAPI) => actions$
     const rootState = state$.value;
     const viewState = rootState.editInvoicingCustomerDetailViewState;
     const localData = (id != null
-        ? viewState.editDraftById[id]
+        ? viewState.editDraftById[id]?.localData
         : viewState.newCustomerDraft) ?? viewState.newCustomerDraft;
     // Billing address captured via the shared Address screen is sent as an
     // object in the payload; the backend creates it and returns its id

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

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

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

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -7,6 +8,7 @@ export const initialState = {
     editDraftById: {},
     actionStateById: {},
     recordStateById: {},
+    shippingAddressOwnerId: undefined,
     newSubscriptionDraft: { ...initialInvoicingSubscriptionFormLocalData },
     savedSubscriptionId: undefined,
     hasValidState() {
@@ -65,15 +67,12 @@ const editInvoicingSubscriptionDetailView = createSlice({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            applyInvoicingFormDraftFailure(draft.editDraftById, action.payload.id, initialInvoicingSubscriptionFormLocalData);
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingSubscriptionFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            applyInvoicingFormDraftSeed(draft.editDraftById, id, localData);
         },
         fetchInvoicingSubscriptionFormPage: {
             reducer() {
@@ -87,7 +86,7 @@ const editInvoicingSubscriptionDetailView = createSlice({
         updateInvoicingSubscriptionFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                applyInvoicingFormDraftEdit(draft.editDraftById, id, localData);
             }
             else {
                 draft.newSubscriptionDraft = localData;
@@ -107,19 +106,32 @@ const editInvoicingSubscriptionDetailView = createSlice({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedSubscriptionId = action.payload.subscriptionId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            applyInvoicingFormDraftSaved(draft.editDraftById, action.payload.subscriptionId);
         },
         submitInvoicingSubscriptionFormFailure(draft, action) {
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
-        resetEditInvoicingSubscriptionDetailView(draft) {
+        /**
+         * Discard a form's draft — the subscription's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * subscription's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingSubscriptionDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedSubscriptionId = undefined;
-            draft.editDraftById = {};
-            draft.newSubscriptionDraft = {
-                ...initialInvoicingSubscriptionFormLocalData,
-            };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newSubscriptionDraft = {
+                    ...initialInvoicingSubscriptionFormLocalData,
+                };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingSubscriptionAddressEpic.
         initializeInvoicingSubscriptionAddress: {
@@ -128,6 +140,10 @@ const editInvoicingSubscriptionDetailView = createSlice({
                 return { payload };
             },
         },
+        /** Record which subscription the shared shipping-address slot now belongs to. */
+        claimInvoicingSubscriptionShippingAddress(draft, action) {
+            draft.shippingAddressOwnerId = action.payload.id;
+        },
         // Trigger only — handled by syncInvoicingSubscriptionCouponsEpic.
         syncInvoicingSubscriptionCoupons: {
             reducer() { },
@@ -142,5 +158,5 @@ const editInvoicingSubscriptionDetailView = createSlice({
         });
     },
 });
-export const { runInvoicingSubscriptionAction, runInvoicingSubscriptionActionFailure, runInvoicingSubscriptionActionSuccess, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, updateInvoicingSubscriptionDetailFailure, updateInvoicingSubscriptionFormDraft, submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormSuccess, submitInvoicingSubscriptionFormFailure, resetEditInvoicingSubscriptionDetailView, initializeInvoicingSubscriptionAddress, syncInvoicingSubscriptionCoupons, } = editInvoicingSubscriptionDetailView.actions;
+export const { runInvoicingSubscriptionAction, runInvoicingSubscriptionActionFailure, runInvoicingSubscriptionActionSuccess, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, updateInvoicingSubscriptionDetailFailure, updateInvoicingSubscriptionFormDraft, submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormSuccess, submitInvoicingSubscriptionFormFailure, resetEditInvoicingSubscriptionDetailView, initializeInvoicingSubscriptionAddress, claimInvoicingSubscriptionShippingAddress, syncInvoicingSubscriptionCoupons, } = editInvoicingSubscriptionDetailView.actions;
 export default editInvoicingSubscriptionDetailView.reducer;