@zeniai/client-epic-state 5.3.22 → 5.3.23

package/lib/esm/view/invoicing/createInvoice/createInvoiceSelector.js

@@ -3,7 +3,7 @@ import { getAddressByAddressId } from '../../../entity/address/addressSelector';
 import { invoicingPricePointDisplayAmount } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { invoicingFieldHelpForGroup } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { getInvoicingAllCustomers } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
+import { getInvoicingAllCustomers, isInvoicingAllCustomersLoading, } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
 import { getInvoicingSettings } from '../settingsView/settingsViewSelector';
 /**
  * Pricing models whose single-unit amount is a true per-unit rate — the only
@@ -89,6 +89,7 @@ export const getCreateInvoiceFormView = (state) => {
             id: customer.id,
             name: customerDisplayName(customer),
         })),
+        isCustomerListLoading: isInvoicingAllCustomersLoading(state),
         localData: createInvoiceState.formDraft,
         planNames: getCreateInvoicePlanNames(state),
         products: getInvoicingCatalogPrices(catalogListView.products),

package/lib/esm/view/invoicing/createInvoice/epics/fetchCreateInvoiceFormPageEpic.js

@@ -24,13 +24,20 @@ const PICKER_PRODUCT_FILTERS = { type: 'addon|charge' };
 export const fetchCreateInvoiceFormPageEpic = (actions$, state$) => actions$.pipe(filter(fetchCreateInvoiceFormPage.match), mergeMap((action) => {
     const { cacheOverride } = action.payload;
     const state = state$.value;
-    // The customer picker reads the unfiltered `all` cache.
-    const customerTab = getInvoicingListTab(state.invoicingCustomerListViewState.byTab, INVOICING_LIST_ALL_TAB);
+    // The customer picker filters the unfiltered `all` cache client-side.
+    const customerListState = state.invoicingCustomerListViewState;
+    const customerTab = getInvoicingListTab(customerListState.byTab, INVOICING_LIST_ALL_TAB);
     const catalogState = state.invoicingCatalogListViewState;
     const settingsState = state.invoicingSettingsViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: customerTab.fetchState, error: customerTab.error }, cacheOverride)) {
+    if (shouldFetchFullInvoicingList({
+        fetchState: customerTab.fetchState,
+        filters: customerListState.filters,
+        nextCursor: customerTab.nextCursor,
+        sort: customerListState.sort,
+    }, {}, cacheOverride)) {
         pageActions.push(fetchInvoicingCustomerList({
+            fetchAll: true,
             filters: {},
             keepExistingListItems: false,
             tabId: INVOICING_LIST_ALL_TAB,

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

@@ -5,7 +5,7 @@ import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
-import { getInvoicingAllCustomers } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
+import { getInvoicingAllCustomers, isInvoicingAllCustomersLoading, } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
 import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData, invoicingPriceHasQuantity, } from './invoicingSubscriptionFormConfig';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
@@ -283,6 +283,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
         charges: catalogItemOptionsOfType('charge'),
         coupons: getInvoicingCouponListItems(state).map(toInvoicingCouponOption),
         customers: getInvoicingAllCustomers(state).map(toInvoicingCustomerOption),
+        isCustomerListLoading: isInvoicingAllCustomersLoading(state),
         localData,
         mode,
         plans: planPrices.map(toInvoicingPlanOption),

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

@@ -3,6 +3,7 @@ import { filter, mergeMap } from 'rxjs/operators';
 import { fetchInvoicingCouponList } from '../couponView/couponViewReducer';
 import { fetchInvoicingCatalogPlanList } from '../invoicingCatalogListView/invoicingCatalogListViewReducer';
 import { fetchInvoicingCustomerList } from '../invoicingCustomerListView/invoicingCustomerListViewReducer';
+import { INVOICING_LIST_ALL_TAB } from '../invoicingListTabCache';
 import { fetchInvoicingSubscriptionDetail } from './editInvoicingSubscriptionDetailViewReducer';
 import { fetchInvoicingSubscriptionFormPage } from './editInvoicingSubscriptionDetailViewReducer';
 /**
@@ -15,7 +16,13 @@ import { fetchInvoicingSubscriptionFormPage } from './editInvoicingSubscriptionD
 export const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pipe(filter(fetchInvoicingSubscriptionFormPage.match), mergeMap((action) => {
     const { subscriptionId } = action.payload;
     const pageActions = [
-        fetchInvoicingCustomerList({ filters: {}, keepExistingListItems: false }),
+        // The customer picker filters the unfiltered `all` cache client-side.
+        fetchInvoicingCustomerList({
+            fetchAll: true,
+            filters: {},
+            keepExistingListItems: false,
+            tabId: INVOICING_LIST_ALL_TAB,
+        }),
         // 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.

package/lib/esm/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListEpic.js

@@ -30,21 +30,33 @@ export const fetchInvoicingCustomerListEpic = (actions$, state$, zeniAPI) => act
 // Per tab: a newer fetch of the same tab replaces its in-flight one, while
 // another tab's request keeps running and lands in its own cache.
 groupBy(({ tabId }) => tabId), mergeMap((tabFetches$) => tabFetches$.pipe(switchMap(({ action, tabId }) => {
-    const { filters, cursor, keepExistingListItems, sort } = action.payload;
+    const { filters, cursor, fetchAll, keepExistingListItems, sort } = action.payload;
     const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
-            return [
+            const nextCursor = response.data?.next_cursor ?? null;
+            const pageActions = [
                 updateInvoicingCustomers(items, 'merge'),
                 updateAddresses(extractInvoicingCustomerAddresses(items)),
                 updateInvoicingCustomerList({
                     ids: items.map((item) => item.id),
-                    nextCursor: response.data?.next_cursor ?? null,
+                    nextCursor,
                     keepExistingListItems,
                     tabId,
                 }),
             ];
+            if (fetchAll && nextCursor != null && nextCursor !== cursor) {
+                pageActions.push(fetchInvoicingCustomerList({
+                    cursor: nextCursor,
+                    fetchAll,
+                    filters,
+                    keepExistingListItems: true,
+                    sort,
+                    tabId,
+                }));
+            }
+            return pageActions;
         }
         return of(updateInvoicingCustomerListFailure({
             status: response.status,

package/lib/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.js

@@ -24,6 +24,7 @@ const invoicingCustomerListView = createSlice({
                     payload: {
                         filters: payload.filters ?? {},
                         cursor: payload.cursor,
+                        fetchAll: payload.fetchAll ?? false,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
                         tabId: payload.tabId,

package/lib/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -41,3 +41,5 @@ export const getInvoicingCustomerListView = createSelector((state) => state.invo
  * view so they never narrow to whichever tab the customers list was left on.
  */
 export const getInvoicingAllCustomers = (state) => getInvoicingCustomersByIds(state.invoicingCustomerState, getInvoicingListTab(state.invoicingCustomerListViewState.byTab, INVOICING_LIST_ALL_TAB).ids);
