@zeniai/client-epic-state 5.2.50 → 5.2.51

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingSubscriptionFormView = 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");
@@ -28,6 +29,37 @@ 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 ?? ''));
+};
 const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
     const { editDraftById, error, fetchState, newSubscriptionDraft, savedSubscriptionId, } = state.editInvoicingSubscriptionDetailViewState;
     const mode = invoicingSubscriptionID != null ? 'edit' : 'create';
@@ -47,6 +79,7 @@ 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);
@@ -79,6 +112,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
         products: addonAndChargePrices,
         savedSubscriptionId,
         shippingAddressLabel,
+        hasUnsavedShippingAddress,
         subscription,
         fetchState,
         error,

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

@@ -47,4 +47,10 @@ export interface EditInvoicingSubscriptionDetailViewState extends FetchedState {
     /** 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/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/invoicingFormDraft.d.ts

@@ -8,7 +8,9 @@ import { FetchState, ID } from '../../commonStateTypes/common';
  * whole state back on every change, so a change made before the record landed
  * leaves a draft that looks seeded but holds nothing.
  *
- * `Not-Started` — written by the form, never filled from a record.
+ * `Not-Started` — not (or no longer) the loaded record's values: written by the
+ *                 form before the record landed, or just saved and awaiting the
+ *                 refetch that follows. A successful load replaces it.
  * `Completed`   — filled from the loaded record; the form may have edited it since.
  * `Error`       — the record's fetch failed, so the form starts blank and a
  *                 later successful fetch is still allowed to seed it.
@@ -41,6 +43,13 @@ export declare function applyInvoicingFormDraftSeed<TLocalData>(draftById: Invoi
  * counting as still loading, and a later successful fetch can still seed it.
  */
 export declare function applyInvoicingFormDraftFailure<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID, blankLocalData: TLocalData): void;
+/**
+ * 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 declare function applyInvoicingFormDraftSaved<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID): void;
 /** The draft's values, or the blank form when nothing is drafted yet. */
 export declare function getInvoicingFormDraftLocalData<TLocalData>(draftById: InvoicingFormDraftById<TLocalData>, id: ID | undefined, blankLocalData: TLocalData): TLocalData;
 /**

package/lib/view/invoicing/invoicingFormDraft.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyInvoicingFormDraftEdit = applyInvoicingFormDraftEdit;
 exports.applyInvoicingFormDraftSeed = applyInvoicingFormDraftSeed;
 exports.applyInvoicingFormDraftFailure = applyInvoicingFormDraftFailure;
+exports.applyInvoicingFormDraftSaved = applyInvoicingFormDraftSaved;
 exports.getInvoicingFormDraftLocalData = getInvoicingFormDraftLocalData;
 exports.isInvoicingFormDraftPending = isInvoicingFormDraftPending;
 /**
@@ -48,6 +49,19 @@ 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.
+ */
+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. */
 function getInvoicingFormDraftLocalData(draftById, id, blankLocalData) {
     if (id == null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.50",
+  "version": "5.2.51",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",