@zeniai/client-epic-state 5.1.49 → 5.1.50-betaAK0

package/lib/esm/view/invoicing/editInvoicingCouponDetailView/saveInvoicingCouponEpic.js

@@ -0,0 +1,36 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { updateInvoicingCoupons } from '../../../entity/invoicing/coupon/couponReducer';
+import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { localDataToSaveInvoicingCouponPayload, } from './editInvoicingCouponDetailViewPayload';
+import { saveInvoicingCoupon, submitInvoicingCouponForm, submitInvoicingCouponFormFailure, submitInvoicingCouponFormSuccess, } from './editInvoicingCouponDetailViewReducer';
+export const saveInvoicingCouponEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter((action) => submitInvoicingCouponForm.match(action) ||
+    saveInvoicingCoupon.match(action)), mergeMap((action) => {
+    const { id } = action.payload;
+    // Draft-based create/edit form vs. detail-page inline edit (raw data).
+    const data = saveInvoicingCoupon.match(action)
+        ? action.payload.data
+        : (() => {
+            const viewState = state$.value.editInvoicingCouponDetailViewState;
+            const localData = (id != null
+                ? viewState.editDraftById[id]
+                : viewState.newCouponDraft) ?? viewState.newCouponDraft;
+            return localDataToSaveInvoicingCouponPayload(localData, id == null);
+        })();
+    const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
+    const path = id != null
+        ? `${baseUrl}/discounts/${encodeURIComponent(id)}`
+        : `${baseUrl}/discounts`;
+    const request$ = id != null
+        ? zeniAPI.putAndGetJSON(path, { ...data })
+        : zeniAPI.postAndGetJSON(path, { ...data });
+    return request$.pipe(mergeMap((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            return [
+                updateInvoicingCoupons([response.data], 'merge'),
+                submitInvoicingCouponFormSuccess({ couponId: response.data.id }),
+            ];
+        }
+        return of(submitInvoicingCouponFormFailure(response.status));
+    }), catchError((error) => of(submitInvoicingCouponFormFailure(createZeniAPIStatus('Unexpected Error', 'Save coupon REST API call errored out ' + JSON.stringify(error))))));
+}));

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

@@ -0,0 +1,31 @@
+import { toAddressUpdatableInfoPayload } from '../../addressView/addressViewPayload';
+const trimOrUndefined = (value) => value.trim() !== '' ? value.trim() : undefined;
+/**
+ * Build the create/update customer request body from the form draft. The
+ * billing address is sent as an object (captured via the shared Address
+ * screen); the backend creates it and returns its id — same pattern as the
+ * vendor save flow.
+ */
+export const localDataToSaveInvoicingCustomerPayload = (localData, billingAddress) => {
+    const firstName = trimOrUndefined(localData.firstName);
+    const lastName = trimOrUndefined(localData.lastName);
+    const company = trimOrUndefined(localData.company);
+    const netTerm = localData.netTermDays.trim();
+    return {
+        auto_collection: localData.autoCollection ? 'on' : 'off',
+        company,
+        customer_type: localData.customerType,
+        email: trimOrUndefined(localData.email),
+        first_name: firstName,
+        invoice_notes: trimOrUndefined(localData.invoiceNotes),
+        last_name: lastName,
+        phone: trimOrUndefined(localData.phone),
+        preferred_currency_code: localData.preferredCurrencyCode,
+        taxability: localData.taxability,
+        vat_number: trimOrUndefined(localData.vatNumber),
+        ...(netTerm !== '' ? { net_term_days: Number(netTerm) } : {}),
+        ...(billingAddress != null
+            ? { billing_address: toAddressUpdatableInfoPayload(billingAddress) }
+            : {}),
+    };
+};

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