+/** True while the pickers' customer list is still loading pages. */
+export const isInvoicingAllCustomersLoading = (state) => getInvoicingListTab(state.invoicingCustomerListViewState.byTab, INVOICING_LIST_ALL_TAB).fetchState === 'In-Progress';

package/lib/view/invoicing/createInvoice/createInvoiceSelector.d.ts

@@ -37,6 +37,8 @@ export interface CreateInvoiceFormView extends SelectorView {
      * Folded in here so the screen never reaches for the config view itself.
      */
     fieldHelp: InvoicingFieldHelpByCode;
+    /** More customer pages are still on their way; `customers` is partial. */
+    isCustomerListLoading: boolean;
     localData: InvoicingCreateInvoiceFormLocalData;
     planNames: InvoicingPlanNameOption[];
     products: InvoicingCatalogPricePoint[];

package/lib/view/invoicing/createInvoice/createInvoiceSelector.js

@@ -92,6 +92,7 @@ const getCreateInvoiceFormView = (state) => {
             id: customer.id,
             name: customerDisplayName(customer),
         })),
+        isCustomerListLoading: (0, invoicingCustomerListViewSelector_1.isInvoicingAllCustomersLoading)(state),
         localData: createInvoiceState.formDraft,
         planNames: getCreateInvoicePlanNames(state),
         products: (0, invoicingCatalogListViewSelector_1.getInvoicingCatalogPrices)(catalogListView.products),

