@zeniai/client-epic-state 5.2.70 → 5.2.72

package/lib/esm/view/expenseAutomationView/selectors/actualMatchingViewSelector.js

@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit';
 import orderBy from 'lodash/orderBy';
 import { toMonthYearPeriodId, } from '../../../commonStateTypes/timePeriod';
 import { getActualMatchingMatchById } from '../../../entity/actualMatching/actualMatchingSelector';
@@ -5,7 +6,6 @@ import { generateJEOneTimeAccrualKey } from '../../../entity/jeSchedules/jeSched
 import { getJEOneTimeAccrualByKey, } from '../../../entity/jeSchedules/jeSchedulesSelector';
 import { getCurrentTenant } from '../../../entity/tenant/tenantSelector';
 import { date } from '../../../zeniDayJS';
-import { actualMatchingTransactionLineKey, } from '../types/actualMatchingViewState';
 export function getSelectedMonthYearForCurrentTenant(state) {
     const tenantId = getCurrentTenant(state)?.tenantId;
     if (tenantId == null) {
@@ -34,27 +34,6 @@ function toMatchModalAccrual(member) {
         jeOneTimeAccrualKey: generateJEOneTimeAccrualKey(member.accrualId),
     };
 }
-function uniqueMatchModalAccruals(pinned, searched) {
-    const byId = new Map();
-    pinned.forEach((row) => byId.set(row.accrualId, row));
-    searched.forEach((row) => {
-        if (!byId.has(row.accrualId)) {
-            byId.set(row.accrualId, row);
-        }
-    });
-    return Array.from(byId.values());
-}
-function uniqueTransactionSearchResults(pinned, searched) {
-    const byKey = new Map();
-    pinned.forEach((row) => byKey.set(actualMatchingTransactionLineKey(row.transactionType, row.transactionIntegrationId, row.lineId), row));
-    searched.forEach((row) => {
-        const key = actualMatchingTransactionLineKey(row.transactionType, row.transactionIntegrationId, row.lineId);
-        if (!byKey.has(key)) {
-            byKey.set(key, row);
-        }
-    });
-    return Array.from(byKey.values());
-}
 export function parseActualMatchingMatchId(matchId) {
     const separator = matchId.indexOf(':');
     if (separator <= 0 || separator === matchId.length - 1) {
@@ -115,13 +94,18 @@ function collectGroupedMembers(members) {
         estimatedAmount: member.estimatedAmount,
         jeDebitAccountName: member.jeDebitAccountName,
         memo: member.memo,
+        reversalTransactionId: member.reversalTransactionId,
+        reversalTransactionIntegrationId: member.reversalTransactionIntegrationId,
         serviceMonth: member.serviceMonth,
+        transactionId: member.transactionId,
+        transactionIntegrationId: member.transactionIntegrationId,
     }));
 }
 function collectLeftoverMembers(leftovers) {
     if (leftovers == null || leftovers.length === 0) {
         return undefined;
     }
+    // Leftover accruals did not post, so they have no journal-entry ids to open.
     return leftovers.map((member) => ({
         accrualId: member.accrualId,
         estimatedAmount: member.estimatedAmount,
@@ -227,6 +211,7 @@ function emptyKpiSummary() {
         actualsReceived: { count: 0, expectedCount: 0, vendorsPending: 0 },
         autoReversed: { count: 0, percent: 0, clearedAmount: 0 },
         pendingReview: { count: 0, amount: 0, estimatedMinutesToClear: 0 },
+        reversed: { count: 0 },
         variance: { percent: 0, averagePercentPerMatch: 0, netAmount: 0 },
     };
 }
@@ -282,6 +267,7 @@ export function buildActualMatchingKpiSummary(rows, displayCurrencyCode) {
     }
     const autoReversed = kpiRows.filter((row) => row.kind === 'auto_reversed');
     const pendingReview = kpiRows.filter((row) => row.kind === 'pending_review');
+    const reversed = kpiRows.filter((row) => isReversedMatchKind(row.kind));
     const receivedCount = kpiRows.length;
     const rowsWithActual = kpiRows.filter((row) => row.actualAmount?.amount != null);
     const accruedTotal = rowsWithActual.reduce((sum, row) => sum + (row.accruedAmount?.amount ?? row.estimatedAmount.amount), 0);
@@ -307,6 +293,9 @@ export function buildActualMatchingKpiSummary(rows, displayCurrencyCode) {
             amount: sumRowAmounts(pendingReview, displayCurrencyCode),
             estimatedMinutesToClear: pendingReview.length * ESTIMATED_MINUTES_PER_PENDING_MATCH,
         },
+        reversed: {
+            count: reversed.length,
+        },
         variance: {
             percent: accruedTotal === 0
                 ? 0
@@ -319,23 +308,66 @@ export function buildActualMatchingKpiSummary(rows, displayCurrencyCode) {
         },
     };
 }
-export function getExpenseAutomationActualMatchingMatchView(state, matchId) {
-    const view = state.expenseAutomationActualMatchingViewState;
+function toActualMatchingMatchView(match) {
     return {
-        match: getActualMatchingMatchById(state.actualMatchingState, matchId),
-        detailFetchState: view.detailFetchStateByMatchId[matchId] ?? NOT_STARTED,
-        refreshStatus: view.detailRefreshStatusByMatchId[matchId] ?? NOT_STARTED,
-        undoReversalStatus: view.undoReversalStatusByMatchId[matchId] ?? NOT_STARTED,
-        lastMatchResults: view.lastMatchResultsByMatchId?.[matchId],
-        lastUndoResults: view.lastUndoResultsByMatchId?.[matchId],
+        ...match,
+        members: match.members.map(toMatchModalAccrual),
+        leftovers: match.leftovers == null
+            ? undefined
+            : match.leftovers.map(toMatchModalAccrual),
     };
 }
+const matchViewSelectorById = new Map();
+export function getExpenseAutomationActualMatchingMatchView(state, matchId) {
+    let selector = matchViewSelectorById.get(matchId);
+    if (selector == null) {
+        selector = createSelector([
+            (root) => root.expenseAutomationActualMatchingViewState
+                .detailFetchStateByMatchId[matchId] ?? NOT_STARTED,
+            (root) => root.expenseAutomationActualMatchingViewState.ignoreStatusByMatchId[matchId] ?? NOT_STARTED,
+            (root) => root.expenseAutomationActualMatchingViewState
+                .lastMatchResultsByMatchId?.[matchId],
+            (root) => root.expenseAutomationActualMatchingViewState
+                .lastUndoResultsByMatchId?.[matchId],
+            (root) => root.expenseAutomationActualMatchingViewState
+                .detailRefreshStatusByMatchId[matchId] ?? NOT_STARTED,
+            (root) => root.expenseAutomationActualMatchingViewState
+                .undoReversalStatusByMatchId[matchId] ?? NOT_STARTED,
+            (root) => getActualMatchingMatchById(root.actualMatchingState, matchId),
+        ], (detailFetchState, ignoreStatus, lastMatchResults, lastUndoResults, refreshStatus, undoReversalStatus, match) => ({
+            detailFetchState,
+            ignoreStatus,
+            lastMatchResults,
+            lastUndoResults,
+            match: match == null ? undefined : toActualMatchingMatchView(match),
+            refreshStatus,
+            undoReversalStatus,
+        }));
+        matchViewSelectorById.set(matchId, selector);
+    }
+    return selector(state);
+}
 export function getCloseMatchAfterUndo(state) {
-    return state.expenseAutomationActualMatchingViewState.closeMatchAfterUndo;
+    return state.expenseAutomationActualMatchingViewState
+        .closeMatchAfterUndoMatchIds[0];
+}
+export function getCloseMatchAfterUndoMatchId(state) {
+    return getCloseMatchAfterUndo(state);
+}
+export function getCloseMatchAfterIgnoreMatchId(state) {
+    return state.expenseAutomationActualMatchingViewState
+        .closeMatchAfterIgnoreMatchIds[0];
+}
+export function getActualMatchingMatchModalConfirmStatus(state, matchId) {
+    if (matchId != null && matchId !== '') {
+        return (state.expenseAutomationActualMatchingViewState.confirmStatusByMatchId[matchId] ?? NOT_STARTED);
+    }
+    return state.expenseAutomationActualMatchingViewState.matchModal
+        .confirmStatus;
 }
 export function getExpenseAutomationActualMatchingView(state) {
     const { expenseAutomationActualMatchingViewState } = state;
-    const { matchIdsByPeriod, fetchState, error, refreshStatus, uiState, matchModal, } = expenseAutomationActualMatchingViewState;
+    const { matchIdsByPeriod, fetchState, error, refreshStatus, uiState, matchModal, ignoreStatusByMatchId, undoReversalStatusByMatchId, } = expenseAutomationActualMatchingViewState;
     const selectedPeriod = getSelectedMonthYearForCurrentTenant(state);
     const monthYearPeriodId = selectedPeriod != null ? toMonthYearPeriodId(selectedPeriod) : undefined;
     const matchIds = monthYearPeriodId != null ? matchIdsByPeriod[monthYearPeriodId] : undefined;
@@ -351,32 +383,6 @@ export function getExpenseAutomationActualMatchingView(state) {
     const searchedAccruals = matchModal.accrualSearch.results
         .map((key) => getJEOneTimeAccrualByKey(key, state.jeSchedulesState))
         .filter((accrual) => accrual != null);
-    const openedMatch = matchModal.openedFromMatchId != null
-        ? getActualMatchingMatchById(state.actualMatchingState, matchModal.openedFromMatchId)
-        : undefined;
-    const pinnedAccruals = [
-        ...(openedMatch?.members ?? []),
-        ...(openedMatch?.leftovers ?? []),
-    ].map(toMatchModalAccrual);
-    const firstMember = openedMatch?.members[0];
-    const cleared = firstMember?.cleared;
-    const suggestion = firstMember?.matchSuggestion;
-    const stamp = cleared ?? suggestion;
-    const consumedLineIds = cleared?.consumedLineIds;
-    const prefill = openedMatch == null
-        ? undefined
-        : {
-            selectedAccrualIds: [
-                ...openedMatch.members.map((member) => member.accrualId),
-                ...(openedMatch.leftovers ?? []).map((leftover) => leftover.accrualId),
-            ],
-            actualAmount: openedMatch.actualAmount.amount,
-            matchedTransactionId: stamp?.matchedTransactionId,
-            matchedLineId: cleared == null ? suggestion?.matchedLineId : undefined,
-            ...(consumedLineIds != null && consumedLineIds.length > 0
-                ? { consumedLineIds }
-                : {}),
-        };
     // `fetchState` is a flat slice field that survives a period switch. Until this
     // month's ids land, leftover Completed/Error is the previous month. Report
     // Not-Started so chrome matches Review's "cache slot missing" skeleton, not
@@ -394,16 +400,16 @@ export function getExpenseAutomationActualMatchingView(state) {
         kpiSummary,
         uiState,
         refreshStatus,
+        ignoreStatusByMatchId,
+        undoReversalStatusByMatchId,
         hasLoadedForSelectedPeriod: matchIds != null,
         matchModal: {
             isOpen: matchModal.isOpen,
-            openedFromMatchId: matchModal.openedFromMatchId,
-            prefill,
             confirmStatus: matchModal.confirmStatus,
             lastBatchResults: matchModal.lastBatchResults,
             transactionSearch: {
                 query: matchModal.transactionSearch.query,
-                results: uniqueTransactionSearchResults(matchModal.pinnedTransactionResults, matchModal.transactionSearch.results),
+                results: matchModal.transactionSearch.results,
                 fetchState: {
                     fetchState: matchModal.transactionSearch.fetchState,
                     error: matchModal.transactionSearch.error,
@@ -413,7 +419,7 @@ export function getExpenseAutomationActualMatchingView(state) {
             },
             accrualSearch: {
                 query: matchModal.accrualSearch.query,
-                results: uniqueMatchModalAccruals(pinnedAccruals, searchedAccruals),
+                results: searchedAccruals,
                 fetchState: {
                     fetchState: matchModal.accrualSearch.fetchState,
                     error: matchModal.accrualSearch.error,

package/lib/esm/view/expenseAutomationView/types/actualMatchingViewState.js

@@ -13,6 +13,12 @@ const ACTUAL_MATCHING_SORT_KEYS = [
     'variance',
 ];
 export const toActualMatchingSortKey = (v) => stringToUnion(v, ACTUAL_MATCHING_SORT_KEYS);
+const ACTUAL_MATCHING_STATUS_FILTERS = [
+    'all',
+    'pending_review',
+    'reversed',
+];
+export const toActualMatchingStatusFilter = (v) => stringToUnion(v, ACTUAL_MATCHING_STATUS_FILTERS);
 export const MATCH_TRANSACTION_SEARCH_PAGE_SIZE = 50;
 export const MATCH_ACCRUAL_SEARCH_LIMIT = 50;
 export const MATCH_SEARCH_DEBOUNCE_MS = 300;
@@ -33,6 +39,15 @@ const UNDO_REVERSAL_RESULT_STATUSES = [
     'error',
 ];
 export const toUndoReversalResultStatus = (v) => stringToUnion(v, UNDO_REVERSAL_RESULT_STATUSES);
+const ACTUAL_MATCHING_IGNORE_REASONS = [
+    'wrong_bill',
+    'wrong_period',
+    'amount_off',
+    'already_handled',
+    'other_ignore',
+];
+export const toActualMatchingIgnoreReasonType = (v) => stringToUnion(v, ACTUAL_MATCHING_IGNORE_REASONS);
+export const ALL_ACTUAL_MATCHING_IGNORE_REASONS = ACTUAL_MATCHING_IGNORE_REASONS;
 export function actualMatchingTransactionLineKey(transactionType, transactionIntegrationId, lineId) {
     return `${transactionType}:${transactionIntegrationId}:${lineId}`;
 }

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

@@ -6,7 +6,8 @@ import { updateInvoices } from '../../../entity/invoicing/invoice/invoiceReducer
 import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
-import { addInvoiceToList } from '../invoiceList/invoiceListReducer';
+import { invalidateInvoicingCustomerDetail } from '../editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewReducer';
+import { addInvoiceToList, invalidateInvoiceListForCustomer, } from '../invoiceList/invoiceListReducer';
 import { createInvoice, createInvoiceFailure, createInvoiceSuccess, } from './createInvoiceReducer';
 export const createInvoiceEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(createInvoice.match), mergeMap((action) => {
     const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/invoices`;
@@ -23,6 +24,13 @@ export const createInvoiceEpic = (actions$, _state$, zeniAPI) => actions$.pipe(f
                     id: response.data.id,
                     status: response.data.status,
                 }),
+                // The customer's page caches their invoices and totals.
+                invalidateInvoicingCustomerDetail({
+                    id: response.data.customer_id,
+                }),
+                invalidateInvoiceListForCustomer({
+                    customerId: response.data.customer_id,
+                }),
                 createInvoiceSuccess({ invoiceId: response.data.id }),
                 openSnackbar({
                     messageSection: 'invoicing_invoice_saved',

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

@@ -1,5 +1,5 @@
 import { getAddressByAddressId } from '../../../entity/address/addressSelector';
-import { invoicingPricePointDisplayAmount } from '../../../entity/invoicing/plan/planSelector';
+import { invoicingPricePointDisplayAmount } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
 import { invoicingFieldHelpForGroup } from '../invoicingConfigView/invoicingConfigViewSelector';
 import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';

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

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { reduceAllFetchState } from '../../../commonStateTypes/reduceFetchState';
-import { getInvoicingPlanById, getInvoicingPlansByIds, } from '../../../entity/invoicing/plan/planSelector';
+import { getInvoicingCatalogItemById, getInvoicingCatalogItemsByIds, } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 import { getInvoicingConfigView, invoicingFieldHelpForGroup, } from '../invoicingConfigView/invoicingConfigViewSelector';
 import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { INVOICING_DEFAULT_INCOME_ACCOUNT_TYPES, INVOICING_INCOME_ACCOUNT_MAPPING_SLOT, NO_INVOICING_ACCOUNT_HIERARCHY, NO_INVOICING_ACCOUNT_IDS, NO_INVOICING_CLASS_HIERARCHY, getInvoicingQboAccountOptions, getInvoicingQboView, invoicingQboAccountIdsForMappingSlot, isInvoicingAccountingPickerDataLoading, isInvoicingQboConnected, } from '../invoicingQboView/invoicingQboViewSelector';
@@ -36,7 +36,7 @@ const buildApplicableCatalogItemOptions = (plans) => {
  * Kept referentially stable across unrelated dispatches; the form view filters
  * out the item being edited (see `getInvoicingCatalogItemFormView`).
  */
-export const getInvoicingApplicableCatalogItemOptions = createSelector((state) => state.invoicingPlanState, (state) => state.invoicingCatalogListViewState, (planState, listViewState) => buildApplicableCatalogItemOptions(getInvoicingPlansByIds(planState, [
+export const getInvoicingApplicableCatalogItemOptions = createSelector((state) => state.invoicingCatalogState, (state) => state.invoicingCatalogListViewState, (catalogState, listViewState) => buildApplicableCatalogItemOptions(getInvoicingCatalogItemsByIds(catalogState, [
     ...listViewState.planIds,
     ...listViewState.productIds,
 ])));
@@ -61,7 +61,9 @@ const getInvoicingCatalogIncomeAccountIds = createSelector([
     : NO_INVOICING_ACCOUNT_IDS);
 export const getInvoicingCatalogItemFormView = (state, id) => {
     const { editDraftById, error, fetchState, newItemDraft, savedItemId, savedKind, } = state.editInvoicingCatalogItemDetailViewState;
-    const plan = id != null ? getInvoicingPlanById(state.invoicingPlanState, id) : undefined;
+    const plan = id != null
+        ? getInvoicingCatalogItemById(state.invoicingCatalogState, id)
+        : undefined;
     const kind = plan != null ? 'plan' : undefined;
     // No entity fallback: the draft is the one source of form values, seeded from
     // the record by `seedInvoicingCatalogItemFormDraftEpic` when the detail load

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

@@ -1,6 +1,6 @@
 import { of } from 'rxjs';
 import { catchError, filter, switchMap } from 'rxjs/operators';
-import { updateInvoicingPlans } from '../../../entity/invoicing/plan/planReducer';
+import { updateInvoicingCatalogItems } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { fetchInvoicingCatalogItemDetail, updateInvoicingCatalogItemDetail, updateInvoicingCatalogItemDetailFailure, } from './editInvoicingCatalogItemDetailViewReducer';
 export const fetchInvoicingCatalogItemDetailEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingCatalogItemDetail.match), switchMap((action) => {
@@ -9,7 +9,7 @@ export const fetchInvoicingCatalogItemDetailEpic = (actions$, _state$, zeniAPI)
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
             return [
-                updateInvoicingPlans([response.data], 'merge'),
+                updateInvoicingCatalogItems([response.data], 'merge'),
                 updateInvoicingCatalogItemDetail({ id: response.data.id, kind }),
             ];
         }

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

@@ -1,6 +1,6 @@
 import { of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
-import { updateInvoicingPlans } from '../../../entity/invoicing/plan/planReducer';
+import { updateInvoicingCatalogItems } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { runInvoicingCatalogPlanAction, runInvoicingCatalogPlanActionFailure, runInvoicingCatalogPlanActionSuccess, } from './editInvoicingCatalogItemDetailViewReducer';
 export const runInvoicingCatalogPlanActionEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(runInvoicingCatalogPlanAction.match), mergeMap((action) => {
@@ -12,7 +12,7 @@ export const runInvoicingCatalogPlanActionEpic = (actions$, _state$, zeniAPI) =>
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
             return [
-                updateInvoicingPlans([response.data], 'merge'),
+                updateInvoicingCatalogItems([response.data], 'merge'),
                 runInvoicingCatalogPlanActionSuccess({ id }),
             ];
         }

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

@@ -1,7 +1,6 @@
 import { of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
-import { mergeInvoicingPlanSubFamily } from '../../../entity/invoicing/plan/planReducer';
-import { updateInvoicingProducts } from '../../../entity/invoicing/product/productReducer';
+import { mergeInvoicingCatalogPricePoint } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { runInvoicingCatalogProductAction, runInvoicingCatalogProductActionFailure, runInvoicingCatalogProductActionSuccess, } from './editInvoicingCatalogItemDetailViewReducer';
 export const runInvoicingCatalogProductActionEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(runInvoicingCatalogProductAction.match), mergeMap((action) => {
@@ -16,9 +15,10 @@ export const runInvoicingCatalogProductActionEpic = (actions$, _state$, zeniAPI)
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
             return [
-                updateInvoicingProducts([response.data], 'merge'),
                 ...(parentItemId != null
-                    ? [mergeInvoicingPlanSubFamily(parentItemId, response.data)]
+                    ? [
+                        mergeInvoicingCatalogPricePoint(parentItemId, response.data),
+                    ]
                     : []),
                 runInvoicingCatalogProductActionSuccess({ id: stateKey }),
             ];

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

@@ -1,7 +1,6 @@
 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';
+import { mergeInvoicingCatalogPricePoint, updateInvoicingCatalogItems, } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
@@ -51,11 +50,8 @@ export const saveInvoicingCatalogItemEpic = (actions$, state$, zeniAPI) => actio
                 }
                 const savedProducts = productResponses.flatMap((productResponse) => productResponse.data != null ? [productResponse.data] : []);
                 const resultActions = [
-                    updateInvoicingPlans([savedItem], 'merge'),
-                    ...(savedProducts.length > 0
-                        ? [updateInvoicingProducts(savedProducts, 'merge')]
-                        : []),
-                    ...savedProducts.map((product) => mergeInvoicingPlanSubFamily(savedItem.id, product)),
+                    updateInvoicingCatalogItems([savedItem], 'merge'),
+                    ...savedProducts.map((product) => mergeInvoicingCatalogPricePoint(savedItem.id, product)),
                     submitInvoicingCatalogItemFormSuccess({
                         itemId: savedItem.id,
                         kind: 'plan',

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

@@ -1,6 +1,6 @@
 import { EMPTY, of } from 'rxjs';
 import { filter, mergeMap, withLatestFrom } from 'rxjs/operators';
-import { getInvoicingPlanById } from '../../../entity/invoicing/plan/planSelector';
+import { getInvoicingCatalogItemById } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 import { fetchInvoicingCatalogItemDetailPage, seedInvoicingCatalogItemFormDraft, updateInvoicingCatalogItemDetail, } from './editInvoicingCatalogItemDetailViewReducer';
 import { entityToInvoicingCatalogItemFormLocalData } from './invoicingCatalogItemFormHelper';
 /**
@@ -34,7 +34,7 @@ export const seedInvoicingCatalogItemFormDraftEpic = (actions$, state$) => actio
     }
     // Nothing to seed from on a cold open; the detail response triggers this
     // again once it lands.
-    const plan = getInvoicingPlanById(state.invoicingPlanState, id);
+    const plan = getInvoicingCatalogItemById(state.invoicingCatalogState, id);
     if (plan == null) {
         return EMPTY;
     }

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

@@ -95,6 +95,10 @@ const editInvoicingCustomerDetailView = createSlice({
                 error: undefined,
             };
         },
+        // Makes the page epic refetch a record that changed server-side (e.g. a new subscription).
+        invalidateInvoicingCustomerDetail(draft, action) {
+            delete draft.recordStateById[action.payload.id];
+        },
         fetchInvoicingCustomerDetail(draft, action) {
             draft.recordStateById[action.payload.id] = {
                 fetchState: 'In-Progress',
@@ -198,5 +202,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, claimInvoicingCustomerBillingAddress, } = editInvoicingCustomerDetailView.actions;
+export const { fetchInvoicingPaymentLinkEmailPreview, fetchInvoicingPaymentLinkEmailPreviewPage, updateInvoicingPaymentLinkEmailPreview, updateInvoicingPaymentLinkEmailPreviewFailure, addPromotionalCreditsFailure, addPromotionalCreditsSuccess, fetchInvoicingCustomerDetail, fetchInvoicingCustomerDetailPage, invalidateInvoicingCustomerDetail, seedInvoicingCustomerFormDraft, updateInvoicingCustomerDetail, resetPromotionalCreditAction, submitAddPromotionalCredits, updateInvoicingCustomerDetailFailure, updateInvoicingCustomerFormDraft, submitInvoicingCustomerForm, submitInvoicingCustomerFormSuccess, submitInvoicingCustomerFormFailure, resetEditInvoicingCustomerDetailView, initializeInvoicingCustomerAddress, claimInvoicingCustomerBillingAddress, } = editInvoicingCustomerDetailView.actions;
 export default editInvoicingCustomerDetailView.reducer;

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

@@ -7,6 +7,8 @@ import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiE
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { resetNewAddressDataInLocalStore } from '../../addressView/addressViewReducer';
+import { invalidateInvoicingCustomerDetail } from '../editInvoicingCustomerDetailView/editInvoicingCustomerDetailViewReducer';
+import { invalidateInvoiceListForCustomer } from '../invoiceList/invoiceListReducer';
 import { addInvoicingSubscriptionToList } from '../invoicingSubscriptionListView/invoicingSubscriptionListViewReducer';
 import { localDataToSaveInvoicingSubscriptionPayload, } from './editInvoicingSubscriptionDetailViewPayload';
 import { submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormFailure, submitInvoicingSubscriptionFormSuccess, syncInvoicingSubscriptionCoupons, } from './editInvoicingSubscriptionDetailViewReducer';
@@ -86,7 +88,9 @@ export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => acti
             resultActions.push(addInvoicingSubscriptionToList({
                 id: saved.id,
                 status: saved.status,
-            }));
+            }), 
+            // The service may bill the first invoice on create.
+            invalidateInvoicingCustomerDetail({ id: saved.customer_id }), invalidateInvoiceListForCustomer({ customerId: saved.customer_id }));
         }
         resultActions.push(openSnackbar({
             messageSection: 'invoicing_subscription_saved',

package/lib/esm/view/invoicing/invoiceList/invoiceListReducer.js

@@ -124,6 +124,13 @@ const invoiceList = createSlice({
             draft.kpisFetchState.fetchState = 'Error';
             draft.kpisFetchState.error = action.payload;
         },
+        // Counts are fetched under the same customer filter, so they go stale with the tabs.
+        invalidateInvoiceListForCustomer(draft, action) {
+            if (draft.filters.customerId === action.payload.customerId) {
+                draft.invoiceByTab = makeInvoiceByTab();
+                draft.countsFetchState = { fetchState: 'Not-Started', error: undefined };
+            }
+        },
         updateInvoiceListFilters(draft, action) {
             draft.filters = action.payload;
         },
@@ -166,5 +173,5 @@ const invoiceList = createSlice({
         });
     },
 });
-export const { fetchInvoiceList, fetchInvoiceListPage, updateInvoiceList, updateInvoiceListFailure, fetchInvoiceCounts, updateInvoiceCounts, updateInvoiceCountsFailure, fetchInvoiceKPIs, updateInvoiceKPIs, updateInvoiceKPIsFailure, updateInvoiceListFilters, setInvoiceActiveTab, addInvoiceToList, } = invoiceList.actions;
+export const { fetchInvoiceList, fetchInvoiceListPage, updateInvoiceList, updateInvoiceListFailure, fetchInvoiceCounts, updateInvoiceCounts, updateInvoiceCountsFailure, fetchInvoiceKPIs, updateInvoiceKPIs, updateInvoiceKPIsFailure, updateInvoiceListFilters, setInvoiceActiveTab, addInvoiceToList, invalidateInvoiceListForCustomer, } = invoiceList.actions;
 export default invoiceList.reducer;

package/lib/esm/view/invoicing/invoicingCatalogListView/epics/fetchInvoicingCatalogPlanListEpic.js

@@ -1,6 +1,6 @@
 import { of } from 'rxjs';
 import { catchError, filter, switchMap } from 'rxjs/operators';
-import { updateInvoicingPlans } from '../../../../entity/invoicing/plan/planReducer';
+import { updateInvoicingCatalogItems } from '../../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
 import { fetchInvoicingCatalogPlanList, updateInvoicingCatalogPlanList, updateInvoicingCatalogPlanListFailure, } from '../invoicingCatalogListViewReducer';
@@ -29,7 +29,7 @@ export const fetchInvoicingCatalogPlanListEpic = (actions$, _state$, zeniAPI) =>
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
             return [
-                updateInvoicingPlans(items, 'merge'),
+                updateInvoicingCatalogItems(items, 'merge'),
                 updateInvoicingCatalogPlanList({
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,

package/lib/esm/view/invoicing/invoicingCatalogListView/epics/fetchInvoicingCatalogProductListEpic.js

@@ -1,6 +1,6 @@
 import { of } from 'rxjs';
 import { catchError, filter, switchMap } from 'rxjs/operators';
-import { updateInvoicingPlans } from '../../../../entity/invoicing/plan/planReducer';
+import { updateInvoicingCatalogItems } from '../../../../entity/invoicing/invoicingCatalog/invoicingCatalogReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
 import { fetchInvoicingCatalogProductList, updateInvoicingCatalogProductList, updateInvoicingCatalogProductListFailure, } from '../invoicingCatalogListViewReducer';
@@ -29,7 +29,7 @@ export const fetchInvoicingCatalogProductListEpic = (actions$, _state$, zeniAPI)
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
             return [
-                updateInvoicingPlans(items, 'merge'),
+                updateInvoicingCatalogItems(items, 'merge'),
                 updateInvoicingCatalogProductList({
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,

package/lib/esm/view/invoicing/invoicingCatalogListView/invoicingCatalogListViewSelector.js

@@ -1,7 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { getInvoicingPlansByIds } from '../../../entity/invoicing/plan/planSelector';
-import { runningInvoicingActionId } from '../runningInvoicingActionId';
-import { INVOICING_PRODUCT_COLUMNS, } from './invoicingCatalogListViewState';
+import { getInvoicingCatalogItemsByIds, invoicingPricePointDisplayAmount, } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogSelector';
 /**
  * Flatten catalog items into the price rows the pickers render.
  *
@@ -22,28 +20,63 @@ export const getInvoicingCatalogPrices = (items) => items.flatMap((item) => (ite
     priceCode: subFamily.priceCode,
     productCode: item.productCode,
 })));
+const lowestStartingTier = (tiers) => tiers.reduce((lowest, tier) => lowest == null || tier.startingUnit < lowest.startingUnit ? tier : lowest, undefined);
+export const getInvoicingCatalogPlanRows = (items) => items.flatMap((item) => {
+    const pricePoints = item.subFamilies ?? [];
+    if (pricePoints.length === 0) {
+        return [
+            {
+                id: item.id,
+                item,
+                period: item.period,
+                periodUnit: item.periodUnit,
+                price: item.price,
+                productFamily: item.name,
+                status: item.status,
+                tierCount: item.tiers?.length ?? 0,
+                firstTier: lowestStartingTier(item.tiers ?? []),
+            },
+        ];
+    }
+    return pricePoints.map((pricePoint) => ({
+        id: pricePoint.id,
+        item,
+        period: pricePoint.period,
+        periodUnit: pricePoint.periodUnit,
+        planName: pricePoint.name,
+        price: invoicingPricePointDisplayAmount(pricePoint),
+        pricingModel: pricePoint.pricingModel,
+        productFamily: item.name,
+        status: pricePoint.status,
+        tierCount: pricePoint.tiers?.length ?? 0,
+        firstTier: lowestStartingTier(pricePoint.tiers ?? []),
+    }));
+});
 /**
  * Bundled read view for the single catalog page (plans + products tabs).
  * Memoized over the plan + product entity slices and the list-view slice so the
  * denormalized arrays keep referential identity. The base `fetchState`/`error`
  * track the plan list; the product list has its own `productFetchState`.
  */
-export const getInvoicingCatalogListView = createSelector((state) => state.invoicingPlanState, (state) => state.invoicingCatalogListViewState, (state) => state.invoicingConfigViewState.catalogItemLifecycleActionOptions, (state) => state.editInvoicingCatalogItemDetailViewState.actionStateById, (planState, listViewState, catalogItemLifecycleActionOptions, actionStateById) => ({
-    catalogItemLifecycleActionOptions,
-    runningActionId: runningInvoicingActionId(actionStateById),
-    plans: getInvoicingPlansByIds(planState, listViewState.planIds),
-    planSort: listViewState.planSort,
-    productColumns: INVOICING_PRODUCT_COLUMNS,
-    products: getInvoicingPlansByIds(planState, listViewState.productIds),
-    productSort: listViewState.productSort,
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    planFilters: listViewState.planFilters,
-    planNextCursor: listViewState.planNextCursor,
-    productFilters: listViewState.productFilters,
-    productNextCursor: listViewState.productNextCursor,
-    productFetchState: listViewState.productFetchState,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    version: 1.0,
-}));
+export const getInvoicingCatalogListView = createSelector((state) => state.invoicingCatalogState, (state) => state.invoicingCatalogListViewState, (catalogState, listViewState) => {
+    const plans = getInvoicingCatalogItemsByIds(catalogState, listViewState.planIds);
+    const products = getInvoicingCatalogItemsByIds(catalogState, listViewState.productIds);
+    return {
+        planRows: getInvoicingCatalogPlanRows(plans),
+        plans,
+        planSort: listViewState.planSort,
+        productRows: getInvoicingCatalogPlanRows(products),
+        products,
+        productSort: listViewState.productSort,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        planFilters: listViewState.planFilters,
+        planNextCursor: listViewState.planNextCursor,
+        productFilters: listViewState.productFilters,
+        productNextCursor: listViewState.productNextCursor,
+        productFetchState: listViewState.productFetchState,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoicingCatalogListView/invoicingCatalogListViewState.js

@@ -1,20 +1 @@
-import { stringToUnion } from '../../../commonStateTypes/stringToUnion';
-export const ALL_INVOICING_PRODUCT_SORT_KEYS = [
-    'product_name',
-    'product_code',
-    'type',
-    'pricing',
-    'usage',
-    'updated',
-    'status',
-];
-export const toInvoicingProductSortKey = (v) => stringToUnion(v, ALL_INVOICING_PRODUCT_SORT_KEYS);
-export const INVOICING_PRODUCT_COLUMNS = [
-    { key: 'product_name', sortable: true },
-    { key: 'product_code', sortable: true },
-    { key: 'type', sortable: true },
-    { key: 'pricing', sortable: false },
-    { key: 'usage', sortable: true },
-    { key: 'updated', sortable: true },
-    { key: 'status', sortable: true },
-];
+export {};