@@ -0,0 +1,62 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initialInvoicingCustomerFormLocalData } from './invoicingCustomerFormConfig';
+export const initialState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    editDraftById: {},
+    newCustomerDraft: { ...initialInvoicingCustomerFormLocalData },
+    savedCustomerId: undefined,
+    hasValidState() {
+        return this.fetchState === 'Completed';
+    },
+};
+const editInvoicingCustomerDetailView = createSlice({
+    name: 'editInvoicingCustomerDetailView',
+    initialState,
+    reducers: {
+        updateInvoicingCustomerFormDraft(draft, action) {
+            const { id, localData } = action.payload;
+            if (id != null) {
+                draft.editDraftById[id] = localData;
+            }
+            else {
+                draft.newCustomerDraft = localData;
+            }
+        },
+        submitInvoicingCustomerForm: {
+            reducer(draft) {
+                draft.fetchState = 'In-Progress';
+                draft.error = undefined;
+                draft.savedCustomerId = undefined;
+            },
+            prepare(payload) {
+                return { payload };
+            },
+        },
+        submitInvoicingCustomerFormSuccess(draft, action) {
+            draft.fetchState = 'Completed';
+            draft.error = undefined;
+            draft.savedCustomerId = action.payload.customerId;
+        },
+        submitInvoicingCustomerFormFailure(draft, action) {
+            draft.fetchState = 'Error';
+            draft.error = action.payload;
+        },
+        resetEditInvoicingCustomerDetailView(draft) {
+            draft.fetchState = 'Not-Started';
+            draft.error = undefined;
+            draft.savedCustomerId = undefined;
+            draft.editDraftById = {};
+            draft.newCustomerDraft = { ...initialInvoicingCustomerFormLocalData };
+        },
+        // Trigger only — handled by initializeInvoicingCustomerAddressEpic.
+        initializeInvoicingCustomerAddress: {
+            reducer() { },
+            prepare(payload) {
+                return { payload };
+            },
+        },
+    },
+});
+export const { updateInvoicingCustomerFormDraft, submitInvoicingCustomerForm, submitInvoicingCustomerFormSuccess, submitInvoicingCustomerFormFailure, resetEditInvoicingCustomerDetailView, initializeInvoicingCustomerAddress, } = editInvoicingCustomerDetailView.actions;
+export default editInvoicingCustomerDetailView.reducer;

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

@@ -0,0 +1,42 @@
+import { getInvoicingCustomerById } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
+import { getFormattedAddress } from '../../addressView/addressViewSelector';
+import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE, INVOICING_CUSTOMER_TYPE_VALUES, INVOICING_NET_TERM_DAY_VALUES, INVOICING_TAXABILITY_VALUES, entityToInvoicingCustomerFormLocalData, } from './invoicingCustomerFormConfig';
+/**
+ * Bundled view for the customer create/edit form. Exposes the draft `localData`
+ * (seeded from the existing customer entity in edit mode until the user edits),
+ * the canonical option value sets (labels resolved in web-components), the save
+ * fetch state/error, and the id of the customer last saved — so the form screen
+ * depends on this single selector.
+ */
+export const getInvoicingCustomerFormView = (state, invoicingCustomerID) => {
+    const { editDraftById, error, fetchState, newCustomerDraft, savedCustomerId } = state.editInvoicingCustomerDetailViewState;
+    const mode = invoicingCustomerID != null ? 'edit' : 'create';
+    const customer = invoicingCustomerID != null
+        ? getInvoicingCustomerById(state.invoicingCustomerState, invoicingCustomerID)
+        : undefined;
+    const localData = invoicingCustomerID != null
+        ? (editDraftById[invoicingCustomerID] ??
+            entityToInvoicingCustomerFormLocalData(customer))
+        : newCustomerDraft;
+    // Billing address is captured via the shared Address screen and seeded there
+    // (from the address entity) on detail load, so the formatted label comes from
+    // that draft via the shared `getFormattedAddress`.
+    const newAddress = state.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE];
+    const billingAddressId = newAddress?.newAddressId ?? customer?.billingAddressId;
+    const billingAddressLabel = newAddress?.addressToCreate != null
+        ? getFormattedAddress(newAddress.addressToCreate)
+        : undefined;
+    return {
+        customerTypeValues: [...INVOICING_CUSTOMER_TYPE_VALUES],
+        localData,
+        mode,
+        netTermDayValues: [...INVOICING_NET_TERM_DAY_VALUES],
+        taxabilityValues: [...INVOICING_TAXABILITY_VALUES],
+        billingAddressId,
+        billingAddressLabel,
+        savedCustomerId,
+        fetchState,
+        error,
+        version: 1.0,
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import { EMPTY, of } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { getAddressByAddressId } from '../../../entity/address/addressSelector';
+import { getInvoicingCustomerById } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerSelector';
+import { newAddressInLocalStore } from '../../addressView/addressViewReducer';
+import { updateInvoicingCustomerDetail } from '../invoicingCustomerDetailView/invoicingCustomerDetailViewReducer';
+import { initializeInvoicingCustomerAddress } from './editInvoicingCustomerDetailViewReducer';
+import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE } from './invoicingCustomerFormConfig';
+/**
+ * Seed the shared Address screen with an existing customer's saved billing
+ * address (looked up in the address entity store by `billingAddressId`). Runs
+ * both when the customer detail loads and on an explicit initialize trigger.
+ * Skips when an in-progress draft already exists, so an address the user just
+ * entered survives navigating between the form and the Address screen. Mirrors
+ * `initializeVendorAddressEpic`.
+ */
+export const initializeInvoicingCustomerAddressEpic = (actions$, state$) => actions$.pipe(filter((action) => initializeInvoicingCustomerAddress.match(action) ||
+    updateInvoicingCustomerDetail.match(action)), mergeMap((action) => {
+    const { id } = action.payload;
+    const rootState = state$.value;
+    const existingDraft = rootState.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE]?.addressToCreate;
+    if (existingDraft != null || id == null) {
+        return EMPTY;
+    }
+    const customer = getInvoicingCustomerById(rootState.invoicingCustomerState, id);
+    const address = customer?.billingAddressId != null
+        ? getAddressByAddressId(rootState.addressState, customer.billingAddressId)
+        : undefined;
+    return address != null
+        ? of(newAddressInLocalStore({
+            addressType: INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE,
+            addressToCreate: address,
+        }))
+        : EMPTY;
+}));

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

