@zeniai/client-epic-state 5.2.50 → 5.2.51

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

@@ -130,26 +130,50 @@ export const localDataToSaveInvoicingCatalogItemPayload = (localData, isCreate,
     const subFamilies = localData.subFamilies.length > 0
         ? localData.subFamilies
         : [blankInvoicingCatalogSubFamily()];
-    itemPayload.sub_families = isCreate
-        ? subFamilies.map((subFamily) => buildSubFamilyPayload(localData, subFamily, false, lookup))
-        : subFamilies.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;
-            // A price point added on this form has no id yet, and travels with a
-            // blank one. The update endpoint reads that as "create this one", so it
-            // lands in the same request as the edits around it rather than a second
-            // call that could fail on its own.
-            return { ...detail, id: subFamily.id.trim() };
-        });
+    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,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCatalogItemFormLocalData } from './invoicingCatalogItemFormHelper';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -43,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';

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;
@@ -81,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

@@ -23,9 +23,13 @@ export const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actio
     // 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) &&
-        state.editInvoicingCatalogItemDetailViewState.recordStateById[id]
-            ?.fetchState !== 'Completed') {
+        (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

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

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCouponFormLocalData, } from './editInvoicingCouponDetailViewState';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -51,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';

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

@@ -23,9 +23,13 @@ export const seedInvoicingCouponFormDraftEpic = (actions$, state$) => actions$.p
     // 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) &&
-        state.editInvoicingCouponDetailViewState.recordStateById[id]
-            ?.fetchState !== 'Completed') {
+        (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

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

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingCustomerFormLocalData } from './invoicingCustomerFormConfig';
 export const initialState = {
     emailPreviewFetchState: { fetchState: 'Not-Started', error: undefined },
@@ -8,6 +8,7 @@ export const initialState = {
     emailPreviewCustomerId: undefined,
     promotionalCreditSubmitState: { fetchState: 'Not-Started', error: undefined },
     recordStateById: {},
+    billingAddressOwnerId: undefined,
     fetchState: 'Not-Started',
     error: undefined,
     editDraftById: {},
@@ -154,6 +155,9 @@ 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';
@@ -183,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) => {
@@ -190,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,4 +1,5 @@
 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';
@@ -50,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';
@@ -101,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/seedInvoicingCustomerFormDraftEpic.js

@@ -23,9 +23,13 @@ export const seedInvoicingCustomerFormDraftEpic = (actions$, state$) => actions$
     // 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) &&
-        state.editInvoicingCustomerDetailViewState.recordStateById[id]
-            ?.fetchState !== 'Completed') {
+        (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

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

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
+import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 export const initialState = {
     fetchState: 'Not-Started',
@@ -8,6 +8,7 @@ export const initialState = {
     editDraftById: {},
     actionStateById: {},
     recordStateById: {},
+    shippingAddressOwnerId: undefined,
     newSubscriptionDraft: { ...initialInvoicingSubscriptionFormLocalData },
     savedSubscriptionId: undefined,
     hasValidState() {
@@ -105,6 +106,9 @@ 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';
@@ -136,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() { },
@@ -150,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;

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

@@ -1,4 +1,5 @@
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
+import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { getInvoicingSubscriptionById } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
 import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
@@ -24,6 +25,37 @@ export const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubs
         version: 1.0,
     };
 };
+/**
+ * Whether the shipping address entered on the Address screen is a change the
+ * subscription 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 isShippingAddressUnsaved = (state, id, savedShippingAddressId) => {
+    // The slot is keyed by address type alone; only a draft this subscription owns counts.
+    if (id == null ||
+        state.editInvoicingSubscriptionDetailViewState.shippingAddressOwnerId !== id) {
+        return false;
+    }
+    const pending = state.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
+    if (pending == null) {
+        return false;
+    }
+    const saved = savedShippingAddressId != null
+        ? getAddressByAddressId(state.addressState, savedShippingAddressId)
+        : 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 getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     const { editDraftById, error, fetchState, newSubscriptionDraft, savedSubscriptionId, } = state.editInvoicingSubscriptionDetailViewState;
     const mode = invoicingSubscriptionID != null ? 'edit' : 'create';
@@ -43,6 +75,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
     const shippingAddressLabel = newAddress?.addressToCreate != null
         ? getFormattedAddress(newAddress.addressToCreate)
         : undefined;
+    const hasUnsavedShippingAddress = isShippingAddressUnsaved(state, invoicingSubscriptionID, subscription?.shippingAddressId);
     const catalogListView = getInvoicingCatalogListView(state);
     const planPrices = getInvoicingCatalogPrices(catalogListView.plans);
     const addonAndChargePrices = getInvoicingCatalogPrices(catalogListView.products);
@@ -75,6 +108,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
         products: addonAndChargePrices,
         savedSubscriptionId,
         shippingAddressLabel,
+        hasUnsavedShippingAddress,
         subscription,
         fetchState,
         error,

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

@@ -1,36 +1,62 @@
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { getInvoicingSubscriptionById } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
-import { newAddressInLocalStore } from '../../addressView/addressViewReducer';
-import { updateInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
-import { initializeInvoicingSubscriptionAddress } from './editInvoicingSubscriptionDetailViewReducer';
+import { newAddressInLocalStore, removeNewAddressDataInLocalStore, } from '../../addressView/addressViewReducer';
+import { claimInvoicingSubscriptionShippingAddress, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, initializeInvoicingSubscriptionAddress, updateInvoicingSubscriptionDetail, } from './editInvoicingSubscriptionDetailViewReducer';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
 /**
- * Seed the shared Address screen with an existing subscription's saved shipping
- * address (looked up in the shared address store by `shippingAddressId`, same as
- * the customer billing-address flow).
- * Runs both when the subscription 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 `initializeInvoicingCustomerAddressEpic`.
+ * Seed the shared Address screen with the subscription's saved shipping address, and
+ * record that the slot is this subscription'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 subscription's draft. Only a draft this subscription 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 subscription'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 initializeInvoicingSubscriptionAddressEpic = (actions$, state$) => actions$.pipe(filter((action) => initializeInvoicingSubscriptionAddress.match(action) ||
-    updateInvoicingSubscriptionDetail.match(action)), mergeMap((action) => {
+    updateInvoicingSubscriptionDetail.match(action) ||
+    fetchInvoicingSubscriptionDetailPage.match(action) ||
+    fetchInvoicingSubscriptionDetail.match(action)), mergeMap((action) => {
     const { id } = action.payload;
+    if (id == null) {
+        return EMPTY;
+    }
     const rootState = state$.value;
-    const existingDraft = rootState.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
-    if (existingDraft != null || id == null) {
+    const pending = rootState.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
+    const ownerId = rootState.editInvoicingSubscriptionDetailViewState
+        .shippingAddressOwnerId;
+    // 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 (updateInvoicingSubscriptionDetail.match(action) &&
+        ownerId != null &&
+        ownerId !== id) {
+        return EMPTY;
+    }
+    if (pending != null && ownerId === id) {
         return EMPTY;
     }
     const subscription = getInvoicingSubscriptionById(rootState.invoicingSubscriptionState, id);
     const address = subscription?.shippingAddressId != null
         ? getAddressByAddressId(rootState.addressState, subscription.shippingAddressId)
         : undefined;
-    return address != null
-        ? of(newAddressInLocalStore({
+    const actions = [];
+    if (address != null) {
+        actions.push(newAddressInLocalStore({
             addressType: INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE,
             addressToCreate: address,
-        }))
-        : EMPTY;
+        }));
+    }
+    else if (pending != null) {
+        actions.push(removeNewAddressDataInLocalStore(INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE));
+    }
+    actions.push(claimInvoicingSubscriptionShippingAddress({ id }));
+    return from(actions);
 }));

package/lib/esm/view/invoicing/invoicingFormDraft.js

@@ -41,6 +41,19 @@ export function applyInvoicingFormDraftFailure(draftById, id, blankLocalData) {
     }
     existing.fetchState = 'Error';
 }
+/**
+ * The record behind this draft was just saved and is about to be refetched.
+ * Keep the values on screen — dropping them would blank the form for the round
+ * trip, and the form remounts on the response anyway — but stop counting them
+ * as the loaded record's, so that response is allowed to replace them.
+ */
+export function applyInvoicingFormDraftSaved(draftById, id) {
+    const existing = draftById[id];
+    if (existing == null) {
+        return;
+    }
+    existing.fetchState = 'Not-Started';
+}
 /** The draft's values, or the blank form when nothing is drafted yet. */
 export function getInvoicingFormDraftLocalData(draftById, id, blankLocalData) {
     if (id == null) {