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

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

@@ -1,9 +1,10 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.syncInvoicingSubscriptionCoupons = exports.initializeInvoicingSubscriptionAddress = exports.resetEditInvoicingSubscriptionDetailView = exports.submitInvoicingSubscriptionFormFailure = exports.submitInvoicingSubscriptionFormSuccess = exports.submitInvoicingSubscriptionForm = exports.updateInvoicingSubscriptionFormDraft = exports.updateInvoicingSubscriptionDetailFailure = exports.updateInvoicingSubscriptionDetail = exports.seedInvoicingSubscriptionFormDraft = exports.fetchInvoicingSubscriptionFormPage = exports.fetchInvoicingSubscriptionDetailPage = exports.fetchInvoicingSubscriptionDetail = exports.runInvoicingSubscriptionActionSuccess = exports.runInvoicingSubscriptionActionFailure = exports.runInvoicingSubscriptionAction = exports.initialState = void 0;
+exports.syncInvoicingSubscriptionCoupons = exports.claimInvoicingSubscriptionShippingAddress = exports.initializeInvoicingSubscriptionAddress = exports.resetEditInvoicingSubscriptionDetailView = exports.submitInvoicingSubscriptionFormFailure = exports.submitInvoicingSubscriptionFormSuccess = exports.submitInvoicingSubscriptionForm = exports.updateInvoicingSubscriptionFormDraft = exports.updateInvoicingSubscriptionDetailFailure = exports.updateInvoicingSubscriptionDetail = exports.seedInvoicingSubscriptionFormDraft = exports.fetchInvoicingSubscriptionFormPage = exports.fetchInvoicingSubscriptionDetailPage = exports.fetchInvoicingSubscriptionDetail = exports.runInvoicingSubscriptionActionSuccess = exports.runInvoicingSubscriptionActionFailure = exports.runInvoicingSubscriptionAction = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingSubscriptionFormConfig_1 = require("./invoicingSubscriptionFormConfig");
 exports.initialState = {
     fetchState: 'Not-Started',
@@ -11,6 +12,7 @@ exports.initialState = {
     editDraftById: {},
     actionStateById: {},
     recordStateById: {},
+    shippingAddressOwnerId: undefined,
     newSubscriptionDraft: { ...invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData },
     savedSubscriptionId: undefined,
     hasValidState() {
@@ -69,15 +71,12 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
                 fetchState: 'Error',
                 error: action.payload.error,
             };
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftFailure)(draft.editDraftById, action.payload.id, invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData);
         },