@@ -0,0 +1,53 @@
+/** `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: '',
+    customerType: 'business',
+    email: '',
+    firstName: '',
+    invoiceNotes: '',
+    lastName: '',
+    netTermDays: '30',
+    phone: '',
+    preferredCurrencyCode: 'USD',
+    taxability: 'taxable',
+    vatNumber: '',
+};
+/** Seed the form draft from an existing customer entity (edit mode). */
+export const entityToInvoicingCustomerFormLocalData = (customer) => {
+    if (customer == null) {
+        return { ...initialInvoicingCustomerFormLocalData };
+    }
+    return {
+        autoCollection: (customer.autoCollection ?? 'on') === 'on',
+        company: customer.company ?? '',
+        customerType: customer.customerType ?? 'business',
+        email: customer.email ?? '',
+        firstName: customer.firstName ?? '',
+        invoiceNotes: customer.invoiceNotes ?? '',
+        lastName: customer.lastName ?? '',
+        netTermDays: customer.netTermDays != null ? String(customer.netTermDays) : '30',
+        phone: customer.phone ?? '',
+        preferredCurrencyCode: customer.preferredCurrencyCode ?? 'USD',
+        taxability: customer.taxability ?? 'taxable',
+        vatNumber: customer.vatNumber ?? '',
+    };
+};

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

