@zeniai/client-epic-state 5.2.73 → 5.2.74-betaAK0

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/editInvoicingSubscriptionDetailViewPayload.js

@@ -1,3 +1,5 @@
+import { toAmount } from '../../../commonStateTypes/amount';
+import { date } from '../../../zeniDayJS';
 import { toAddressUpdatableInfoPayload } from '../../addressView/addressViewPayload';
 import { invoicingSubscriptionTodayIso, toInvoicingSubscriptionBillingCycles, toInvoicingSubscriptionQuantity, } from './invoicingSubscriptionFormConfig';
 /**
@@ -56,3 +58,56 @@ export const localDataToSaveInvoicingSubscriptionPayload = (localData, shippingA
             : {}),
     };
 };
+const toEstimateDate = (value) => value != null && value !== '' ? date(value) : undefined;
+const mapInvoiceEstimate = (payload, money) => payload == null
+    ? undefined
+    : {
+        amountDue: money(payload.amount_due),
+        couponDiscountTotal: money(payload.coupon_discount_total),
+        creditsApplied: money(payload.credits_applied),
+        dueDate: toEstimateDate(payload.due_date),
+        grossSubTotal: money(payload.gross_sub_total),
+        invoiceDate: toEstimateDate(payload.invoice_date),
+        lineItems: payload.line_items.map((lineItem) => ({
+            amount: money(lineItem.amount),
+            dateFrom: toEstimateDate(lineItem.date_from),
+            dateTo: toEstimateDate(lineItem.date_to),
+            description: lineItem.description,
+            discountAmount: money(lineItem.discount_amount),
+            quantity: lineItem.quantity,
+            taxAmount: lineItem.tax_amount != null
+                ? money(lineItem.tax_amount)
+                : undefined,
+            unitAmount: money(lineItem.unit_amount),
+        })),
+        promotionalCreditsApplied: money(payload.promotional_credits_applied),
+        subTotal: money(payload.sub_total),
+        tax: payload.tax != null ? money(payload.tax) : undefined,
+        total: money(payload.total),
+    };
+export const mapInvoicingSubscriptionEstimatePayloadToState = (payload) => {
+    const money = (amount) => toAmount(amount, payload.currency_code, payload.currency_symbol);
+    const term = payload.subscription_estimate;
+    const proration = payload.proration_estimate;
+    return {
+        invoice: mapInvoiceEstimate(payload.invoice_estimate, money),
+        nextInvoice: mapInvoiceEstimate(payload.next_invoice_estimate, money),
+        proration: proration != null
+            ? {
+                documentType: proration.document_type,
+                invoice: mapInvoiceEstimate(proration.invoice_estimate, money),
+                net: money(proration.net),
+            }
+            : undefined,
+        reason: payload.reason,
+        term: term != null
+            ? {
+                becomesNonRenewing: term.becomes_non_renewing_after_this_term === true,
+                currentTermEnd: toEstimateDate(term.current_term_end),
+                currentTermStart: toEstimateDate(term.current_term_start),
+                nextBillingAt: toEstimateDate(term.next_billing_at),
+            }
+            : undefined,
+        willBeInvoiced: payload.will_be_invoiced,
+    };
+};

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

@@ -2,10 +2,14 @@ import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
 import { applyInvoicingFormDraftEdit, applyInvoicingFormDraftFailure, applyInvoicingFormDraftSaved, applyInvoicingFormDraftSeed, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
+const initialEstimateState = {
+    fetchState: { fetchState: 'Not-Started', error: undefined },
+};
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
     editDraftById: {},
+    estimateState: initialEstimateState,
     actionStateById: {},
     recordStateById: {},
     shippingAddressOwnerId: undefined,
@@ -19,6 +23,36 @@ const editInvoicingSubscriptionDetailView = createSlice({
     name: 'editInvoicingSubscriptionDetailView',
     initialState,
     reducers: {
+        // What saving the draft would bill (no id: create); see the estimate epic.
+        fetchInvoicingSubscriptionEstimate(draft, action) {
+            draft.estimateState = {
+                fetchState: { fetchState: 'In-Progress', error: undefined },
+                subscriptionId: action.payload.id,
+            };
+        },
+        // Dropped when the dialog has since moved to another subscription.
+        updateInvoicingSubscriptionEstimate(draft, action) {
+            if (draft.estimateState.subscriptionId !== action.payload.id) {
+                return;
+            }
+            draft.estimateState.estimate = action.payload.estimate;
+            draft.estimateState.fetchState = {
+                fetchState: 'Completed',
+                error: undefined,
+            };
+        },
+        updateInvoicingSubscriptionEstimateFailure(draft, action) {
+            if (draft.estimateState.subscriptionId !== action.payload.id) {
+                return;
+            }
+            draft.estimateState.fetchState = {
+                fetchState: 'Error',
+                error: action.payload.status,
+            };
+        },
+        clearInvoicingSubscriptionEstimate(draft) {
+            draft.estimateState = initialEstimateState;
+        },
         runInvoicingSubscriptionAction(draft, action) {
             draft.actionStateById[action.payload.id] = {
                 fetchState: 'In-Progress',
@@ -158,5 +192,5 @@ const editInvoicingSubscriptionDetailView = createSlice({
         });
     },
 });
-export const { runInvoicingSubscriptionAction, runInvoicingSubscriptionActionFailure, runInvoicingSubscriptionActionSuccess, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, updateInvoicingSubscriptionDetailFailure, updateInvoicingSubscriptionFormDraft, submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormSuccess, submitInvoicingSubscriptionFormFailure, resetEditInvoicingSubscriptionDetailView, initializeInvoicingSubscriptionAddress, claimInvoicingSubscriptionShippingAddress, syncInvoicingSubscriptionCoupons, } = editInvoicingSubscriptionDetailView.actions;
+export const { runInvoicingSubscriptionAction, runInvoicingSubscriptionActionFailure, runInvoicingSubscriptionActionSuccess, fetchInvoicingSubscriptionDetail, fetchInvoicingSubscriptionDetailPage, fetchInvoicingSubscriptionFormPage, seedInvoicingSubscriptionFormDraft, updateInvoicingSubscriptionDetail, updateInvoicingSubscriptionDetailFailure, updateInvoicingSubscriptionFormDraft, submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormSuccess, submitInvoicingSubscriptionFormFailure, resetEditInvoicingSubscriptionDetailView, initializeInvoicingSubscriptionAddress, claimInvoicingSubscriptionShippingAddress, syncInvoicingSubscriptionCoupons, fetchInvoicingSubscriptionEstimate, updateInvoicingSubscriptionEstimate, updateInvoicingSubscriptionEstimateFailure, clearInvoicingSubscriptionEstimate, } = editInvoicingSubscriptionDetailView.actions;
 export default editInvoicingSubscriptionDetailView.reducer;

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

@@ -9,6 +9,57 @@ import { getInvoicingCustomerListView } from '../invoicingCustomerListView/invoi
 import { getInvoicingFormDraftLocalData, isInvoicingFormDraftPending, } from '../invoicingFormDraft';
 import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
+const notStartedEstimateView = {
+    creditsMayChange: false,
+    fetchState: { fetchState: 'Not-Started', error: undefined },
+    nonRenewing: false,
+};
+export const toInvoicingSubscriptionEstimateView = ({ estimate, fetchState, subscriptionId }, invoicingSubscriptionID) => {
+    // A slot asked for another subscription is not this form's estimate.
+    if (subscriptionId !== invoicingSubscriptionID) {
+        return notStartedEstimateView;
+    }
+    if (estimate == null) {
+        return { ...notStartedEstimateView, fetchState };
+    }
+    const { invoice, nextInvoice, proration, reason, term } = estimate;
+    const base = {
+        fetchState,
+        nonRenewing: term?.becomesNonRenewing === true,
+        nextBillingAt: term?.nextBillingAt,
+        reason: reason !== '' ? reason : undefined,
+        termEnd: term?.currentTermEnd,
+        termStart: term?.currentTermStart,
+    };
+    if (proration?.documentType === 'invoice' && proration.invoice != null) {
+        return {
+            ...base,
+            creditsMayChange: false,
+            invoice: proration.invoice,
+            kind: 'proration_invoice',
+        };
+    }
+    if (proration?.documentType === 'credit_note') {
+        return {
+            ...base,
+            creditsMayChange: false,
+            kind: 'proration_credit',
+            storeCredit: { ...proration.net, amount: Math.abs(proration.net.amount) },
+        };
+    }
+    if (estimate.willBeInvoiced && invoice != null) {
+        return { ...base, creditsMayChange: false, invoice, kind: 'invoice_now' };
+    }
+    if (nextInvoice != null) {
+        return {
+            ...base,
+            creditsMayChange: true,
+            invoice: nextInvoice,
+            kind: 'later_invoice',
+        };
+    }
+    return { ...base, creditsMayChange: false, kind: 'reason_only' };
+};
 export const getEditInvoicingSubscriptionDetailViewState = (state, invoicingSubscriptionID) => {
     const { error, fetchState, savedSubscriptionId } = state.editInvoicingSubscriptionDetailViewState;
     const { subscriptionCommercialEditAllowedFromStatuses, subscriptionLifecycleActionOptions, subscriptionMetadataEditAllowedFromStatuses, } = getInvoicingConfigView(state);
@@ -86,6 +137,27 @@ export const getInvoicingItemsAllowedForPlan = (products, plan) => {
     }
     return products.filter((product) => product.itemID != null && allowedItemIDs.includes(product.itemID));
 };
+// Years count as months so they compare; any other unit only meets itself.
+const billingPeriodInCommonUnit = (pricePoint) => {
+    const { period, periodUnit } = pricePoint;
+    if (period == null || periodUnit == null || periodUnit === '') {
+        return undefined;
+    }
+    return periodUnit === 'year'
+        ? { count: period * 12, unit: 'month' }
+        : { count: period, unit: periodUnit };
+};
+// The add-on's period must divide the plan's (create 422s otherwise); fails open when they cannot be compared.
+export const isInvoicingAddonPeriodCompatible = (addon, plan) => {
+    const addonPeriod = billingPeriodInCommonUnit(addon);
+    const planPeriod = plan != null ? billingPeriodInCommonUnit(plan) : undefined;
+    if (addonPeriod == null ||
+        planPeriod == null ||
+        addonPeriod.unit !== planPeriod.unit) {
+        return true;
+    }
+    return addonPeriod.count > 0 && planPeriod.count % addonPeriod.count === 0;
+};
 /**
  * A price row can only be subscribed by its price code, so one without a code
  * is not an option the form can offer.
@@ -149,7 +221,7 @@ const toInvoicingCustomerOption = (customer) => ({
     value: customer.id,
 });
 export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
-    const { editDraftById, error, fetchState, newSubscriptionDraft, savedSubscriptionId, } = state.editInvoicingSubscriptionDetailViewState;
+    const { editDraftById, error, estimateState, fetchState, newSubscriptionDraft, savedSubscriptionId, } = state.editInvoicingSubscriptionDetailViewState;
     const mode = invoicingSubscriptionID != null ? 'edit' : 'create';
     const subscription = invoicingSubscriptionID != null
         ? getInvoicingSubscriptionById(state.invoicingSubscriptionState, invoicingSubscriptionID)
@@ -174,7 +246,12 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
     // pickers offer only those: subscription create rejects the rest with a 422,
     // and an option that can only fail is not a choice. The applicability rides
     // on the price rows already in the store, so this is a join, not a refetch.
-    const allowedCatalogPrices = getInvoicingItemsAllowedForPlan(getInvoicingCatalogPrices(catalogListView.products), planPrices.find((plan) => plan.priceCode === localData.planPriceCode)).filter(hasInvoicingPriceCode);
+    const selectedPlanPrice = planPrices.find((plan) => plan.priceCode === localData.planPriceCode);
+    // Add-ons also have to bill on the plan's cadence; charges are one-time.
+    const allowedCatalogPrices = getInvoicingItemsAllowedForPlan(getInvoicingCatalogPrices(catalogListView.products), selectedPlanPrice)
+        .filter(hasInvoicingPriceCode)
+        .filter((product) => product.itemType !== 'addon' ||
+        isInvoicingAddonPeriodCompatible(product, selectedPlanPrice));
     const catalogItemOptionsOfType = (itemType) => allowedCatalogPrices
         .filter((product) => product.itemType === itemType)
         .map(toInvoicingCatalogItemOption);
@@ -198,6 +275,7 @@ export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID)
         subscriptionMetadataEditAllowedFromStatuses: configState.subscriptionMetadataEditAllowedFromStatuses,
         recordState,
         isFormLoading: isInvoicingFormDraftPending(editDraftById, invoicingSubscriptionID),
+        estimate: toInvoicingSubscriptionEstimateView(estimateState, invoicingSubscriptionID),
         fieldHelp: invoicingFieldHelpForGroup(state, 'subscription'),
         addons: catalogItemOptionsOfType('addon'),
         charges: catalogItemOptionsOfType('charge'),

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

@@ -0,0 +1,49 @@
+import { of } from 'rxjs';
+import { catchError, filter, map, switchMap } from 'rxjs/operators';
+import { getInvoicingCouponByCode } from '../../../entity/invoicing/coupon/couponSelector';
+import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { mapInvoicingSubscriptionEstimatePayloadToState, } from './editInvoicingSubscriptionDetailViewPayload';
+import { fetchInvoicingSubscriptionEstimate, updateInvoicingSubscriptionEstimate, updateInvoicingSubscriptionEstimateFailure, } from './editInvoicingSubscriptionDetailViewReducer';
+import { invoicingSubscriptionSaveRequest, isInvoicingSubscriptionCouponChanged, } from './saveInvoicingSubscriptionEpic';
+// Posts Save's exact body; a changed coupon rides along as `coupons` (Save syncs it after the PUT).
+export const fetchInvoicingSubscriptionEstimateEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSubscriptionEstimate.match), switchMap((action) => {
+    const { id } = action.payload;
+    const { data, localData, previousCouponCode } = invoicingSubscriptionSaveRequest(state$.value, id);
+    const couponCode = localData.couponId;
+    const coupon = getInvoicingCouponByCode(state$.value.invoicingCouponState, couponCode);
+    const body = id != null &&
+        isInvoicingSubscriptionCouponChanged(previousCouponCode, couponCode)
+        ? {
+            ...data,
+            coupons: couponCode !== ''
+                ? [
+                    {
+                        applied_count: 0,
+                        apply_till: null,
+                        coupon_code: couponCode,
+                        coupon_id: coupon?.id ?? couponCode,
+                    },
+                ]
+                : [],
+        }
+        : data;
+    const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`;
+    const url = id != null
+        ? `${baseUrl}/${encodeURIComponent(id)}/estimate`
+        : `${baseUrl}/estimate`;
+    return zeniAPI
+        .postAndGetJSON(url, body)
+        .pipe(map((response) => isSuccessResponse(response) && response.data != null
+        ? updateInvoicingSubscriptionEstimate({
+            estimate: mapInvoicingSubscriptionEstimatePayloadToState(response.data),
+            id,
+        })
+        : updateInvoicingSubscriptionEstimateFailure({
+            id,
+            status: response.status,
+        })), catchError((error) => of(updateInvoicingSubscriptionEstimateFailure({
+        id,
+        status: createZeniAPIStatus('Unexpected Error', 'Subscription estimate REST API call errored out ' +
+            JSON.stringify(error)),
+    }))));
+}));

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

@@ -7,14 +7,17 @@ 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';
 import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE } from './invoicingSubscriptionFormConfig';
 const normalizeCouponCode = (value) => (value ?? '').trim().toUpperCase();
-export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(submitInvoicingSubscriptionForm.match), mergeMap((action) => {
-    const { id } = action.payload;
-    const rootState = state$.value;
+export const isInvoicingSubscriptionCouponChanged = (previousCouponCode, nextCouponCode) => normalizeCouponCode(previousCouponCode) !==
+    normalizeCouponCode(nextCouponCode);
+// The draft a save reads and the body it sends; the estimate previews the same body.
+export const invoicingSubscriptionSaveRequest = (rootState, id) => {
     const viewState = rootState.editInvoicingSubscriptionDetailViewState;
     const localData = (id != null
         ? viewState.editDraftById[id]?.localData
@@ -23,18 +26,23 @@ export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => acti
     // object in the payload (same pattern as the customer save flow).
     const shippingAddress = rootState.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
     const data = localDataToSaveInvoicingSubscriptionPayload(localData, shippingAddress);
-    // Coupons are synced via apply/remove-coupon after PUT (not via coupon_ids).
     if (id != null) {
         delete data.coupon_ids;
     }
+    const savedCoupon = id != null
+        ? rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
+            ?.coupons?.[0]
+        : undefined;
+    return {
+        data,
+        localData,
+        previousCouponCode: savedCoupon?.couponCode ?? savedCoupon?.couponID ?? '',
+    };
+};
+export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(submitInvoicingSubscriptionForm.match), mergeMap((action) => {
+    const { id } = action.payload;
+    const { data, localData, previousCouponCode } = invoicingSubscriptionSaveRequest(state$.value, id);
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
-    const previousCouponCode = id != null
-        ? (rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
-            ?.coupons?.[0]?.couponCode ??
-            rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
-                ?.coupons?.[0]?.couponID ??
-            '')
-        : '';
     const request$ = id != null
         ? zeniAPI.putAndGetJSON(`${baseUrl}/subscriptions/${encodeURIComponent(id)}`, { ...data })
         : zeniAPI.postAndGetJSON(`${baseUrl}/subscriptions`, { ...data });
@@ -52,8 +60,7 @@ export const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => acti
         }
         const saved = response.data;
         const couponChanged = id != null &&
-            normalizeCouponCode(previousCouponCode) !==
-                normalizeCouponCode(localData.couponId);
+            isInvoicingSubscriptionCouponChanged(previousCouponCode, localData.couponId);
         // Edit + coupon change: merge the saved subscription, then hand the
         // coupon attach/detach to syncInvoicingSubscriptionCouponsEpic, which
         // finishes the flow (form success on both calls ok, form failure
@@ -86,7 +93,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,