-        /**
-         * Seed the draft from the loaded record, once. Skipped when a draft already
-         * exists so a late refetch cannot overwrite in-progress edits.
-         */
+        /** Fill the draft from the loaded record — see `applyInvoicingFormDraftSeed`. */
         seedInvoicingSubscriptionFormDraft(draft, action) {
-            if (draft.editDraftById[action.payload.id] == null) {
-                draft.editDraftById[action.payload.id] = action.payload.localData;
-            }
+            const { id, localData } = action.payload;
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSeed)(draft.editDraftById, id, localData);
         },
         fetchInvoicingSubscriptionFormPage: {
             reducer() {
@@ -91,7 +90,7 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
         updateInvoicingSubscriptionFormDraft(draft, action) {
             const { id, localData } = action.payload;
             if (id != null) {
-                draft.editDraftById[id] = localData;
+                (0, invoicingFormDraft_1.applyInvoicingFormDraftEdit)(draft.editDraftById, id, localData);
             }
             else {
                 draft.newSubscriptionDraft = localData;
@@ -111,19 +110,32 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
             draft.fetchState = 'Completed';
             draft.error = undefined;
             draft.savedSubscriptionId = action.payload.subscriptionId;
+            // An edit is refetched on success; keep the saved values on screen until
+            // that lands, and let it replace them.
+            (0, invoicingFormDraft_1.applyInvoicingFormDraftSaved)(draft.editDraftById, action.payload.subscriptionId);
         },
         submitInvoicingSubscriptionFormFailure(draft, action) {
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
-        resetEditInvoicingSubscriptionDetailView(draft) {
+        /**
+         * Discard a form's draft — the subscription's own when `id` is given,
+         * the create draft otherwise. Scoped to the one form on purpose: another
+         * subscription's half-finished edit is not this form's to throw away.
+         * Clearing every draft at once is what `clearAll` is for.
+         */
+        resetEditInvoicingSubscriptionDetailView(draft, action) {
             draft.fetchState = 'Not-Started';
             draft.error = undefined;
             draft.savedSubscriptionId = undefined;
-            draft.editDraftById = {};
-            draft.newSubscriptionDraft = {
-                ...invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData,
-            };
+            const id = action.payload?.id;
+            if (id == null) {
+                draft.newSubscriptionDraft = {
+                    ...invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData,
+                };
+                return;
+            }
+            delete draft.editDraftById[id];
         },
         // Trigger only — handled by initializeInvoicingSubscriptionAddressEpic.
         initializeInvoicingSubscriptionAddress: {
@@ -132,6 +144,10 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.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() { },
@@ -146,5 +162,5 @@ const editInvoicingSubscriptionDetailView = (0, toolkit_1.createSlice)({
         });
     },
 });
-_a = editInvoicingSubscriptionDetailView.actions, exports.runInvoicingSubscriptionAction = _a.runInvoicingSubscriptionAction, exports.runInvoicingSubscriptionActionFailure = _a.runInvoicingSubscriptionActionFailure, exports.runInvoicingSubscriptionActionSuccess = _a.runInvoicingSubscriptionActionSuccess, exports.fetchInvoicingSubscriptionDetail = _a.fetchInvoicingSubscriptionDetail, exports.fetchInvoicingSubscriptionDetailPage = _a.fetchInvoicingSubscriptionDetailPage, exports.fetchInvoicingSubscriptionFormPage = _a.fetchInvoicingSubscriptionFormPage, exports.seedInvoicingSubscriptionFormDraft = _a.seedInvoicingSubscriptionFormDraft, exports.updateInvoicingSubscriptionDetail = _a.updateInvoicingSubscriptionDetail, exports.updateInvoicingSubscriptionDetailFailure = _a.updateInvoicingSubscriptionDetailFailure, exports.updateInvoicingSubscriptionFormDraft = _a.updateInvoicingSubscriptionFormDraft, exports.submitInvoicingSubscriptionForm = _a.submitInvoicingSubscriptionForm, exports.submitInvoicingSubscriptionFormSuccess = _a.submitInvoicingSubscriptionFormSuccess, exports.submitInvoicingSubscriptionFormFailure = _a.submitInvoicingSubscriptionFormFailure, exports.resetEditInvoicingSubscriptionDetailView = _a.resetEditInvoicingSubscriptionDetailView, exports.initializeInvoicingSubscriptionAddress = _a.initializeInvoicingSubscriptionAddress, exports.syncInvoicingSubscriptionCoupons = _a.syncInvoicingSubscriptionCoupons;
+_a = editInvoicingSubscriptionDetailView.actions, exports.runInvoicingSubscriptionAction = _a.runInvoicingSubscriptionAction, exports.runInvoicingSubscriptionActionFailure = _a.runInvoicingSubscriptionActionFailure, exports.runInvoicingSubscriptionActionSuccess = _a.runInvoicingSubscriptionActionSuccess, exports.fetchInvoicingSubscriptionDetail = _a.fetchInvoicingSubscriptionDetail, exports.fetchInvoicingSubscriptionDetailPage = _a.fetchInvoicingSubscriptionDetailPage, exports.fetchInvoicingSubscriptionFormPage = _a.fetchInvoicingSubscriptionFormPage, exports.seedInvoicingSubscriptionFormDraft = _a.seedInvoicingSubscriptionFormDraft, exports.updateInvoicingSubscriptionDetail = _a.updateInvoicingSubscriptionDetail, exports.updateInvoicingSubscriptionDetailFailure = _a.updateInvoicingSubscriptionDetailFailure, exports.updateInvoicingSubscriptionFormDraft = _a.updateInvoicingSubscriptionFormDraft, exports.submitInvoicingSubscriptionForm = _a.submitInvoicingSubscriptionForm, exports.submitInvoicingSubscriptionFormSuccess = _a.submitInvoicingSubscriptionFormSuccess, exports.submitInvoicingSubscriptionFormFailure = _a.submitInvoicingSubscriptionFormFailure, exports.resetEditInvoicingSubscriptionDetailView = _a.resetEditInvoicingSubscriptionDetailView, exports.initializeInvoicingSubscriptionAddress = _a.initializeInvoicingSubscriptionAddress, exports.claimInvoicingSubscriptionShippingAddress = _a.claimInvoicingSubscriptionShippingAddress, exports.syncInvoicingSubscriptionCoupons = _a.syncInvoicingSubscriptionCoupons;
 exports.default = editInvoicingSubscriptionDetailView.reducer;

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

@@ -1,8 +1,7 @@
+import { Amount } from '../../../commonStateTypes/amount';
 import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { SelectorView } from '../../../commonStateTypes/viewAndReport/viewAndReport';
-import { InvoicingCoupon } from '../../../entity/invoicing/coupon/couponState';
 import { InvoicingFieldHelpByCode, InvoicingNamedOption, InvoicingSubscriptionLifecycleActionOption } from '../../../entity/invoicing/invoicingCommonPayload';
-import { InvoicingCustomer } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerState';
 import { InvoicingSubscription } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionState';
 import { InvoicingProduct } from '../../../entity/invoicing/product/productState';
 import { RootState } from '../../../rootStateTypes';
@@ -25,22 +24,35 @@ export interface EditInvoicingSubscriptionDetailView extends SelectorView {
  * The full data the subscription form screen needs in one selector: the draft
  * `localData` (seeded from the existing subscription in edit mode until the user
  * edits), the shipping-address label (from the shared Address screen), the
- * canonical billing-frequency value set, the raw option lists (customers, plans,
- * products, coupons), and the save state. The screen maps the raw lists/values
- * to its own option shapes, so this stays free of any web-components dependency.
+ * canonical billing-frequency value set, the picker option lists (customers,
+ * plans, add-ons, charges, coupons) and the save state. The options are plain
+ * `{label, value}` records, so this stays free of any web-components
+ * dependency while leaving the screen nothing to derive.
  */
 export interface InvoicingSubscriptionFormView extends SelectorView {
     /** Lifecycle action in flight, folded in from the record view. */
     actionState: FetchStateAndError;
+    /**
+     * Picker options, built here rather than by each screen so the create form
+     * and the detail page's inline edit cannot drift. `addons` and `charges` are
+     * already narrowed to what the selected plan allows.
+     */
+    addons: InvoicingSubscriptionOption[];
     /** Cancel reasons from `/1.0/config`, so the dialog hardcodes nothing. */
     cancelReasonCodeOptions: InvoicingNamedOption[];
-    coupons: InvoicingCoupon[];
-    customers: InvoicingCustomer[];
+    charges: InvoicingSubscriptionOption[];
+    coupons: InvoicingSubscriptionOption[];
+    customers: InvoicingSubscriptionOption[];
+    fieldHelp: InvoicingFieldHelpByCode;
     /**
-     * Backend help copy for this screen's field group, keyed by field code.
-     * Folded in here so the screen never reaches for the config view itself.
+     * True while the subscription being edited is still on its way to the form.
+     * The form holds a skeleton on this rather than mount: it seeds
+     * react-hook-form once, at first render, so fields mounted against the blank
+     * draft stay blank and the first change writes that blankness back over the
+     * subscription. A later refetch does not raise this again, so a refresh
+     * leaves the form on screen instead of blanking it mid-edit.
      */
-    fieldHelp: InvoicingFieldHelpByCode;
+    isFormLoading: boolean;
     localData: InvoicingSubscriptionFormLocalData;
     mode: 'create' | 'edit';
     /**
@@ -54,16 +66,71 @@ export interface InvoicingSubscriptionFormView extends SelectorView {
      * real values.
      */
     pageFetchState: FetchStateAndError;
-    plans: InvoicingProduct[];
-    products: InvoicingProduct[];
+    plans: InvoicingSubscriptionOption[];
     recordState: FetchStateAndError;
     /** Config-owned edit/lifecycle rules, folded in so the screen reads one selector. */
     subscriptionCommercialEditAllowedFromStatuses: string[];
     subscriptionLifecycleActionOptions: InvoicingSubscriptionLifecycleActionOption[];
     subscriptionMetadataEditAllowedFromStatuses: string[];
+    /**
+     * A shipping address entered on the Address screen that the subscription has
+     * not saved yet. The inline-edit form cannot see it — the address lives in the
+     * shared address store, not in a field — so the detail page reads this to
+     * offer Save, or the address could never be linked.
+     */
+    hasUnsavedShippingAddress?: boolean;
     savedSubscriptionId?: ID;
     shippingAddressLabel?: string;
     subscription?: InvoicingSubscription;
 }
 export declare const getEditInvoicingSubscriptionDetailViewState: (state: RootState, invoicingSubscriptionID?: ID) => EditInvoicingSubscriptionDetailView;
+/**
+ * The add-ons / one-time charges a plan actually accepts.
+ *
+ * A catalog item is either `restricted` — it names the item ids it may be
+ * subscribed alongside in `applicableItems` — or unrestricted, in which case
+ * every item is fair game. Matching is on `itemID` (the catalog item the price
+ * row was flattened from), not the price code, because applicability is
+ * declared item-to-item.
+ *
+ * Fails open where the rule is unknown: no plan selected yet, a plan that is
+ * not `restricted`, or a `restricted` plan whose allow-list never came down all
+ * return the full list. The create/update endpoint rejects a disallowed item
+ * with a 422 regardless, so offering one too many costs a server error the user
+ * already gets today, where hiding one too few makes a legitimate add-on
+ * unreachable with nothing on screen to explain why.
+ *
+ * An allow-list that arrived *empty* is not unknown — a restricted item is
+ * saved with `applicable_items: []` when nothing was picked — so that narrows
+ * to nothing, as the server does.
+ *
+ * Lives here rather than in a screen so the create/edit form and the detail
+ * page's inline edit narrow their pickers by the same rule.
+ */
+export declare const getInvoicingItemsAllowedForPlan: (products: InvoicingProduct[], plan: InvoicingProduct | undefined) => InvoicingProduct[];
+/**
+ * One entry in a subscription-form picker, ready for the screen to render.
+ *
+ * `label` and `value` are the whole contract for a coupon or a customer. A
+ * catalog item adds the pieces its subtitle is built from — `productCode`,
+ * `price`, `billingPeriodUnit` — rather than a finished string, because
+ * formatting money is the UI's job: CES holds {@link Amount} as data and has
+ * no currency formatter. `subtitle` is the escape hatch for a caller that
+ * already has the line it wants.
+ *
+ * A plan carries the extra fields the form prefills from it: its paid-cycle
+ * limit, its cadence, and its trial length.
+ */
+export interface InvoicingSubscriptionOption {
+    label: string;
+    value: string;
+    billingCycles?: number;
+    billingPeriod?: number;
+    billingPeriodUnit?: string;
+    price?: Amount;
+    productCode?: string;
+    subtitle?: string;
+    trialPeriod?: number;
+    trialPeriodUnit?: string;
+}
 export declare const getInvoicingSubscriptionFormView: (state: RootState, invoicingSubscriptionID?: ID) => InvoicingSubscriptionFormView;

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

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInvoicingSubscriptionFormView = exports.getEditInvoicingSubscriptionDetailViewState = void 0;
+exports.getInvoicingSubscriptionFormView = exports.getInvoicingItemsAllowedForPlan = exports.getEditInvoicingSubscriptionDetailViewState = void 0;
 const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState");
+const addressSelector_1 = require("../../../entity/address/addressSelector");
 const invoicingSubscriptionSelector_1 = require("../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector");
 const addressViewSelector_1 = require("../../addressView/addressViewSelector");
 const couponViewSelector_1 = require("../couponView/couponViewSelector");
 const invoicingCatalogListViewSelector_1 = require("../invoicingCatalogListView/invoicingCatalogListViewSelector");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
 const invoicingCustomerListViewSelector_1 = require("../invoicingCustomerListView/invoicingCustomerListViewSelector");
+const invoicingFormDraft_1 = require("../invoicingFormDraft");
 const invoicingSubscriptionFormConfig_1 = require("./invoicingSubscriptionFormConfig");
 const invoicingSubscriptionFormConfig_2 = require("./invoicingSubscriptionFormConfig");
 const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptionID) => {
@@ -27,6 +29,130 @@ const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptio
     };
 };
 exports.getEditInvoicingSubscriptionDetailViewState = getEditInvoicingSubscriptionDetailViewState;
+/**
+ * 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?.[invoicingSubscriptionFormConfig_2.INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
+    if (pending == null) {
+        return false;
+    }
+    const saved = savedShippingAddressId != null
+        ? (0, addressSelector_1.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 ?? ''));
+};
+/**
+ * The add-ons / one-time charges a plan actually accepts.
+ *
+ * A catalog item is either `restricted` — it names the item ids it may be
+ * subscribed alongside in `applicableItems` — or unrestricted, in which case
+ * every item is fair game. Matching is on `itemID` (the catalog item the price
+ * row was flattened from), not the price code, because applicability is
+ * declared item-to-item.
+ *
+ * Fails open where the rule is unknown: no plan selected yet, a plan that is
+ * not `restricted`, or a `restricted` plan whose allow-list never came down all
+ * return the full list. The create/update endpoint rejects a disallowed item
+ * with a 422 regardless, so offering one too many costs a server error the user
+ * already gets today, where hiding one too few makes a legitimate add-on
+ * unreachable with nothing on screen to explain why.
+ *
+ * An allow-list that arrived *empty* is not unknown — a restricted item is
+ * saved with `applicable_items: []` when nothing was picked — so that narrows
+ * to nothing, as the server does.
+ *
+ * Lives here rather than in a screen so the create/edit form and the detail
+ * page's inline edit narrow their pickers by the same rule.
+ */
+const getInvoicingItemsAllowedForPlan = (products, plan) => {
+    const allowedItemIDs = plan?.applicableItems;
+    if (plan?.itemApplicability !== 'restricted' || allowedItemIDs == null) {
+        return products;
+    }
+    return products.filter((product) => product.itemID != null && allowedItemIDs.includes(product.itemID));
+};
+exports.getInvoicingItemsAllowedForPlan = getInvoicingItemsAllowedForPlan;
+/**
+ * A price row can only be subscribed by its price code, so one without a code
+ * is not an option the form can offer.
+ */
+const hasInvoicingPriceCode = (product) => product.priceCode != null && product.priceCode.trim() !== '';
+/**
+ * `displayPrice` is the service-computed single-unit amount. Tiered, volume and
+ * stairstep price points store `price` as `0` because the money lives in their
+ * tiers, so `price` is only a fallback for responses predating `displayPrice`.
+ */
+const invoicingUnitPrice = (product) => product.displayPrice ?? product.price;
+const toInvoicingPlanOption = (plan) => ({
+    billingCycles: plan.billingCycles,
+    // The price point's own cadence: the backend derives billing period from the
+    // price point and rejects a subscription that claims a different one.
+    billingPeriod: plan.period,
+    billingPeriodUnit: plan.periodUnit,
+    label: plan.name ?? plan.id,
+    price: invoicingUnitPrice(plan),
+    productCode: plan.productCode,
+    trialPeriod: plan.trialPeriod,
+    trialPeriodUnit: plan.trialPeriodUnit,
+    value: plan.priceCode,
+});
+const toInvoicingCatalogItemOption = (product) => ({
+    // A one-time charge has no cadence, so its price is quoted flat rather than
+    // per period.
+    billingPeriodUnit: product.itemType === 'charge' ? undefined : product.periodUnit,
+    label: product.name ?? product.id,
+    price: invoicingUnitPrice(product),
+    productCode: product.productCode,
+    value: product.priceCode,
+});
+const toInvoicingCouponOption = (coupon) => ({
+    label: coupon.name ?? coupon.couponCode ?? coupon.id,
+    // Create/apply/remove coupon APIs resolve by coupon_code.
+    value: coupon.couponCode ?? coupon.id,
+});
+/**
+ * Company first, then the person's name, then the email — whichever the
+ * customer actually has. The id is the last resort so a record with no
+ * identifying field at all is still selectable rather than a blank row.
+ */
+const invoicingCustomerDisplayName = (customer) => {
+    const fullName = [customer.firstName, customer.lastName]
+        .filter((part) => part != null && part.trim() !== '')
+        .join(' ')
+        .trim();
+    const company = customer.company?.trim() ?? '';
+    const email = customer.email?.trim() ?? '';
+    return company !== ''
+        ? company
+        : fullName !== ''
+            ? fullName
+            : email !== ''
+                ? email
+                : customer.id;
+};
+const toInvoicingCustomerOption = (customer) => ({
+    label: invoicingCustomerDisplayName(customer),
+    value: customer.id,
+});
 const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     const { editDraftById, error, fetchState, newSubscriptionDraft, savedSubscriptionId, } = state.editInvoicingSubscriptionDetailViewState;
     const mode = invoicingSubscriptionID != null ? 'edit' : 'create';
@@ -37,8 +163,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     // `seedInvoicingSubscriptionFormDraftEpic` when the detail load lands. Until
     // then the page is showing its skeleton.
     const localData = invoicingSubscriptionID != null
-        ? (editDraftById[invoicingSubscriptionID] ??
-            invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData)
+        ? (0, invoicingFormDraft_1.getInvoicingFormDraftLocalData)(editDraftById, invoicingSubscriptionID, invoicingSubscriptionFormConfig_1.initialInvoicingSubscriptionFormLocalData)
         : newSubscriptionDraft;
     // Shipping address is captured via the shared Address screen and seeded there
     // (looked up in the shared address store by `shippingAddressId`) on detail
@@ -47,9 +172,17 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     const shippingAddressLabel = newAddress?.addressToCreate != null
         ? (0, addressViewSelector_1.getFormattedAddress)(newAddress.addressToCreate)
         : undefined;
+    const hasUnsavedShippingAddress = isShippingAddressUnsaved(state, invoicingSubscriptionID, subscription?.shippingAddressId);
     const catalogListView = (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogListView)(state);
-    const planPrices = (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.plans);
-    const addonAndChargePrices = (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.products);
+    const planPrices = (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.plans).filter(hasInvoicingPriceCode);
+    // A restricted plan names the catalog items it may be sold with, so the
+    // pickers offer only those: subscription create rejects the rest with a 422,
+    // and an option that can only fail is not a choice. The applicability rides
+    // on the price rows already in the store, so this is a join, not a refetch.
+    const allowedCatalogPrices = (0, exports.getInvoicingItemsAllowedForPlan)((0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.products), planPrices.find((plan) => plan.priceCode === localData.planPriceCode)).filter(hasInvoicingPriceCode);
+    const catalogItemOptionsOfType = (itemType) => allowedCatalogPrices
+        .filter((product) => product.itemType === itemType)
+        .map(toInvoicingCatalogItemOption);
     // In create mode there is nothing to load, so the record state only applies
     // when editing an existing subscription.
     const recordState = invoicingSubscriptionID != null
@@ -69,15 +202,18 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
         subscriptionLifecycleActionOptions: configState.subscriptionLifecycleActionOptions,
         subscriptionMetadataEditAllowedFromStatuses: configState.subscriptionMetadataEditAllowedFromStatuses,
         recordState,
+        isFormLoading: (0, invoicingFormDraft_1.isInvoicingFormDraftPending)(editDraftById, invoicingSubscriptionID),
         fieldHelp: (0, invoicingConfigViewSelector_1.invoicingFieldHelpForGroup)(state, 'subscription'),
-        coupons: (0, couponViewSelector_1.getInvoicingCouponListItems)(state),
-        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingCustomerListView)(state).customers,
+        addons: catalogItemOptionsOfType('addon'),
+        charges: catalogItemOptionsOfType('charge'),
+        coupons: (0, couponViewSelector_1.getInvoicingCouponListItems)(state).map(toInvoicingCouponOption),
+        customers: (0, invoicingCustomerListViewSelector_1.getInvoicingCustomerListView)(state).customers.map(toInvoicingCustomerOption),
         localData,
         mode,
-        plans: planPrices,
-        products: addonAndChargePrices,
+        plans: planPrices.map(toInvoicingPlanOption),
         savedSubscriptionId,
         shippingAddressLabel,
+        hasUnsavedShippingAddress,
         subscription,
         fetchState,
         error,

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

@@ -1,5 +1,6 @@
 import { Amount } from '../../../commonStateTypes/amount';
 import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { InvoicingFormDraftById } from '../invoicingFormDraft';
 /**
  * Draft form state for the create/edit subscription form. Held in CES so the
  * form flows its data from here (mirrors the customer form / bill-pay pattern).
@@ -41,9 +42,15 @@ export interface InvoicingSubscriptionFormLocalData {
 export interface EditInvoicingSubscriptionDetailViewState extends FetchedState {
     /** Lifecycle action fetch state per subscription id. */
     actionStateById: Record<ID, FetchStateAndError>;
-    editDraftById: Record<ID, InvoicingSubscriptionFormLocalData>;
+    editDraftById: InvoicingFormDraftById<InvoicingSubscriptionFormLocalData>;
     newSubscriptionDraft: InvoicingSubscriptionFormLocalData;
     /** Detail-load state per subscription id. */
     recordStateById: Record<ID, FetchStateAndError>;
     savedSubscriptionId?: ID;
+    /**
+     * The subscription whose shipping address currently occupies the shared address
+     * store slot. That slot is keyed by address type alone, so without this a
+     * draft seeded or edited for one subscription would pass for the next one's.
+     */
+    shippingAddressOwnerId?: ID;
 }

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