@@ -0,0 +1,38 @@
+import { of } from 'rxjs';
+import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { updateInvoicingCustomers } from '../../../entity/invoicing/invoicingCustomer/invoicingCustomerReducer';
+import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { resetNewAddressDataInLocalStore } from '../../addressView/addressViewReducer';
+import { localDataToSaveInvoicingCustomerPayload, } from './editInvoicingCustomerDetailViewPayload';
+import { INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE } from './invoicingCustomerFormConfig';
+import { submitInvoicingCustomerForm, submitInvoicingCustomerFormFailure, submitInvoicingCustomerFormSuccess, } from './editInvoicingCustomerDetailViewReducer';
+export const saveInvoicingCustomerEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(submitInvoicingCustomerForm.match), mergeMap((action) => {
+    const { id } = action.payload;
+    const rootState = state$.value;
+    const viewState = rootState.editInvoicingCustomerDetailViewState;
+    const localData = (id != null ? viewState.editDraftById[id] : viewState.newCustomerDraft) ??
+        viewState.newCustomerDraft;
+    // Billing address captured via the shared Address screen is sent as an
+    // object in the payload; the backend creates it and returns its id
+    // (same pattern as the vendor save flow).
+    const billingAddress = rootState.addressViewState.newAddressState?.[INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE]?.addressToCreate;
+    const data = localDataToSaveInvoicingCustomerPayload(localData, billingAddress);
+    const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
+    const request$ = id != null
+        ? zeniAPI.putAndGetJSON(`${baseUrl}/customers/${encodeURIComponent(id)}`, { ...data })
+        : zeniAPI.postAndGetJSON(`${baseUrl}/customers`, { ...data });
+    return request$.pipe(mergeMap((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            return [
+                updateInvoicingCustomers([response.data], 'merge'),
+                submitInvoicingCustomerFormSuccess({
+                    customerId: response.data.id,
+                }),
+                // Clear the stashed address so the next customer starts fresh.
+                resetNewAddressDataInLocalStore(INVOICING_CUSTOMER_BILLING_ADDRESS_TYPE),
+            ];
+        }
+        return of(submitInvoicingCustomerFormFailure(response.status));
+    }), catchError((error) => of(submitInvoicingCustomerFormFailure(createZeniAPIStatus('Unexpected Error', 'Save customer REST API call errored out ' +
+        JSON.stringify(error))))));
+}));

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

@@ -0,0 +1,46 @@
+import { addressUpdatableInfoToInvoicingShippingPayload, billingFrequencyToPeriod, } from './invoicingSubscriptionFormConfig';
+/**
+ * Build the create/update subscription request body from the form draft. The
+ * shipping address is sent as an object (captured via the shared Address
+ * screen); the backend persists it — same pattern as the customer save flow.
+ */
+export const localDataToSaveInvoicingSubscriptionPayload = (localData, shippingAddress) => {
+    const frequency = billingFrequencyToPeriod(localData.billingFrequency);
+    const items = [
+        { item_price_id: localData.planId, item_type: 'plan', quantity: 1 },
+        ...localData.addonIds.map((id) => ({
+            item_price_id: id,
+            item_type: 'addon',
+            quantity: 1,
+        })),
+        ...localData.chargeIds.map((id) => ({
+            item_price_id: id,
+            item_type: 'charge',
+            quantity: 1,
+        })),
+    ];
+    const setupFee = localData.setupFee.trim();
+    const parsedSetupFee = Number.parseFloat(setupFee);
+    const poNumber = localData.poNumber.trim();
+    const trialEnd = localData.trialEnd.trim();
+    return {
+        auto_collection: localData.autoCollection ? 'on' : 'off',
+        billing_period: frequency.period,
+        billing_period_unit: frequency.unit,
+        currency_code: localData.preferredCurrencyCode,
+        customer_id: localData.customerId,
+        plan_id: localData.planId,
+        subscription_items: items,
+        ...(setupFee !== '' && !Number.isNaN(parsedSetupFee)
+            ? { setup_fee: Math.round(parsedSetupFee * 100) }
+            : {}),
+        ...(poNumber !== '' ? { po_number: poNumber } : {}),
+        ...(trialEnd !== '' ? { trial_end: trialEnd } : {}),
+        ...(localData.couponId !== '' ? { coupon_ids: [localData.couponId] } : {}),
+        ...(shippingAddress != null
+            ? {
+                shipping_address: addressUpdatableInfoToInvoicingShippingPayload(shippingAddress),
+            }
+            : {}),
+    };
+};

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

