@zeniai/client-epic-state 5.1.98 → 5.2.0

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

@@ -1,22 +1,5 @@
 /** `AddressType` key used when the customer form opens the shared Address screen. */
 export const INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE = 'invoicing_customer_billing_address';
-/**
- * Canonical option value sets for the customer form. CES owns the values;
- * web-components maps each value to a localized label (same split as the
- * invoicing list column/tab config).
- */
-export const INVOICING_CUSTOMER_TYPE_VALUES = [
-    'business',
-    'residential',
-];
-export const INVOICING_TAXABILITY_VALUES = ['taxable', 'exempt'];
-export const INVOICING_NET_TERM_DAY_VALUES = [
-    '0',
-    '15',
-    '30',
-    '45',
-    '60',
-];
 export const initialInvoicingCustomerFormLocalData = {
     autoCollection: true,
     company: '',

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

@@ -2,11 +2,16 @@ import { getInvoicingSubscriptionById } from '../../../entity/invoicing/invoicin
 import { getFormattedAddress } from '../../addressView/addressViewSelector';
 import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
 import { getInvoicingCatalogListView, getInvoicingCatalogPrices, } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
+import { getInvoicingConfigView } from '../invoicingConfigView/invoicingConfigViewSelector';
 import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoicingCustomerListViewSelector';
 import { INVOICING_SUBSCRIPTION_BILLING_FREQUENCY_VALUES, INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE, entityToInvoicingSubscriptionFormLocalData, } from './invoicingSubscriptionFormConfig';
 export const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptionID) => {
     const { error, fetchState, savedSubscriptionId } = state.editInvoicingSubscriptionDetailViewState;
+    const { subscriptionCommercialEditAllowedFromStatuses, subscriptionLifecycleActionOptions, subscriptionMetadataEditAllowedFromStatuses, } = getInvoicingConfigView(state);
     return {
+        subscriptionCommercialEditAllowedFromStatuses,
+        subscriptionLifecycleActionOptions,
+        subscriptionMetadataEditAllowedFromStatuses,
         subscription: invoicingSubscriptionID != null
             ? getInvoicingSubscriptionById(state.invoicingSubscriptionState, invoicingSubscriptionID)
             : undefined,

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

@@ -1,6 +1,7 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { fetchInvoiceCounts, fetchInvoiceKPIs, fetchInvoiceList, fetchInvoiceListPage, } from './invoiceListReducer';
+import { makeInvoiceTabState } from './invoiceListState';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
  * caller forces a refresh via `cacheOverride` (e.g. on a filter/sort change).
@@ -16,7 +17,7 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 export const fetchInvoiceListPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoiceListPage.match), mergeMap((action) => {
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingInvoiceListState;
-    const activeTabState = state.invoiceByTab[state.activeTab];
+    const activeTabState = state.invoiceByTab[state.activeTab] ?? makeInvoiceTabState();
     const pageActions = [];
     if (shouldFetch({ fetchState: activeTabState.fetchState, error: activeTabState.error }, cacheOverride)) {
         pageActions.push(fetchInvoiceList({ filters, sort }));

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

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { ALL_INVOICING_INVOICE_TAB_IDS, makeInvoiceByTab, } from './invoiceListState';
+import { invoiceTabStateFor, makeInvoiceByTab, } from './invoiceListState';
 /**
  * Whether two invoice-list queries share the same base (tab-independent) query.
  * The status tab is server-side per-tab, so it is excluded here — when the base
@@ -15,13 +15,17 @@ export const sameInvoiceListQuery = (a, b) => a.filters.customerId === b.filters
     a.sort?.field === b.sort?.field &&
     a.sort?.dir === b.sort?.dir;
 /**
- * Narrow an invoice status to a status tab id when one exists. Statuses like
- * `draft` / `posted` / `pending` have no dedicated tab, so a newly created
- * invoice in one of those states only lands in the `all` tab.
+ * The status tab a newly created invoice belongs in — always its own status.
+ *
+ * This used to gate on `ALL_INVOICING_INVOICE_TAB_IDS`, which left a status the
+ * config added but this build's union does not know getting its count
+ * incremented while the id landed only in `all`: the tab rendered with a
+ * non-zero count and an empty list until a refetch. Per-tab cache entries are
+ * created on demand now, so every status is a valid key and the add path agrees
+ * with the count path. A status with no rendered tab just caches an entry nobody
+ * reads.
  */
-const statusToTabId = (status) => ALL_INVOICING_INVOICE_TAB_IDS.includes(status)
-    ? status
-    : undefined;
+const statusToTabId = (status) => status;
 export const initialState = {
     activeTab: 'all',
     invoiceByTab: makeInvoiceByTab(),
@@ -37,7 +41,7 @@ const invoiceList = createSlice({
     reducers: {
         fetchInvoiceList: {
             reducer(draft, action) {
-                const tab = draft.invoiceByTab[draft.activeTab];
+                const tab = invoiceTabStateFor(draft.invoiceByTab, draft.activeTab);
                 if (!action.payload.keepExistingListItems) {
                     tab.invoiceIds = [];
                     tab.nextCursor = null;
@@ -80,7 +84,7 @@ const invoiceList = createSlice({
             },
         },
         updateInvoiceList(draft, action) {
-            const tab = draft.invoiceByTab[draft.activeTab];
+            const tab = invoiceTabStateFor(draft.invoiceByTab, draft.activeTab);
             const newIds = action.payload.invoices.map((invoice) => invoice.id);
             tab.invoiceIds = action.payload.keepExistingListItems
                 ? [...new Set([...tab.invoiceIds, ...newIds])]
@@ -90,7 +94,7 @@ const invoiceList = createSlice({
             tab.error = undefined;
         },
         updateInvoiceListFailure(draft, action) {
-            const tab = draft.invoiceByTab[draft.activeTab];
+            const tab = invoiceTabStateFor(draft.invoiceByTab, draft.activeTab);
             tab.fetchState = 'Error';
             tab.error = action.payload;
         },
@@ -136,17 +140,14 @@ const invoiceList = createSlice({
         // are left untouched and refetched lazily.
         addInvoiceToList(draft, action) {
             const { id, status } = action.payload;
-            const allTab = draft.invoiceByTab['all'];
+            const allTab = invoiceTabStateFor(draft.invoiceByTab, 'all');
             if (allTab.invoiceIds.includes(id)) {
                 return;
             }
             allTab.invoiceIds = [id, ...allTab.invoiceIds];
-            const statusTab = statusToTabId(status);
-            if (statusTab != null) {
-                const tab = draft.invoiceByTab[statusTab];
-                if (!tab.invoiceIds.includes(id)) {
-                    tab.invoiceIds = [id, ...tab.invoiceIds];
-                }
+            const statusTab = invoiceTabStateFor(draft.invoiceByTab, statusToTabId(status));
+            if (!statusTab.invoiceIds.includes(id)) {
+                statusTab.invoiceIds = [id, ...statusTab.invoiceIds];
             }
             draft.counts.all += 1;
             draft.counts[status] = (draft.counts[status] ?? 0) + 1;

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

@@ -1,13 +1,17 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { INVOICING_INVOICE_TABS, } from './invoiceListState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_INVOICE_TAB_IDS, makeInvoiceTabState, } from './invoiceListState';
 /**
  * Bundled read view for the invoices list page: the denormalized invoice rows
  * plus list counts, KPIs and their fetch states. Memoized so the `invoices`
  * array (and the wrapping view object) keep referential identity until the
  * invoice entity slice or the list-view slice actually change.
  */
-export const getInvoiceListView = createSelector((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (invoiceState, listViewState) => {
-    const activeTabState = listViewState.invoiceByTab[listViewState.activeTab];
+export const getInvoiceListView = createSelector((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (state) => state.invoicingConfigViewState.invoiceStatusOptions, (invoiceState, listViewState, statusOptions) => {
+    // Config-driven tabs: a status this build's union does not know has no
+    // cache entry until it is fetched, so default rather than crash.
+    const activeTabState = listViewState.invoiceByTab[listViewState.activeTab] ??
+        makeInvoiceTabState();
     return {
         activeTab: listViewState.activeTab,
         invoices: activeTabState.invoiceIds
@@ -19,7 +23,11 @@ export const getInvoiceListView = createSelector((state) => state.invoicingInvoi
         kpis: listViewState.kpis,
         kpisFetchState: listViewState.kpisFetchState,
         nextCursor: activeTabState.nextCursor,
-        tabIds: INVOICING_INVOICE_TABS,
+        statusOptions,
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_INVOICE_TAB_IDS,
+            statusOptions,
+        }),
         fetchState: activeTabState.fetchState,
         error: activeTabState.error,
         version: 1.0,

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

@@ -8,21 +8,25 @@ export const ALL_INVOICING_INVOICE_TAB_IDS = [
     'voided',
 ];
 export const toInvoicingInvoiceTabId = (v) => stringToUnion(v, ALL_INVOICING_INVOICE_TAB_IDS);
-/**
- * Ordered filter-tab id set owned by CES so the invoice-list tabs live next to
- * the model rather than being hardcoded in web-components. Tab labels and the
- * per-tab count lookup stay in the view layer; this only carries the id set and
- * display order.
- */
-export const INVOICING_INVOICE_TABS = [
-    ...ALL_INVOICING_INVOICE_TAB_IDS,
-];
 export const makeInvoiceTabState = () => ({
     invoiceIds: [],
     nextCursor: null,
     fetchState: 'Not-Started',
     error: undefined,
 });
+/**
+ * The cache entry for a tab, created on first use. The tab set is config-driven,
+ * so a status this build's union does not know still needs somewhere to cache.
+ */
+export const invoiceTabStateFor = (invoiceByTab, tabId) => {
+    const existing = invoiceByTab[tabId];
+    if (existing != null) {
+        return existing;
+    }
+    const created = makeInvoiceTabState();
+    invoiceByTab[tabId] = created;
+    return created;
+};
 export const makeInvoiceByTab = () => ALL_INVOICING_INVOICE_TAB_IDS.reduce((acc, tabId) => {
     acc[tabId] = makeInvoiceTabState();
     return acc;

package/lib/esm/view/invoicing/invoicingCatalogItemDetailView/invoicingCatalogItemDetailViewSelector.js

@@ -2,13 +2,17 @@ import { getInvoicingPlanById } from '../../../entity/invoicing/plan/planSelecto
 import { getInvoicingConfigView } from '../invoicingConfigView/invoicingConfigViewSelector';
 export const getInvoicingCatalogItemDetail = (state, _kind, id) => {
     const { error, fetchState } = state.invoicingCatalogItemDetailViewState;
-    const { catalogItemLifecycleActionOptions, catalogProductLifecycleActionOptions, catalogTierTypeOptionsByPricingModel, fetchState: configFetchState, } = getInvoicingConfigView(state);
+    const { billingPeriodUnitOptions, catalogItemLifecycleActionOptions, catalogItemTypeOptions, catalogProductLifecycleActionOptions, catalogTierTypeOptionsByPricingModel, catalogTrialEndActionOptions, catalogTrialUnitOptions, fetchState: configFetchState, } = getInvoicingConfigView(state);
     return {
         catalogItemLifecycleActionOptions,
         catalogProductLifecycleActionOptions,
         catalogTierTypeOptionsByPricingModel,
         configFetchState,
+        periodUnitOptions: billingPeriodUnitOptions,
         plan: getInvoicingPlanById(state.invoicingPlanState, id),
+        trialEndActionOptions: catalogTrialEndActionOptions,
+        trialUnitOptions: catalogTrialUnitOptions,
+        typeOptions: catalogItemTypeOptions,
         fetchState,
         error,
         version: 1.0,

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

@@ -15,7 +15,8 @@ export const getInvoicingCatalogPrices = (items) => items.flatMap((item) => (ite
  * 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, (planState, listViewState) => ({
+export const getInvoicingCatalogListView = createSelector((state) => state.invoicingPlanState, (state) => state.invoicingCatalogListViewState, (state) => state.invoicingConfigViewState.catalogItemLifecycleActionOptions, (planState, listViewState, catalogItemLifecycleActionOptions) => ({
+    catalogItemLifecycleActionOptions,
     plans: getInvoicingPlansByIds(planState, listViewState.planIds),
     productColumns: INVOICING_PRODUCT_COLUMNS,
     products: getInvoicingPlansByIds(planState, listViewState.productIds),

package/lib/esm/view/invoicing/invoicingConfigView/invoicingConfigViewReducer.js

@@ -23,6 +23,19 @@ export const initialState = {
     netTermDayOptions: [],
     paymentGatewayOptions: [],
     taxabilityOptions: [],
+    cardStatusOptions: [],
+    catalogItemStatusOptions: [],
+    catalogItemTypeOptions: [],
+    creditNoteReasonCodeOptions: [],
+    creditNoteStatusOptions: [],
+    creditNoteTypeOptions: [],
+    customerStatusOptions: [],
+    discountStatusOptions: [],
+    dunningCaseStatusOptions: [],
+    invoiceStatusOptions: [],
+    subscriptionStatusOptions: [],
+    transactionStatusOptions: [],
+    transactionTypeOptions: [],
     enableFetchState: { fetchState: 'Not-Started', error: undefined },
     subscriptionLifecycleActionOptions: [],
     subscriptionCommercialEditAllowedFromStatuses: [],
@@ -76,6 +89,19 @@ export function mapInvoicingConfigPayloadToState(payload) {
         netTermDayOptions: (payload.net_term_day_options ?? []).map(toInvoicingNamedOption),
         paymentGatewayOptions: (payload.payment_gateway_options ?? []).map(toInvoicingNamedOption),
         taxabilityOptions: (payload.taxability_options ?? []).map(toInvoicingNamedOption),
+        cardStatusOptions: (payload.card_status_options ?? []).map(toInvoicingNamedOption),
+        catalogItemStatusOptions: (payload.catalog_item_status_options ?? []).map(toInvoicingNamedOption),
+        catalogItemTypeOptions: (payload.catalog_item_type_options ?? []).map(toInvoicingNamedOption),
+        creditNoteReasonCodeOptions: (payload.credit_note_reason_code_options ?? []).map(toInvoicingNamedOption),
+        creditNoteStatusOptions: (payload.credit_note_status_options ?? []).map(toInvoicingNamedOption),
+        creditNoteTypeOptions: (payload.credit_note_type_options ?? []).map(toInvoicingNamedOption),
+        customerStatusOptions: (payload.customer_status_options ?? []).map(toInvoicingNamedOption),
+        discountStatusOptions: (payload.discount_status_options ?? []).map(toInvoicingNamedOption),
+        dunningCaseStatusOptions: (payload.dunning_case_status_options ?? []).map(toInvoicingNamedOption),
+        invoiceStatusOptions: (payload.invoice_status_options ?? []).map(toInvoicingNamedOption),
+        subscriptionStatusOptions: (payload.subscription_status_options ?? []).map(toInvoicingNamedOption),
+        transactionStatusOptions: (payload.transaction_status_options ?? []).map(toInvoicingNamedOption),
+        transactionTypeOptions: (payload.transaction_type_options ?? []).map(toInvoicingNamedOption),
         createdAt: payload.created_at ?? undefined,
         updatedAt: payload.updated_at ?? undefined,
         dunningScheduleActionOptions: payload.dunning_schedule_action_options.map((option) => ({

package/lib/esm/view/invoicing/invoicingConfigView/invoicingConfigViewSelector.js

@@ -8,3 +8,12 @@ export const getInvoicingConfigView = (state) => {
         status: deriveInvoicingOnboardingStatus(configState.isInvoicingTosAccepted, configState.isInvoicingEnabled),
     };
 };
+export const getInvoicingOnboardingGateView = (state) => {
+    const { acceptTermsFetchState, enableFetchState, fetchState } = state.invoicingConfigViewState;
+    return {
+        acceptTermsState: acceptTermsFetchState,
+        enableState: enableFetchState,
+        fetchState,
+        status: deriveInvoicingOnboardingStatus(state.invoicingConfigViewState.isInvoicingTosAccepted, state.invoicingConfigViewState.isInvoicingEnabled),
+    };
+};

package/lib/esm/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewSelector.js

@@ -1,12 +1,13 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingCreditNotesByIds } from '../../../entity/invoicing/creditNote/creditNoteSelector';
-import { INVOICING_CREDIT_NOTE_COLUMNS, INVOICING_CREDIT_NOTE_TABS, } from './invoicingCreditNoteListViewState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_CREDIT_NOTE_TAB_IDS, INVOICING_CREDIT_NOTE_COLUMNS, } from './invoicingCreditNoteListViewState';
 /**
  * Memoized so the denormalized `creditNotes` array (and the wrapping view
  * object) keep referential identity until the credit-note entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingCreditNoteListView = createSelector((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (creditNoteState, listViewState) => {
+export const getInvoicingCreditNoteListView = createSelector((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (state) => state.invoicingConfigViewState.creditNoteStatusOptions, (state) => state.invoicingConfigViewState.creditNoteTypeOptions, (creditNoteState, listViewState, statusOptions, typeOptions) => {
     const { activeTab } = listViewState;
     const allCreditNotes = getInvoicingCreditNotesByIds(creditNoteState, listViewState.ids);
     // The list API ignores `status`, so it returns every status; filter to the
@@ -22,7 +23,12 @@ export const getInvoicingCreditNoteListView = createSelector((state) => state.in
         countsFetchState: listViewState.countsFetchState,
         filters: listViewState.filters,
         nextCursor: listViewState.nextCursor,
-        tabIds: INVOICING_CREDIT_NOTE_TABS,
+        statusOptions,
+        typeOptions,
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_CREDIT_NOTE_TAB_IDS,
+            statusOptions,
+        }),
         fetchState: listViewState.fetchState,
         error: listViewState.error,
         sort: listViewState.sort,

package/lib/esm/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewState.js

@@ -28,12 +28,3 @@ export const ALL_INVOICING_CREDIT_NOTE_TAB_IDS = [
     'voided',
 ];
 export const toInvoicingCreditNoteTabId = (v) => stringToUnion(v, ALL_INVOICING_CREDIT_NOTE_TAB_IDS);
-/**
- * Ordered filter-tab id set owned by CES so the credit-notes-list tabs live next
- * to the model rather than being hardcoded in web-components. Tab labels and the
- * per-tab count lookup stay in the view layer; this only carries the id set and
- * display order.
- */
-export const INVOICING_CREDIT_NOTE_TABS = [
-    ...ALL_INVOICING_CREDIT_NOTE_TAB_IDS,
-];

package/lib/esm/view/invoicing/invoicingCustomerDetailView/fetchInvoicingCustomerDetailPageEpic.js

@@ -34,8 +34,8 @@ export const fetchInvoicingCustomerDetailPageEpic = (actions$, state$) => action
     const invoiceListIsForCustomer = invoiceListState.filters.customerId === id;
     if (!invoiceListIsForCustomer ||
         shouldFetch({
-            fetchState: invoiceListTabState.fetchState,
-            error: invoiceListTabState.error,
+            fetchState: invoiceListTabState?.fetchState ?? 'Not-Started',
+            error: invoiceListTabState?.error,
         }, cacheOverride)) {
         pageActions.push(fetchInvoiceList({ filters: { customerId: id } }));
     }

package/lib/esm/view/invoicing/invoicingCustomerDetailView/invoicingCustomerDetailViewSelector.js

@@ -10,7 +10,7 @@ export const getInvoicingCustomerDetail = (state, invoicingCustomerID) => {
     const settings = getInvoicingSettings(state);
     return {
         invoicingCustomer: getInvoicingCustomerById(invoicingCustomerState, invoicingCustomerID),
-        invoices: getInvoicesByIds(state.invoicingInvoiceState, state.invoicingInvoiceListState.invoiceByTab[state.invoicingInvoiceListState.activeTab].invoiceIds),
+        invoices: getInvoicesByIds(state.invoicingInvoiceState, state.invoicingInvoiceListState.invoiceByTab[state.invoicingInvoiceListState.activeTab]?.invoiceIds ?? []),
         setupIntent: getInvoicingSetupIntent(state),
         setupIntentFetchState: getInvoicingSetupIntentFetchState(state),
         plaidLinkToken: getInvoicingPlaidLinkToken(state),

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

@@ -1,13 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingCustomersByIds } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
-import { INVOICING_CUSTOMER_COLUMNS, INVOICING_CUSTOMER_TABS, } from './invoicingCustomerListViewState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_CUSTOMER_TAB_IDS, INVOICING_CUSTOMER_COLUMNS, } from './invoicingCustomerListViewState';
 /**
  * Memoized so the denormalized `customers` array (and the wrapping view object)
  * keep referential identity until the customer entity slice or the list-view
  * slice actually change. Without this, the connected list page re-rendered on
  * every unrelated redux action because a fresh array was built each call.
  */
-export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (customerState, listViewState) => {
+export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (state) => state.invoicingConfigViewState.customerStatusOptions, (customerState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
     const allCustomers = getInvoicingCustomersByIds(customerState, listViewState.ids);
     // The list API ignores `status`, so it returns every status; filter to the
@@ -28,7 +29,12 @@ export const getInvoicingCustomerListView = createSelector((state) => state.invo
         filters: listViewState.filters,
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
-        tabIds: INVOICING_CUSTOMER_TABS,
+        statusOptions,
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_CUSTOMER_TAB_IDS,
+            localTabIds: ['trial', 'at_risk'],
+            statusOptions,
+        }),
         sort: listViewState.sort,
     };
 });

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

@@ -23,12 +23,3 @@ export const ALL_INVOICING_CUSTOMER_TAB_IDS = [
     'at_risk',
 ];
 export const toInvoicingCustomerTabId = (v) => stringToUnion(v, ALL_INVOICING_CUSTOMER_TAB_IDS);
-/**
- * Ordered filter-tab id set owned by CES so the customer-list tabs live next to
- * the model rather than being hardcoded in web-components. Tab labels and the
- * per-tab count lookup stay in the view layer; this only carries the id set and
- * display order.
- */
-export const INVOICING_CUSTOMER_TABS = [
-    ...ALL_INVOICING_CUSTOMER_TAB_IDS,
-];

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewSelector.js

@@ -1,12 +1,13 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingDunningCasesByIds } from '../../../entity/invoicing/dunningCase/dunningCaseSelector';
-import { INVOICING_DUNNING_CASE_COLUMNS, INVOICING_DUNNING_CASE_TABS, } from './invoicingDunningCaseListViewState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_DUNNING_CASE_TAB_IDS, INVOICING_DUNNING_CASE_COLUMNS, } from './invoicingDunningCaseListViewState';
 /**
  * Memoized so the denormalized `dunningCases` array (and the wrapping view
  * object) keep referential identity until the dunning-case entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (dunningCaseState, listViewState) => {
+export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (state) => state.invoicingConfigViewState.dunningCaseStatusOptions, (dunningCaseState, listViewState, statusOptions) => {
     const { activeTab } = listViewState;
     const allDunningCases = getInvoicingDunningCasesByIds(dunningCaseState, listViewState.ids);
     // The list API ignores `status`, so it returns every status; filter to the
@@ -24,7 +25,11 @@ export const getInvoicingDunningCaseListView = createSelector((state) => state.i
         nextCursor: listViewState.nextCursor,
         fetchState: listViewState.fetchState,
         error: listViewState.error,
-        tabIds: INVOICING_DUNNING_CASE_TABS,
+        statusOptions,
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_DUNNING_CASE_TAB_IDS,
+            statusOptions,
+        }),
         sort: listViewState.sort,
         version: 1.0,
     };

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewState.js

@@ -25,16 +25,8 @@ export const ALL_INVOICING_DUNNING_CASE_TAB_IDS = [
     'Retrying',
     'Scheduled',
     'Manual Review',
+    'Paused',
     'Resolved',
     'Cancelled',
 ];
 export const toInvoicingDunningCaseTabId = (v) => stringToUnion(v, ALL_INVOICING_DUNNING_CASE_TAB_IDS);
-/**
- * Ordered filter-tab id set owned by CES so the dunning-cases-list tabs live
- * next to the model rather than being hardcoded in web-components. Tab labels
- * and the per-tab count lookup stay in the view layer; this only carries the id
- * set and display order.
- */
-export const INVOICING_DUNNING_CASE_TABS = [
-    ...ALL_INVOICING_DUNNING_CASE_TAB_IDS,
-];

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingSubscriptionsByIds } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
-import { INVOICING_SUBSCRIPTION_COLUMNS, INVOICING_SUBSCRIPTION_TABS, } from './invoicingSubscriptionListViewState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_SUBSCRIPTION_TAB_IDS, INVOICING_SUBSCRIPTION_COLUMNS, } from './invoicingSubscriptionListViewState';
 /**
  * Memoized so the denormalized `subscriptions` array (and the wrapping view
  * object) keep referential identity until the subscription entity slice or the
@@ -8,7 +9,7 @@ import { INVOICING_SUBSCRIPTION_COLUMNS, INVOICING_SUBSCRIPTION_TABS, } from './
  * re-rendered on every unrelated redux action because a fresh array was built
  * each call.
  */
-export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (subscriptionState, listViewState) => {
+export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (state) => state.invoicingConfigViewState.subscriptionStatusOptions, (state) => state.invoicingConfigViewState, (subscriptionState, listViewState, statusOptions, configState) => {
     const { activeTab } = listViewState;
     const allSubscriptions = getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids);
     // The list API ignores `status`, so it returns every status; filter to the
@@ -26,7 +27,14 @@ export const getInvoicingSubscriptionListView = createSelector((state) => state.
         filters: listViewState.filters,
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,
-        tabIds: INVOICING_SUBSCRIPTION_TABS,
+        subscriptionCommercialEditAllowedFromStatuses: configState.subscriptionCommercialEditAllowedFromStatuses,
+        subscriptionLifecycleActionOptions: configState.subscriptionLifecycleActionOptions,
+        subscriptionMetadataEditAllowedFromStatuses: configState.subscriptionMetadataEditAllowedFromStatuses,
+        statusOptions,
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_SUBSCRIPTION_TAB_IDS,
+            statusOptions,
+        }),
         sort: listViewState.sort,
     };
 });

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewState.js

@@ -32,12 +32,3 @@ export const ALL_INVOICING_SUBSCRIPTION_TAB_IDS = [
     'cancelled',
 ];
 export const toInvoicingSubscriptionTabId = (v) => stringToUnion(v, ALL_INVOICING_SUBSCRIPTION_TAB_IDS);
-/**
- * Ordered filter-tab id set owned by CES so the subscription-list tabs live next
- * to the model rather than being hardcoded in web-components. Tab labels and the
- * per-tab count lookup stay in the view layer; this only carries the id set and
- * display order.
- */
-export const INVOICING_SUBSCRIPTION_TABS = [
-    ...ALL_INVOICING_SUBSCRIPTION_TAB_IDS,
-];

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

@@ -0,0 +1,27 @@
+import { invoicingOptionCodes, } from '../../entity/invoicing/invoicingCommonPayload';
+/** Every list's leading "show everything" tab; FE-owned, never a backend status. */
+const ALL_TAB_ID = 'all';
+/**
+ * Build a list's filter-tab ids from the config option list rather than a
+ * hardcoded array, so adding a status backend-side widens the tabs.
+ *
+ * `all` always leads and is never taken from config. Codes config sends that the
+ * tab-id union does not know still render: the union types state, the per-tab
+ * cache and URL parsing, but it is a frontend snapshot of a backend enum, and
+ * dropping unknown codes would silently hide a status the backend already has —
+ * the exact drift this is meant to end.
+ */
+export function invoicingTabIdsFromConfig({ allTabIds, localTabIds = [], statusOptions, }) {
+    // Nullish as well as empty: a partial test state or a draft persisted before
+    // these lists existed can leave it undefined.
+    if (statusOptions == null || statusOptions.length === 0) {
+        return [...allTabIds];
+    }
+    const configTabIds = invoicingOptionCodes(statusOptions)
+        .filter((code) => code !== ALL_TAB_ID)
+        // A config code outside the union is still a valid tab at runtime — the
+        // caches key off the string — so it is admitted rather than dropped.
+        .map((code) => code);
+    const ordered = [ALL_TAB_ID, ...configTabIds, ...localTabIds];
+    return Array.from(new Set(ordered));
+}

package/lib/esm/view/invoicing/invoicingTransactionListView/epics/fetchInvoicingTransactionListPageEpic.js

@@ -1,6 +1,7 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { fetchInvoicingTransactionList, fetchInvoicingTransactionListPage, } from '../invoicingTransactionListViewReducer';
+import { makeInvoicingTransactionTabState } from '../invoicingTransactionListViewState';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
  * caller forces a refresh via `cacheOverride` (e.g. on a filter/sort change).
@@ -16,7 +17,7 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 export const fetchInvoicingTransactionListPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoicingTransactionListPage.match), mergeMap((action) => {
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingTransactionListViewState;
-    const activeTabState = state.byTab[state.activeTab];
+    const activeTabState = state.byTab[state.activeTab] ?? makeInvoicingTransactionTabState();
     const pageActions = [];
     if (shouldFetch({ fetchState: activeTabState.fetchState, error: activeTabState.error }, cacheOverride)) {
         pageActions.push(fetchInvoicingTransactionList({ filters, sort }));

package/lib/esm/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewReducer.js

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
-import { makeInvoicingTransactionIdsByTab, } from './invoicingTransactionListViewState';
+import { invoicingTransactionTabStateFor, makeInvoicingTransactionIdsByTab, } from './invoicingTransactionListViewState';
 /**
  * Whether two transaction-list queries share the same base (tab-independent)
  * query. When the base query changes (search / customer / status / sort) every
@@ -22,7 +22,7 @@ const invoicingTransactionListView = createSlice({
     reducers: {
         fetchInvoicingTransactionList: {
             reducer(draft, action) {
-                const tab = draft.byTab[draft.activeTab];
+                const tab = invoicingTransactionTabStateFor(draft.byTab, draft.activeTab);
                 if (!action.payload.keepExistingListItems) {
                     tab.ids = [];
                     tab.nextCursor = null;
@@ -65,7 +65,7 @@ const invoicingTransactionListView = createSlice({
             },
         },
         updateInvoicingTransactionList(draft, action) {
-            const tab = draft.byTab[draft.activeTab];
+            const tab = invoicingTransactionTabStateFor(draft.byTab, draft.activeTab);
             tab.ids = action.payload.keepExistingListItems
                 ? [...new Set([...tab.ids, ...action.payload.ids])]
                 : action.payload.ids;
@@ -74,7 +74,7 @@ const invoicingTransactionListView = createSlice({
             tab.error = undefined;
         },
         updateInvoicingTransactionListFailure(draft, action) {
-            const tab = draft.byTab[draft.activeTab];
+            const tab = invoicingTransactionTabStateFor(draft.byTab, draft.activeTab);
             tab.fetchState = 'Error';
             tab.error = action.payload;
         },
@@ -94,7 +94,7 @@ const invoicingTransactionListView = createSlice({
         addInvoicingTransactionToList(draft, action) {
             const id = action.payload;
             const prependTo = (tabId) => {
-                const tab = draft.byTab[tabId];
+                const tab = invoicingTransactionTabStateFor(draft.byTab, tabId);
                 if (!tab.ids.includes(id)) {
                     tab.ids = [id, ...tab.ids];
                 }

package/lib/esm/view/invoicing/invoicingTransactionListView/invoicingTransactionListViewSelector.js

@@ -1,13 +1,15 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingTransactionsByIds } from '../../../entity/invoicing/invoicingTransaction/invoicingTransactionSelector';
-import { INVOICING_TRANSACTION_COLUMNS, INVOICING_TRANSACTION_TABS, } from './invoicingTransactionListViewState';
+import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
+import { ALL_INVOICING_TRANSACTION_TAB_IDS, INVOICING_TRANSACTION_COLUMNS, makeInvoicingTransactionTabState, } from './invoicingTransactionListViewState';
 /**
  * Memoized so the denormalized `transactions` array (and the wrapping view
  * object) keep referential identity until the transaction entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingTransactionListView = createSelector((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (transactionState, listViewState) => {
-    const activeTabState = listViewState.byTab[listViewState.activeTab];
+export const getInvoicingTransactionListView = createSelector((state) => state.invoicingTransactionState, (state) => state.invoicingTransactionListViewState, (state) => state.invoicingConfigViewState.transactionTypeOptions, (state) => state.invoicingConfigViewState.transactionStatusOptions, (transactionState, listViewState, typeOptions, statusOptions) => {
+    const activeTabState = listViewState.byTab[listViewState.activeTab] ??
+        makeInvoicingTransactionTabState();
     return {
         activeTab: listViewState.activeTab,
         columns: INVOICING_TRANSACTION_COLUMNS,
@@ -16,7 +18,13 @@ export const getInvoicingTransactionListView = createSelector((state) => state.i
         nextCursor: activeTabState.nextCursor,
         fetchState: activeTabState.fetchState,
         error: activeTabState.error,
-        tabIds: INVOICING_TRANSACTION_TABS,
+        statusOptions,
+        typeOptions,
+        // Tabs are types on this list, so the type list drives membership.
+        tabIds: invoicingTabIdsFromConfig({
+            allTabIds: ALL_INVOICING_TRANSACTION_TAB_IDS,
+            statusOptions: typeOptions,
+        }),
         sort: listViewState.sort,
         version: 1.0,
     };