package/lib/view/invoicing/createInvoice/epics/fetchCreateInvoiceFormPageEpic.js

@@ -27,13 +27,20 @@ const PICKER_PRODUCT_FILTERS = { type: 'addon|charge' };
 const fetchCreateInvoiceFormPageEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(createInvoiceReducer_1.fetchCreateInvoiceFormPage.match), (0, operators_1.mergeMap)((action) => {
     const { cacheOverride } = action.payload;
     const state = state$.value;
-    // The customer picker reads the unfiltered `all` cache.
-    const customerTab = (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCustomerListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB);
+    // The customer picker filters the unfiltered `all` cache client-side.
+    const customerListState = state.invoicingCustomerListViewState;
+    const customerTab = (0, invoicingListTabCache_1.getInvoicingListTab)(customerListState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB);
     const catalogState = state.invoicingCatalogListViewState;
     const settingsState = state.invoicingSettingsViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: customerTab.fetchState, error: customerTab.error }, cacheOverride)) {
+    if ((0, invoicingListTabCache_1.shouldFetchFullInvoicingList)({
+        fetchState: customerTab.fetchState,
+        filters: customerListState.filters,
+        nextCursor: customerTab.nextCursor,
+        sort: customerListState.sort,
+    }, {}, cacheOverride)) {
         pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({
+            fetchAll: true,
             filters: {},
             keepExistingListItems: false,
             tabId: invoicingListTabCache_1.INVOICING_LIST_ALL_TAB,

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

@@ -63,6 +63,8 @@ export interface InvoicingSubscriptionFormView extends SelectorView {
     /** The review dialog's cost estimate for saving this draft. */
     estimate: InvoicingSubscriptionEstimateView;
     fieldHelp: InvoicingFieldHelpByCode;
+    /** More customer pages are still on their way; `customers` is partial. */
+    isCustomerListLoading: boolean;
     /**
      * 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

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

@@ -290,6 +290,7 @@ const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
         charges: catalogItemOptionsOfType('charge'),
         coupons: (0, couponViewSelector_1.getInvoicingCouponListItems)(state).map(toInvoicingCouponOption),
         customers: (0, invoicingCustomerListViewSelector_1.getInvoicingAllCustomers)(state).map(toInvoicingCustomerOption),
+        isCustomerListLoading: (0, invoicingCustomerListViewSelector_1.isInvoicingAllCustomersLoading)(state),
         localData,
         mode,
         plans: planPrices.map(toInvoicingPlanOption),

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

@@ -6,6 +6,7 @@ const operators_1 = require("rxjs/operators");
 const couponViewReducer_1 = require("../couponView/couponViewReducer");
 const invoicingCatalogListViewReducer_1 = require("../invoicingCatalogListView/invoicingCatalogListViewReducer");
 const invoicingCustomerListViewReducer_1 = require("../invoicingCustomerListView/invoicingCustomerListViewReducer");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSubscriptionDetailViewReducer");
 const editInvoicingSubscriptionDetailViewReducer_2 = require("./editInvoicingSubscriptionDetailViewReducer");
 /**
@@ -18,7 +19,13 @@ const editInvoicingSubscriptionDetailViewReducer_2 = require("./editInvoicingSub
 const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pipe((0, operators_1.filter)(editInvoicingSubscriptionDetailViewReducer_2.fetchInvoicingSubscriptionFormPage.match), (0, operators_1.mergeMap)((action) => {
     const { subscriptionId } = action.payload;
     const pageActions = [
-        (0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({ filters: {}, keepExistingListItems: false }),
+        // The customer picker filters the unfiltered `all` cache client-side.
+        (0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({
+            fetchAll: true,
+            filters: {},
+            keepExistingListItems: false,
+            tabId: invoicingListTabCache_1.INVOICING_LIST_ALL_TAB,
+        }),
         // 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.

package/lib/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListEpic.js

@@ -33,21 +33,33 @@ const fetchInvoicingCustomerListEpic = (actions$, state$, zeniAPI) => actions$.p
 // Per tab: a newer fetch of the same tab replaces its in-flight one, while
 // another tab's request keeps running and lands in its own cache.
 (0, operators_1.groupBy)(({ tabId }) => tabId), (0, operators_1.mergeMap)((tabFetches$) => tabFetches$.pipe((0, operators_1.switchMap)(({ action, tabId }) => {
-    const { filters, cursor, keepExistingListItems, sort } = action.payload;
+    const { filters, cursor, fetchAll, keepExistingListItems, sort } = action.payload;
     const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/customers`, buildQuery(filters, cursor, sort, (0, invoicingListTabCache_1.invoicingListStatusParam)(tabId)));
     return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];
-            return [
+            const nextCursor = response.data?.next_cursor ?? null;
+            const pageActions = [
                 (0, invoicingCustomerReducer_1.updateInvoicingCustomers)(items, 'merge'),
                 (0, addressReducer_1.updateAddresses)((0, invoicingCustomerPayload_1.extractInvoicingCustomerAddresses)(items)),
                 (0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerList)({
                     ids: items.map((item) => item.id),
-                    nextCursor: response.data?.next_cursor ?? null,
+                    nextCursor,
                     keepExistingListItems,
                     tabId,
                 }),
             ];
+            if (fetchAll && nextCursor != null && nextCursor !== cursor) {
+                pageActions.push((0, invoicingCustomerListViewReducer_1.fetchInvoicingCustomerList)({
+                    cursor: nextCursor,
+                    fetchAll,
+                    filters,
+                    keepExistingListItems: true,
+                    sort,
+                    tabId,
+                }));
+            }
+            return pageActions;
         }
         return (0, rxjs_1.of)((0, invoicingCustomerListViewReducer_1.updateInvoicingCustomerListFailure)({
             status: response.status,

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.d.ts

@@ -6,6 +6,8 @@ import { InvoicingCustomerFilters, InvoicingCustomerListViewState } from './invo
 export declare const initialState: InvoicingCustomerListViewState;
 export declare const fetchInvoicingCustomerList: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cursor?: string;
+    /** Keep requesting the next page until the list is complete. */
+    fetchAll?: boolean;
     filters?: InvoicingCustomerFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
@@ -14,6 +16,7 @@ export declare const fetchInvoicingCustomerList: import("@reduxjs/toolkit").Acti
 }], {
     filters: InvoicingCustomerFilters;
     cursor: string | undefined;
+    fetchAll: boolean;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
     tabId: string | undefined;

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.js

@@ -28,6 +28,7 @@ const invoicingCustomerListView = (0, toolkit_1.createSlice)({
                     payload: {
                         filters: payload.filters ?? {},
                         cursor: payload.cursor,
+                        fetchAll: payload.fetchAll ?? false,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
                         tabId: payload.tabId,

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.d.ts

@@ -30,3 +30,5 @@ export declare const getInvoicingCustomerListView: (state: RootState) => Invoici
  * view so they never narrow to whichever tab the customers list was left on.
  */
 export declare const getInvoicingAllCustomers: (state: RootState) => InvoicingCustomer[];
+/** True while the pickers' customer list is still loading pages. */
+export declare const isInvoicingAllCustomersLoading: (state: RootState) => boolean;

package/lib/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInvoicingAllCustomers = exports.getInvoicingCustomerListView = void 0;
+exports.isInvoicingAllCustomersLoading = exports.getInvoicingAllCustomers = exports.getInvoicingCustomerListView = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const invoicingCustomerSelector_1 = require("../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector");
 const invoicingListTabCache_1 = require("../invoicingListTabCache");
@@ -45,3 +45,6 @@ exports.getInvoicingCustomerListView = (0, toolkit_1.createSelector)((state) =>
  */
 const getInvoicingAllCustomers = (state) => (0, invoicingCustomerSelector_1.getInvoicingCustomersByIds)(state.invoicingCustomerState, (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCustomerListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB).ids);
 exports.getInvoicingAllCustomers = getInvoicingAllCustomers;
+/** True while the pickers' customer list is still loading pages. */
+const isInvoicingAllCustomersLoading = (state) => (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingCustomerListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB).fetchState === 'In-Progress';
+exports.isInvoicingAllCustomersLoading = isInvoicingAllCustomersLoading;

package/package.json

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