@@ -0,0 +1,73 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initialInvoicingSubscriptionFormLocalData } from './invoicingSubscriptionFormConfig';
+export const initialState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    editDraftById: {},
+    newSubscriptionDraft: { ...initialInvoicingSubscriptionFormLocalData },
+    savedSubscriptionId: undefined,
+    hasValidState() {
+        return this.fetchState === 'Completed';
+    },
+};
+const editInvoicingSubscriptionDetailView = createSlice({
+    name: 'editInvoicingSubscriptionDetailView',
+    initialState,
+    reducers: {
+        fetchInvoicingSubscriptionFormPage: {
+            reducer() {
+                // No state mutation; the aggregator epic fans out the option-list
+                // and subscription-detail fetches in response to this action.
+            },
+            prepare(payload) {
+                return { payload: { subscriptionId: payload.subscriptionId } };
+            },
+        },
+        updateInvoicingSubscriptionFormDraft(draft, action) {
+            const { id, localData } = action.payload;
+            if (id != null) {
+                draft.editDraftById[id] = localData;
+            }
+            else {
+                draft.newSubscriptionDraft = localData;
+            }
+        },
+        submitInvoicingSubscriptionForm: {
+            reducer(draft) {
+                draft.fetchState = 'In-Progress';
+                draft.error = undefined;
+                draft.savedSubscriptionId = undefined;
+            },
+            prepare(payload) {
+                return { payload };
+            },
+        },
+        submitInvoicingSubscriptionFormSuccess(draft, action) {
+            draft.fetchState = 'Completed';
+            draft.error = undefined;
+            draft.savedSubscriptionId = action.payload.subscriptionId;
+        },
+        submitInvoicingSubscriptionFormFailure(draft, action) {
+            draft.fetchState = 'Error';
+            draft.error = action.payload;
+        },
+        resetEditInvoicingSubscriptionDetailView(draft) {
+            draft.fetchState = 'Not-Started';
+            draft.error = undefined;
+            draft.savedSubscriptionId = undefined;
+            draft.editDraftById = {};
+            draft.newSubscriptionDraft = {
+                ...initialInvoicingSubscriptionFormLocalData,
+            };
+        },
+        // Trigger only — handled by initializeInvoicingSubscriptionAddressEpic.
+        initializeInvoicingSubscriptionAddress: {
+            reducer() { },
+            prepare(payload) {
+                return { payload };
+            },
+        },
+    },
+});
+export const { fetchInvoicingSubscriptionFormPage, updateInvoicingSubscriptionFormDraft, submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormSuccess, submitInvoicingSubscriptionFormFailure, resetEditInvoicingSubscriptionDetailView, initializeInvoicingSubscriptionAddress, } = editInvoicingSubscriptionDetailView.actions;
+export default editInvoicingSubscriptionDetailView.reducer;

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

@@ -0,0 +1,52 @@
+import { getInvoicingSubscriptionById } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
+import { getFormattedAddress } from '../../addressView/addressViewSelector';
+import { getInvoicingCouponListItems } from '../couponView/couponViewSelector';
+import { getInvoicingCatalogListView } from '../invoicingCatalogListView/invoicingCatalogListViewSelector';
+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;
+    return {
+        subscription: invoicingSubscriptionID != null
+            ? getInvoicingSubscriptionById(state.invoicingSubscriptionState, invoicingSubscriptionID)
+            : undefined,
+        savedSubscriptionId,
+        fetchState,
+        error,
+        version: 1.0,
+    };
+};
+export const getInvoicingSubscriptionFormView = (state, invoicingSubscriptionID) => {
+    const { editDraftById, error, fetchState, newSubscriptionDraft, savedSubscriptionId } = state.editInvoicingSubscriptionDetailViewState;
+    const mode = invoicingSubscriptionID != null ? 'edit' : 'create';
+    const subscription = invoicingSubscriptionID != null
+        ? getInvoicingSubscriptionById(state.invoicingSubscriptionState, invoicingSubscriptionID)
+        : undefined;
+    const localData = invoicingSubscriptionID != null
+        ? (editDraftById[invoicingSubscriptionID] ??
+            entityToInvoicingSubscriptionFormLocalData(subscription))
+        : newSubscriptionDraft;
+    // Shipping address is captured via the shared Address screen and seeded there
+    // (from the subscription's inline shipping address) on detail load, so the
+    // formatted label comes from that draft via the shared `getFormattedAddress`.
+    const newAddress = state.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE];
+    const shippingAddressLabel = newAddress?.addressToCreate != null
+        ? getFormattedAddress(newAddress.addressToCreate)
+        : undefined;
+    const catalogListView = getInvoicingCatalogListView(state);
+    return {
+        billingFrequencyValues: [...INVOICING_SUBSCRIPTION_BILLING_FREQUENCY_VALUES],
+        coupons: getInvoicingCouponListItems(state),
+        customers: getInvoicingCustomerListView(state).customers,
+        localData,
+        mode,
+        plans: catalogListView.plans,
+        products: catalogListView.products,
+        savedSubscriptionId,
+        shippingAddressLabel,
+        subscription,
+        fetchState,
+        error,
+        version: 1.0,
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,29 @@
+import { concat, from } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchInvoicingCouponList } from '../couponView/couponViewReducer';
+import { fetchInvoicingCatalogPlanList } from '../invoicingCatalogListView/invoicingCatalogListViewReducer';
+import { fetchInvoicingCustomerList } from '../invoicingCustomerListView/invoicingCustomerListViewReducer';
+import { fetchInvoicingSubscriptionDetail } from '../invoicingSubscriptionDetailView/invoicingSubscriptionDetailViewReducer';
+import { fetchInvoicingSubscriptionFormPage } from './editInvoicingSubscriptionDetailViewReducer';
+/**
+ * Orchestrates the subscription create/edit form: on
+ * `fetchInvoicingSubscriptionFormPage`, fans out the option-list fetches
+ * (customers, plans, coupons) the form's dropdowns need, plus the subscription
+ * detail fetch when editing an existing subscription. Blind fan-out — the form
+ * always refreshes its option lists, matching the prior screen behavior.
+ */
+export const fetchInvoicingSubscriptionFormPageEpic = (actions$) => actions$.pipe(filter(fetchInvoicingSubscriptionFormPage.match), mergeMap((action) => {
+    const { subscriptionId } = action.payload;
+    const pageActions = [
+        fetchInvoicingCustomerList({ filters: {}, keepExistingListItems: false }),
+        fetchInvoicingCatalogPlanList({
+            filters: {},
+            keepExistingListItems: false,
+        }),
+        fetchInvoicingCouponList({ filters: {}, keepExistingListItems: false }),
+    ];
+    if (subscriptionId != null) {
+        pageActions.push(fetchInvoicingSubscriptionDetail({ id: subscriptionId }));
+    }
+    return concat(from(pageActions));
+}));

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