@@ -19,8 +19,11 @@ const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pipe((0, o
     const { subscriptionId } = action.payload;
     const pageActions = [
         (0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({ filters: {}, keepExistingListItems: false }),
+        // Plans only: the form's plan picker is the one consumer, and an
+        // unfiltered list would replace the store's plans with every catalog
+        // item.
         (0, invoicingCatalogListViewReducer_1.fetchInvoicingCatalogPlanList)({
-            filters: {},
+            filters: { type: 'plan' },
             keepExistingListItems: false,
         }),
         (0, couponViewReducer_1.fetchInvoicingCouponList)({ filters: {}, keepExistingListItems: false }),

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

@@ -1,17 +1,21 @@
 import { ActionsObservable, StateObservable } from 'redux-observable';
 import { Observable } from 'rxjs';
 import { RootState } from '../../../rootStateTypes';
-import { newAddressInLocalStore } from '../../addressView/addressViewReducer';
-import { updateInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
-import { initializeInvoicingSubscriptionAddress } from './editInvoicingSubscriptionDetailViewReducer';
-export type ActionType = ReturnType<typeof initializeInvoicingSubscriptionAddress> | ReturnType<typeof updateInvoicingSubscriptionDetail> | ReturnType<typeof newAddressInLocalStore>;
+import { newAddressInLocalStore, removeNewAddressDataInLocalStore } from '../../addressView/addressViewReducer';
+import { claimInvoicingSubscriptionShippingAddress, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, initializeInvoicingSubscriptionAddress, updateInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
+export type ActionType = ReturnType<typeof initializeInvoicingSubscriptionAddress> | ReturnType<typeof updateInvoicingSubscriptionDetail> | ReturnType<typeof fetchInvoicingSubscriptionDetailPage> | ReturnType<typeof fetchInvoicingSubscriptionDetail> | ReturnType<typeof claimInvoicingSubscriptionShippingAddress> | ReturnType<typeof newAddressInLocalStore> | ReturnType<typeof removeNewAddressDataInLocalStore>;
 /**
- * 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 declare const initializeInvoicingSubscriptionAddressEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>) => Observable<ActionType>;

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

@@ -7,34 +7,60 @@ const addressSelector_1 = require("../../../entity/address/addressSelector");
 const invoicingSubscriptionSelector_1 = require("../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector");
 const addressViewReducer_1 = require("../../addressView/addressViewReducer");
 const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSubscriptionDetailViewReducer");
-const editInvoicingSubscriptionDetailViewReducer_2 = require("./editInvoicingSubscriptionDetailViewReducer");
 const invoicingSubscriptionFormConfig_1 = require("./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.
  */
-const initializeInvoicingSubscriptionAddressEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingSubscriptionDetailViewReducer_2.initializeInvoicingSubscriptionAddress.match(action) ||
-    editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match(action)), (0, operators_1.mergeMap)((action) => {
+const initializeInvoicingSubscriptionAddressEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)((action) => editInvoicingSubscriptionDetailViewReducer_1.initializeInvoicingSubscriptionAddress.match(action) ||
+    editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match(action) ||
+    editInvoicingSubscriptionDetailViewReducer_1.fetchInvoicingSubscriptionDetailPage.match(action) ||
+    editInvoicingSubscriptionDetailViewReducer_1.fetchInvoicingSubscriptionDetail.match(action)), (0, operators_1.mergeMap)((action) => {
     const { id } = action.payload;
+    if (id == null) {
+        return rxjs_1.EMPTY;
+    }
     const rootState = state$.value;
-    const existingDraft = rootState.addressViewState.newAddressState?.[invoicingSubscriptionFormConfig_1.INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
-    if (existingDraft != null || id == null) {
+    const pending = rootState.addressViewState.newAddressState?.[invoicingSubscriptionFormConfig_1.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 (editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionDetail.match(action) &&
+        ownerId != null &&
+        ownerId !== id) {
+        return rxjs_1.EMPTY;
+    }
+    if (pending != null && ownerId === id) {
         return rxjs_1.EMPTY;
     }
     const subscription = (0, invoicingSubscriptionSelector_1.getInvoicingSubscriptionById)(rootState.invoicingSubscriptionState, id);
     const address = subscription?.shippingAddressId != null
         ? (0, addressSelector_1.getAddressByAddressId)(rootState.addressState, subscription.shippingAddressId)
         : undefined;
-    return address != null
-        ? (0, rxjs_1.of)((0, addressViewReducer_1.newAddressInLocalStore)({
+    const actions = [];
+    if (address != null) {
+        actions.push((0, addressViewReducer_1.newAddressInLocalStore)({
             addressType: invoicingSubscriptionFormConfig_1.INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE,
             addressToCreate: address,
-        }))
-        : rxjs_1.EMPTY;
+        }));
+    }
+    else if (pending != null) {
+        actions.push((0, addressViewReducer_1.removeNewAddressDataInLocalStore)(invoicingSubscriptionFormConfig_1.INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE));
+    }
+    actions.push((0, editInvoicingSubscriptionDetailViewReducer_1.claimInvoicingSubscriptionShippingAddress)({ id }));
+    return (0, rxjs_1.from)(actions);
 }));
 exports.initializeInvoicingSubscriptionAddressEpic = initializeInvoicingSubscriptionAddressEpic;

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

@@ -20,7 +20,7 @@ const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pi
     const rootState = state$.value;
     const viewState = rootState.editInvoicingSubscriptionDetailViewState;
     const localData = (id != null
-        ? viewState.editDraftById[id]
+        ? viewState.editDraftById[id]?.localData
         : viewState.newSubscriptionDraft) ?? viewState.newSubscriptionDraft;
     // Shipping address captured via the shared Address screen is sent as an
     // object in the payload (same pattern as the customer save flow).

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

@@ -1,12 +1,16 @@
 import { ActionsObservable, StateObservable } from 'redux-observable';
 import { Observable } from 'rxjs';
 import { RootState } from '../../../rootStateTypes';
-import { seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
-export type ActionType = ReturnType<typeof updateInvoicingSubscriptionDetail> | ReturnType<typeof seedInvoicingSubscriptionFormDraft>;
+import { fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
+export type ActionType = ReturnType<typeof fetchInvoicingSubscriptionFormPage> | ReturnType<typeof updateInvoicingSubscriptionDetail> | ReturnType<typeof seedInvoicingSubscriptionFormDraft>;
 /**
- * Seeds the edit draft from the record the moment the detail fetch lands, so
- * the form has its values before it mounts. The reducer ignores the seed when a
- * draft already exists, which is what stops a background refetch from
- * overwriting edits in progress.
+ * Seeds the edit draft from the record, so the form has its values before it
+ * mounts. The reducer ignores a seed once the draft holds the record, which is
+ * what stops a background refetch from overwriting edits in progress.
+ *
+ * Opening the page counts as a trigger, not just the detail response: the page
+ * fetch is cache-guarded, so re-opening a form for a record already loaded this
+ * session issues no request at all — and a draft cleared in between (by a save
+ * or a cancel) would have nothing left to seed it.
  */
 export declare const seedInvoicingSubscriptionFormDraftEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>) => Observable<ActionType>;