@@ -0,0 +1,31 @@
+import { EMPTY, of } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { getInvoicingSubscriptionById } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
+import { newAddressInLocalStore } from '../../addressView/addressViewReducer';
+import { updateInvoicingSubscriptionDetail } from '../invoicingSubscriptionDetailView/invoicingSubscriptionDetailViewReducer';
+import { initializeInvoicingSubscriptionAddress } from './editInvoicingSubscriptionDetailViewReducer';
+import { INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE, invoicingShippingAddressToAddressUpdatableInfo, } from './invoicingSubscriptionFormConfig';
+/**
+ * Seed the shared Address screen with an existing subscription's saved shipping
+ * address (carried inline on the subscription entity as `shippingAddress`).
+ * Runs both when the subscription detail loads and on an explicit initialize
+ * trigger. Skips when an in-progress draft already exists, so an address the
+ * user just entered survives navigating between the form and the Address screen.
+ * Mirrors `initializeInvoicingCustomerAddressEpic`.
+ */
+export const initializeInvoicingSubscriptionAddressEpic = (actions$, state$) => actions$.pipe(filter((action) => initializeInvoicingSubscriptionAddress.match(action) ||
+    updateInvoicingSubscriptionDetail.match(action)), mergeMap((action) => {
+    const { id } = action.payload;
+    const rootState = state$.value;
+    const existingDraft = rootState.addressViewState.newAddressState?.[INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
+    if (existingDraft != null || id == null) {
+        return EMPTY;
+    }
+    const subscription = getInvoicingSubscriptionById(rootState.invoicingSubscriptionState, id);
+    return subscription?.shippingAddress != null
+        ? of(newAddressInLocalStore({
+            addressType: INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE,
+            addressToCreate: invoicingShippingAddressToAddressUpdatableInfo(subscription.shippingAddress),
+        }))
+        : EMPTY;
+}));

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

@@ -0,0 +1,95 @@
+/** `AddressType` key used when the subscription form opens the shared Address screen. */
+export const INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE = 'invoicing_subscription_shipping_address';
+/**
+ * Canonical billing-frequency value set for the subscription form. CES owns the
+ * values (and their period/unit mapping); web-components maps each value to a
+ * localized label (same split as the customer form's value sets).
+ */
+export const INVOICING_SUBSCRIPTION_BILLING_FREQUENCY_VALUES = [
+    'weekly',
+    'monthly',
+    'quarterly',
+    'half_yearly',
+    'yearly',
+];
+const BILLING_FREQUENCY_TO_PERIOD = {
+    weekly: { period: 1, unit: 'week' },
+    monthly: { period: 1, unit: 'month' },
+    quarterly: { period: 3, unit: 'month' },
+    half_yearly: { period: 6, unit: 'month' },
+    yearly: { period: 1, unit: 'year' },
+};
+/** Map a billing-frequency value to its API `billing_period` / `billing_period_unit`. */
+export const billingFrequencyToPeriod = (value) => BILLING_FREQUENCY_TO_PERIOD[value] ?? BILLING_FREQUENCY_TO_PERIOD.monthly;
+/** Map an existing subscription's period/unit back to a billing-frequency value. */
+export const periodToBillingFrequency = (period, unit) => {
+    const match = INVOICING_SUBSCRIPTION_BILLING_FREQUENCY_VALUES.find((value) => {
+        const mapped = BILLING_FREQUENCY_TO_PERIOD[value];
+        return mapped.period === period && mapped.unit === unit;
+    });
+    return match ?? 'monthly';
+};
+const subscriptionItemIds = (subscription, itemType) => subscription?.subscriptionItems
+    ?.filter((item) => item.itemType === itemType)
+    .map((item) => item.itemPriceID ?? item.catalogItemID)
+    .filter((id) => id != null && id !== '') ?? [];
+export const initialInvoicingSubscriptionFormLocalData = {
+    addonIds: [],
+    autoCollection: true,
+    billingFrequency: 'monthly',
+    chargeIds: [],
+    couponId: '',
+    customerId: '',
+    planId: '',
+    poNumber: '',
+    preferredCurrencyCode: 'USD',
+    setupFee: '',
+    trialEnd: '',
+};
+/** Seed the form draft from an existing subscription entity (edit mode). */
+export const entityToInvoicingSubscriptionFormLocalData = (subscription) => {
+    if (subscription == null) {
+        return { ...initialInvoicingSubscriptionFormLocalData };
+    }
+    return {
+        addonIds: subscriptionItemIds(subscription, 'addon'),
+        autoCollection: (subscription.autoCollection ?? 'on') === 'on',
+        billingFrequency: periodToBillingFrequency(subscription.billingPeriod, subscription.billingPeriodUnit),
+        chargeIds: subscriptionItemIds(subscription, 'charge'),
+        couponId: subscription.coupons?.[0]?.couponID ?? '',
+        customerId: subscription.customerID ?? '',
+        planId: subscription.planID ?? '',
+        poNumber: subscription.poNumber ?? '',
+        preferredCurrencyCode: subscription.currencyCode ?? 'USD',
+        setupFee: '',
+        trialEnd: subscription.trialEnd != null
+            ? subscription.trialEnd.format('YYYY-MM-DD')
+            : '',
+    };
+};
+const trimOrUndefined = (value) => value != null && value.trim() !== '' ? value.trim() : undefined;
+/**
+ * Convert the shared Address screen's `AddressUpdatableInfo` into the invoicing
+ * shipping-address payload shape the subscription API expects
+ * (`line1`/`line2`/`city`/`state_code`/`zip`/`country`).
+ */
+export const addressUpdatableInfoToInvoicingShippingPayload = (info) => ({
+    city: trimOrUndefined(info.city),
+    country: trimOrUndefined(info.country),
+    line1: trimOrUndefined(info.street?.[0]),
+    line2: trimOrUndefined(info.street?.[1]),
+    state_code: trimOrUndefined(info.state),
+    zip: trimOrUndefined(info.postalCode),
+});
+/**
+ * Convert an existing subscription's shipping-address payload into the shared
+ * Address screen's `AddressUpdatableInfo` (used to seed the screen on edit).
+ */
+export const invoicingShippingAddressToAddressUpdatableInfo = (address) => ({
+    city: address.city ?? '',
+    country: address.country ?? '',
+    postalCode: address.zip ?? '',
+    state: address.state_code ?? '',
+    street: [address.line1, address.line2].filter((part) => part != null && part !== ''),
+    ...(address.country != null ? { countryCode: address.country } : {}),
+});