@zeniai/client-epic-state 5.2.11 → 5.2.13-beta0ND

package/lib/view/invoicing/invoicingQboView/invoicingQboViewSelector.d.ts

@@ -1,7 +1,8 @@
 import { NestedAccountHierarchyForReport } from '../../../commonStateTypes/accountView/nestedAccountID';
 import { NestedClassHierarchyForReport } from '../../../commonStateTypes/classesView/nestedClassID';
 import { FetchStateAndError } from '../../../commonStateTypes/common';
-import { AccountType } from '../../../entity/account/accountState';
+import { AccountBase, AccountType } from '../../../entity/account/accountState';
+import { ClassBase } from '../../../entity/class/classState';
 import { RootState } from '../../../rootStateTypes';
 import { InvoicingQboConnection, InvoicingQboSyncHealth } from './invoicingQboViewPayload';
 export declare const INVOICING_ACCOUNT_LIST_KEY: "accountList";
@@ -20,6 +21,14 @@ export declare const getInvoicingQboConnectionFetchState: (state: RootState) =>
  * "income accounts" rather than repeating the accounting service's vocabulary.
  */
 export declare const INVOICING_INCOME_ACCOUNT_TYPES: readonly AccountType[];
+/**
+ * The account behind a picker value. The pickers submit the QuickBooks id, so
+ * that is what callers hold; the payload builders need the whole entity to send
+ * `toAccountPayload`, which is why the lookup lives here next to the options.
+ */
+export declare const invoicingQboAccountByQboId: (state: RootState, qboId: string | undefined) => AccountBase | undefined;
+/** The class behind a picker value, for the same reason as the account above. */
+export declare const invoicingQboClassByQboId: (state: RootState, qboId: string | undefined) => ClassBase | undefined;
 /** An account or class as the invoicing pickers render and submit it. */
 export interface InvoicingAccountingOption {
     id: string;

package/lib/view/invoicing/invoicingQboView/invoicingQboViewSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInvoicingQboView = exports.invoicingAccountHierarchyForTypes = exports.invoicingAccountsForQboAccountTypes = exports.INVOICING_INCOME_ACCOUNT_TYPES = exports.getInvoicingQboConnectionFetchState = exports.isInvoicingAccountingPickerDataLoading = exports.isInvoicingQboConnected = exports.INVOICING_ACCOUNT_LIST_KEY = void 0;
+exports.getInvoicingQboView = exports.invoicingAccountHierarchyForTypes = exports.invoicingAccountsForQboAccountTypes = exports.invoicingQboClassByQboId = exports.invoicingQboAccountByQboId = exports.INVOICING_INCOME_ACCOUNT_TYPES = exports.getInvoicingQboConnectionFetchState = exports.isInvoicingAccountingPickerDataLoading = exports.isInvoicingQboConnected = exports.INVOICING_ACCOUNT_LIST_KEY = void 0;
 const accountListSelector_1 = require("../../accountList/accountListSelector");
 const classListSelector_1 = require("../../classList/classListSelector");
 // The shared bucket, fetched with the same arguments as the other consumers so
@@ -43,6 +43,48 @@ exports.INVOICING_INCOME_ACCOUNT_TYPES = [
     'income',
     'other_income',
 ];
+/**
+ * The account behind a picker value. The pickers submit the QuickBooks id, so
+ * that is what callers hold; the payload builders need the whole entity to send
+ * `toAccountPayload`, which is why the lookup lives here next to the options.
+ */
+const invoicingQboAccountByQboId = (state, qboId) => {
+    if (qboId == null || qboId === '') {
+        return undefined;
+    }
+    // `getAccountList` throws when a listed id is missing from the entity slice.
+    // That is survivable when looking one account up — the caller falls back to
+    // the id it already had — but not when it happens inside an epic, where the
+    // throw would take the whole request with it.
+    try {
+        const { accounts } = (0, accountListSelector_1.getAccountList)(state.accountState, state.accountListState, exports.INVOICING_ACCOUNT_LIST_KEY);
+        // Matched on any id the account is known by. The pickers submit `qboId`,
+        // but a mapping that arrived from the service can name the account by its
+        // platform id instead, and an account we cannot resolve is a mapping that
+        // cannot be sent as a record.
+        return accounts.find((account) => account.qboId === qboId ||
+            account.accountId === qboId ||
+            account.coaId === qboId);
+    }
+    catch {
+        return undefined;
+    }
+};
+exports.invoicingQboAccountByQboId = invoicingQboAccountByQboId;
+/** The class behind a picker value, for the same reason as the account above. */
+const invoicingQboClassByQboId = (state, qboId) => {
+    if (qboId == null || qboId === '') {
+        return undefined;
+    }
+    try {
+        const { classes } = (0, classListSelector_1.getClassList)(state.classState, state.classListState);
+        return classes.find((accountingClass) => accountingClass.qboId === qboId);
+    }
+    catch {
+        return undefined;
+    }
+};
+exports.invoicingQboClassByQboId = invoicingQboClassByQboId;
 /**
  * Accounts and classes as the invoicing pickers need them. Both come from the
  * shared accounting-service lists, so whatever another screen already loaded

package/lib/view/invoicing/settingsView/epics/connectInvoicingStripeEpic.d.ts

@@ -0,0 +1,6 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../rootStateTypes';
+import { ZeniAPI } from '../../../../zeniAPI';
+import { InvoicingSettingsViewActionType } from './settingsViewActionType';
+export declare const connectInvoicingStripeEpic: (actions$: ActionsObservable<InvoicingSettingsViewActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<InvoicingSettingsViewActionType>;

package/lib/view/invoicing/settingsView/epics/connectInvoicingStripeEpic.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectInvoicingStripeEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const responsePayload_1 = require("../../../../responsePayload");
+const settingsViewReducer_1 = require("../settingsViewReducer");
+const connectInvoicingStripeEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(settingsViewReducer_1.connectInvoicingStripe.match), (0, operators_1.mergeMap)((action) => {
+    const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/settings/stripe-connect/setup`;
+    const { api_key, publishable_key, webhook_secret } = action.payload;
+    const body = {
+        api_key,
+        publishable_key,
+        ...(webhook_secret != null && webhook_secret !== ''
+            ? { webhook_secret }
+            : {}),
+    };
+    return zeniAPI
+        .postAndGetJSON(apiUrl, body)
+        .pipe((0, operators_1.switchMap)((response) => {
+        if ((0, responsePayload_1.isSuccessResponse)(response) && response.data != null) {
+            return (0, rxjs_1.of)((0, settingsViewReducer_1.updateInvoicingStripeConnection)({
+                stripe_connected: response.data.stripe_connected,
+                publishable_key: response.data.publishable_key,
+            }), (0, settingsViewReducer_1.fetchInvoicingSettings)());
+        }
+        return (0, rxjs_1.of)((0, settingsViewReducer_1.invoicingStripeConnectionFailure)(response.status));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, settingsViewReducer_1.invoicingStripeConnectionFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Stripe connect setup REST API call errored out ' +
+        JSON.stringify(error))))));
+}));
+exports.connectInvoicingStripeEpic = connectInvoicingStripeEpic;

package/lib/view/invoicing/settingsView/epics/disconnectInvoicingStripeEpic.d.ts

@@ -0,0 +1,6 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../rootStateTypes';
+import { ZeniAPI } from '../../../../zeniAPI';
+import { InvoicingSettingsViewActionType } from './settingsViewActionType';
+export declare const disconnectInvoicingStripeEpic: (actions$: ActionsObservable<InvoicingSettingsViewActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<InvoicingSettingsViewActionType>;

package/lib/view/invoicing/settingsView/epics/disconnectInvoicingStripeEpic.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disconnectInvoicingStripeEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const responsePayload_1 = require("../../../../responsePayload");
+const settingsViewReducer_1 = require("../settingsViewReducer");
+const disconnectInvoicingStripeEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(settingsViewReducer_1.disconnectInvoicingStripe.match), (0, operators_1.mergeMap)(() => {
+    const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/settings/stripe-connect/callback`;
+    return zeniAPI
+        .deleteAndGetJSON(apiUrl)
+        .pipe((0, operators_1.switchMap)((response) => {
+        if ((0, responsePayload_1.isSuccessResponse)(response)) {
+            return (0, rxjs_1.of)((0, settingsViewReducer_1.updateInvoicingStripeConnection)({
+                stripe_connected: false,
+                publishable_key: '',
+            }), (0, settingsViewReducer_1.fetchInvoicingSettings)());
+        }
+        return (0, rxjs_1.of)((0, settingsViewReducer_1.invoicingStripeConnectionFailure)(response.status));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, settingsViewReducer_1.invoicingStripeConnectionFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Stripe disconnect REST API call errored out ' +
+        JSON.stringify(error))))));
+}));
+exports.disconnectInvoicingStripeEpic = disconnectInvoicingStripeEpic;

package/lib/view/invoicing/settingsView/epics/fetchInvoicingSettingsEpic.d.ts

@@ -0,0 +1,6 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../rootStateTypes';
+import { ZeniAPI } from '../../../../zeniAPI';
+import { InvoicingSettingsViewActionType } from './settingsViewActionType';
+export declare const fetchInvoicingSettingsEpic: (actions$: ActionsObservable<InvoicingSettingsViewActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<InvoicingSettingsViewActionType>;

package/lib/view/invoicing/settingsView/epics/fetchInvoicingSettingsEpic.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchInvoicingSettingsEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const addressReducer_1 = require("../../../../entity/address/addressReducer");
+const responsePayload_1 = require("../../../../responsePayload");
+const settingsViewReducer_1 = require("../settingsViewReducer");
+const fetchInvoicingSettingsEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(settingsViewReducer_1.fetchInvoicingSettings.match), (0, operators_1.switchMap)(() => {
+    const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/settings`;
+    return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
+        if ((0, responsePayload_1.isSuccessResponse)(response) && response.data != null) {
+            const address = response.data.address;
+            return [
+                ...(address != null ? [(0, addressReducer_1.updateAddresses)([address])] : []),
+                (0, settingsViewReducer_1.updateInvoicingSettings)(response.data),
+            ];
+        }
+        return (0, rxjs_1.of)((0, settingsViewReducer_1.updateInvoicingSettingsFailure)(response.status));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, settingsViewReducer_1.updateInvoicingSettingsFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch settings REST API call errored out ' +
+        JSON.stringify(error))))));
+}));
+exports.fetchInvoicingSettingsEpic = fetchInvoicingSettingsEpic;

package/lib/view/invoicing/settingsView/epics/saveInvoicingSettingsEpic.d.ts

@@ -0,0 +1,6 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../rootStateTypes';
+import { ZeniAPI } from '../../../../zeniAPI';
+import { InvoicingSettingsViewActionType } from './settingsViewActionType';
+export declare const saveInvoicingSettingsEpic: (actions$: ActionsObservable<InvoicingSettingsViewActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<InvoicingSettingsViewActionType>;

package/lib/view/invoicing/settingsView/epics/saveInvoicingSettingsEpic.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveInvoicingSettingsEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const snackbarApiError_1 = require("../../../../entity/snackbar/snackbarApiError");
+const snackbarReducer_1 = require("../../../../entity/snackbar/snackbarReducer");
+const responsePayload_1 = require("../../../../responsePayload");
+const settingsViewReducer_1 = require("../settingsViewReducer");
+const saveInvoicingSettingsEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(settingsViewReducer_1.saveInvoicingSettings.match), (0, operators_1.mergeMap)((action) => {
+    const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/settings`;
+    const { settings, snackbarSection } = action.payload;
+    /** `status` surfaces the platform's error text; omit it to keep the generic copy. */
+    const snackbar = (messageText, status) => snackbarSection == null
+        ? []
+        : [
+            (0, snackbarReducer_1.openSnackbar)({
+                messageSection: snackbarSection,
+                messageText,
+                type: messageText === 'success' ? 'success' : 'error',
+                variables: (0, snackbarApiError_1.apiErrorSnackbarVariables)(status),
+            }),
+        ];
+    return zeniAPI
+        .putAndGetJSON(apiUrl, { ...settings })
+        .pipe((0, operators_1.switchMap)((response) => {
+        if ((0, responsePayload_1.isSuccessResponse)(response) && response.data != null) {
+            return (0, rxjs_1.from)([
+                (0, settingsViewReducer_1.saveInvoicingSettingsSuccess)(response.data),
+                ...snackbar('success'),
+            ]);
+        }
+        return (0, rxjs_1.from)([
+            (0, settingsViewReducer_1.saveInvoicingSettingsFailure)(response.status),
+            ...snackbar('failed', response.status),
+        ]);
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.from)([
+        (0, settingsViewReducer_1.saveInvoicingSettingsFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Save settings REST API call errored out ' +
+            JSON.stringify(error))),
+        ...snackbar('failed'),
+    ])));
+}));
+exports.saveInvoicingSettingsEpic = saveInvoicingSettingsEpic;

package/lib/view/invoicing/settingsView/epics/settingsViewActionType.d.ts

@@ -0,0 +1,5 @@
+import { updateAddresses } from '../../../../entity/address/addressReducer';
+import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
+import { connectInvoicingStripe, disconnectInvoicingStripe, fetchInvoicingSettings, invoicingStripeConnectionFailure, saveInvoicingSettings, saveInvoicingSettingsFailure, saveInvoicingSettingsSuccess, submitInvoicingQboSettings, updateInvoicingSettings, updateInvoicingSettingsFailure, updateInvoicingStripeConnection } from '../settingsViewReducer';
+/** Every action the settings epics accept or emit. */
+export type InvoicingSettingsViewActionType = ReturnType<typeof fetchInvoicingSettings> | ReturnType<typeof updateInvoicingSettings> | ReturnType<typeof updateInvoicingSettingsFailure> | ReturnType<typeof saveInvoicingSettings> | ReturnType<typeof saveInvoicingSettingsSuccess> | ReturnType<typeof submitInvoicingQboSettings> | ReturnType<typeof saveInvoicingSettingsFailure> | ReturnType<typeof connectInvoicingStripe> | ReturnType<typeof disconnectInvoicingStripe> | ReturnType<typeof updateInvoicingStripeConnection> | ReturnType<typeof invoicingStripeConnectionFailure> | ReturnType<typeof updateAddresses> | ReturnType<typeof openSnackbar>;

package/lib/view/invoicing/settingsView/epics/settingsViewActionType.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/view/invoicing/settingsView/epics/submitInvoicingQboSettingsEpic.d.ts

@@ -0,0 +1,11 @@
+import { ActionsObservable, StateObservable } from 'redux-observable';
+import { Observable } from 'rxjs';
+import { RootState } from '../../../../rootStateTypes';
+import { InvoicingSettingsViewActionType } from './settingsViewActionType';
+/**
+ * Saves the QBO local data. The screen fires this without a payload — the local
+ * data is already in the store, so sending it back through the action would make
+ * the page the carrier for state it does not own. Converting to the request body
+ * happens here too, keeping the wire shape out of the screen.
+ */
+export declare const submitInvoicingQboSettingsEpic: (actions$: ActionsObservable<InvoicingSettingsViewActionType>, state$: StateObservable<RootState>) => Observable<InvoicingSettingsViewActionType>;

package/lib/view/invoicing/settingsView/epics/submitInvoicingQboSettingsEpic.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.submitInvoicingQboSettingsEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const invoicingQboViewSelector_1 = require("../../invoicingQboView/invoicingQboViewSelector");
+const invoicingQboSettingsFormConfig_1 = require("../invoicingQboSettingsFormConfig");
+const settingsViewReducer_1 = require("../settingsViewReducer");
+/**
+ * Saves the QBO local data. The screen fires this without a payload — the local
+ * data is already in the store, so sending it back through the action would make
+ * the page the carrier for state it does not own. Converting to the request body
+ * happens here too, keeping the wire shape out of the screen.
+ */
+const submitInvoicingQboSettingsEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(settingsViewReducer_1.submitInvoicingQboSettings.match), (0, operators_1.withLatestFrom)(state$), (0, operators_1.mergeMap)(([, state]) => {
+    const { qboDraft } = state.invoicingSettingsViewState;
+    // No local data means the settings response has not landed, so there is
+    // nothing the user could have edited yet.
+    if (qboDraft == null) {
+        return rxjs_1.EMPTY;
+    }
+    return (0, rxjs_1.of)((0, settingsViewReducer_1.saveInvoicingSettings)({
+        settings: {
+            qbo: (0, invoicingQboSettingsFormConfig_1.invoicingQboSettingsLocalDataToPayload)(qboDraft, (accountId) => (0, invoicingQboViewSelector_1.invoicingQboAccountByQboId)(state, accountId)),
+        },
+        snackbarSection: 'invoicing_qbo_settings_save',
+    }));
+}));
+exports.submitInvoicingQboSettingsEpic = submitInvoicingQboSettingsEpic;

package/lib/view/invoicing/settingsView/invoicingQboSettingsFormConfig.d.ts

@@ -0,0 +1,34 @@
+import { AccountBase } from '../../../entity/account/accountState';
+import { InvoicingQboSettingsPayload } from '../../../entity/invoicing/invoicingCommonPayload';
+/**
+ * The QBO configuration page's local data. A client shape, not the wire one: the
+ * page edits a flat `accountIdByMappingCode` map keyed by the config's mapping
+ * codes, where the payload carries one field pair per slot and two shapes for
+ * each. {@link entityToInvoicingQboSettingsLocalData} and
+ * {@link invoicingQboSettingsLocalDataToPayload} convert at the boundary.
+ */
+export interface InvoicingQboSettingsLocalData {
+    /**
+     * Mapping code to the QuickBooks account id the picker selected. Keyed by the
+     * config's own codes rather than a client-side list: the backend owns which
+     * slots exist, so anything narrower silently drops the ones it has not heard
+     * of.
+     */
+    accountIdByMappingCode: Record<string, string>;
+    autoCreateItems: boolean;
+    closedPeriodVoidAsCreditMemo: boolean;
+    customerMatching: string;
+    isSyncEnabled: boolean;
+    /** ISO date, empty when unset — the picker clears to empty, not to null. */
+    syncStartDate: string;
+    trackingCategoriesEnabled: boolean;
+}
+export declare const initialInvoicingQboSettingsLocalData: InvoicingQboSettingsLocalData;
+/** The settings response as the page edits it. */
+export declare const entityToInvoicingQboSettingsLocalData: (qbo: InvoicingQboSettingsPayload | null | undefined) => InvoicingQboSettingsLocalData;
+/**
+ * The local data as the request body. `accountForId` turns each picked id into
+ * the whole account the service stores; it comes from the epic, which is where
+ * the account list is in reach.
+ */
+export declare const invoicingQboSettingsLocalDataToPayload: (localData: InvoicingQboSettingsLocalData, accountForId: (accountId: string) => AccountBase | undefined) => InvoicingQboSettingsPayload;

package/lib/view/invoicing/settingsView/invoicingQboSettingsFormConfig.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.invoicingQboSettingsLocalDataToPayload = exports.entityToInvoicingQboSettingsLocalData = exports.initialInvoicingQboSettingsLocalData = void 0;
+const invoicingCommonPayload_1 = require("../../../entity/invoicing/invoicingCommonPayload");
+exports.initialInvoicingQboSettingsLocalData = {
+    accountIdByMappingCode: {},
+    autoCreateItems: false,
+    closedPeriodVoidAsCreditMemo: false,
+    customerMatching: '',
+    isSyncEnabled: false,
+    syncStartDate: '',
+    trackingCategoriesEnabled: false,
+};
+/** The settings response as the page edits it. */
+const entityToInvoicingQboSettingsLocalData = (qbo) => {
+    const accountMappings = qbo?.account_mappings ?? {};
+    const accountIdByMappingCode = {};
+    // Keyed by the slot the payload used, which is the config code the page will
+    // ask for — the reader tolerates the older `_id` form on the way in.
+    Object.keys(accountMappings).forEach((key) => {
+        const accountId = (0, invoicingCommonPayload_1.getInvoicingQboAccountMappingId)(accountMappings, key);
+        if (accountId != null) {
+            accountIdByMappingCode[(0, invoicingCommonPayload_1.toInvoicingQboAccountMappingSlot)(key)] = accountId;
+        }
+    });
+    return {
+        accountIdByMappingCode,
+        autoCreateItems: qbo?.auto_create_items === true,
+        closedPeriodVoidAsCreditMemo: qbo?.closed_period_void_as_credit_memo === true,
+        customerMatching: qbo?.customer_matching ?? '',
+        isSyncEnabled: qbo?.enabled === true,
+        syncStartDate: qbo?.sync_start_date ?? '',
+        trackingCategoriesEnabled: qbo?.tracking_categories_enabled === true,
+    };
+};
+exports.entityToInvoicingQboSettingsLocalData = entityToInvoicingQboSettingsLocalData;
+/**
+ * The local data as the request body. `accountForId` turns each picked id into
+ * the whole account the service stores; it comes from the epic, which is where
+ * the account list is in reach.
+ */
+const invoicingQboSettingsLocalDataToPayload = (localData, accountForId) => {
+    return {
+        account_mappings: (0, invoicingCommonPayload_1.toInvoicingQboAccountMappingsPayload)(localData.accountIdByMappingCode, accountForId),
+        auto_create_items: localData.autoCreateItems,
+        closed_period_void_as_credit_memo: localData.closedPeriodVoidAsCreditMemo,
+        customer_matching: localData.customerMatching,
+        enabled: localData.isSyncEnabled,
+        sync_start_date: localData.syncStartDate !== '' ? localData.syncStartDate : null,
+        tracking_categories_enabled: localData.trackingCategoriesEnabled,
+    };
+};
+exports.invoicingQboSettingsLocalDataToPayload = invoicingQboSettingsLocalDataToPayload;

package/lib/view/invoicing/settingsView/settingsViewReducer.d.ts

@@ -2,6 +2,7 @@ import { InvoicingSettingsPayload } from '../../../entity/invoicing/invoicingCom
 import { SnackbarMessageSections } from '../../../entity/snackbar/snackbarTypes';
 import { ZeniAPIStatus } from '../../../responsePayload';
 import { InvoicingBrandingFormLocalData } from './invoicingBrandingFormConfig';
+import { InvoicingQboSettingsLocalData } from './invoicingQboSettingsFormConfig';
 import { StripeConnectCredentials } from './settingsViewPayload';
 import { InvoicingSettingsViewState } from './settingsViewState';
 export interface InvoicingStripeConnectionUpdate {
@@ -19,6 +20,8 @@ export interface SaveInvoicingSettingsPayload {
 export declare const initialState: InvoicingSettingsViewState;
 export declare const fetchInvoicingSettings: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/fetchInvoicingSettings">, updateInvoicingSettings: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingSettingsPayload, "invoicingSettingsView/updateInvoicingSettings">, updateInvoicingSettingsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSettingsView/updateInvoicingSettingsFailure">, saveInvoicingSettings: import("@reduxjs/toolkit").ActionCreatorWithPayload<SaveInvoicingSettingsPayload, "invoicingSettingsView/saveInvoicingSettings">, saveInvoicingSettingsSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingSettingsPayload, "invoicingSettingsView/saveInvoicingSettingsSuccess">, saveInvoicingSettingsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSettingsView/saveInvoicingSettingsFailure">, resetSaveInvoicingSettings: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/resetSaveInvoicingSettings">, updateInvoicingBrandingFormDraft: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     localData: InvoicingBrandingFormLocalData;
-}, "invoicingSettingsView/updateInvoicingBrandingFormDraft">, submitInvoicingBrandingForm: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/submitInvoicingBrandingForm">, resetInvoicingBrandingFormDraft: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/resetInvoicingBrandingFormDraft">, connectInvoicingStripe: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[credentials: StripeConnectCredentials], StripeConnectCredentials, "invoicingSettingsView/connectInvoicingStripe", never, never>, disconnectInvoicingStripe: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/disconnectInvoicingStripe">, updateInvoicingStripeConnection: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingStripeConnectionUpdate, "invoicingSettingsView/updateInvoicingStripeConnection">, invoicingStripeConnectionFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSettingsView/invoicingStripeConnectionFailure">;
+}, "invoicingSettingsView/updateInvoicingBrandingFormDraft">, submitInvoicingBrandingForm: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/submitInvoicingBrandingForm">, resetInvoicingBrandingFormDraft: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/resetInvoicingBrandingFormDraft">, updateInvoicingQboSettingsDraft: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    localData: InvoicingQboSettingsLocalData;
+}, "invoicingSettingsView/updateInvoicingQboSettingsDraft">, submitInvoicingQboSettings: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/submitInvoicingQboSettings">, resetInvoicingQboSettingsDraft: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/resetInvoicingQboSettingsDraft">, connectInvoicingStripe: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[credentials: StripeConnectCredentials], StripeConnectCredentials, "invoicingSettingsView/connectInvoicingStripe", never, never>, disconnectInvoicingStripe: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSettingsView/disconnectInvoicingStripe">, updateInvoicingStripeConnection: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingStripeConnectionUpdate, "invoicingSettingsView/updateInvoicingStripeConnection">, invoicingStripeConnectionFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSettingsView/invoicingStripeConnectionFailure">;
 declare const _default: import("redux").Reducer<InvoicingSettingsViewState>;
 export default _default;

package/lib/view/invoicing/settingsView/settingsViewReducer.js

@@ -1,15 +1,20 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.invoicingStripeConnectionFailure = exports.updateInvoicingStripeConnection = exports.disconnectInvoicingStripe = exports.connectInvoicingStripe = exports.resetInvoicingBrandingFormDraft = exports.submitInvoicingBrandingForm = exports.updateInvoicingBrandingFormDraft = exports.resetSaveInvoicingSettings = exports.saveInvoicingSettingsFailure = exports.saveInvoicingSettingsSuccess = exports.saveInvoicingSettings = exports.updateInvoicingSettingsFailure = exports.updateInvoicingSettings = exports.fetchInvoicingSettings = exports.initialState = void 0;
+exports.invoicingStripeConnectionFailure = exports.updateInvoicingStripeConnection = exports.disconnectInvoicingStripe = exports.connectInvoicingStripe = exports.resetInvoicingQboSettingsDraft = exports.submitInvoicingQboSettings = exports.updateInvoicingQboSettingsDraft = exports.resetInvoicingBrandingFormDraft = exports.submitInvoicingBrandingForm = exports.updateInvoicingBrandingFormDraft = exports.resetSaveInvoicingSettings = exports.saveInvoicingSettingsFailure = exports.saveInvoicingSettingsSuccess = exports.saveInvoicingSettings = exports.updateInvoicingSettingsFailure = exports.updateInvoicingSettings = exports.fetchInvoicingSettings = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingQboSettingsFormConfig_1 = require("./invoicingQboSettingsFormConfig");
 exports.initialState = {
     fetchState: 'Not-Started',
     error: undefined,
     saveFetchState: { fetchState: 'Not-Started', error: undefined },
     stripeFetchState: { fetchState: 'Not-Started', error: undefined },
     settings: undefined,
+    // Listed so `clearAll` resets them: an in-progress draft left behind by a
+    // tenant switch would be shown and saved against the tenant switched to.
+    brandingDraft: undefined,
+    qboDraft: undefined,
     hasValidState() {
         return this.fetchState === 'Completed' && this.settings != null;
     },
@@ -26,6 +31,11 @@ const settingsView = (0, toolkit_1.createSlice)({
             draft.settings = action.payload;
             draft.fetchState = 'Completed';
             draft.error = undefined;
+            // Seed the QBO page's local data from the response. An edit already in
+            // progress wins: a refetch behind the user must not discard it.
+            if (draft.qboDraft == null) {
+                draft.qboDraft = (0, invoicingQboSettingsFormConfig_1.entityToInvoicingQboSettingsLocalData)(action.payload.qbo);
+            }
         },
         updateInvoicingSettingsFailure(draft, action) {
             draft.fetchState = 'Error';
@@ -40,6 +50,9 @@ const settingsView = (0, toolkit_1.createSlice)({
         saveInvoicingSettingsSuccess(draft, action) {
             draft.settings = action.payload;
             draft.saveFetchState = { fetchState: 'Completed', error: undefined };
+            // Re-seeded from what was just persisted, so the page keeps working off
+            // local data while showing the server's version of it.
+            draft.qboDraft = (0, invoicingQboSettingsFormConfig_1.entityToInvoicingQboSettingsLocalData)(action.payload.qbo);
         },
         saveInvoicingSettingsFailure(draft, action) {
             draft.saveFetchState = { fetchState: 'Error', error: action.payload };
@@ -58,6 +71,17 @@ const settingsView = (0, toolkit_1.createSlice)({
         resetInvoicingBrandingFormDraft(draft) {
             draft.brandingDraft = undefined;
         },
+        updateInvoicingQboSettingsDraft(draft, action) {
+            draft.qboDraft = action.payload.localData;
+        },
+        // Trigger only — handled by submitInvoicingQboSettingsEpic, which reads the
+        // local data and converts it to the request body.
+        submitInvoicingQboSettings(draft) {
+            draft.saveFetchState = { fetchState: 'In-Progress', error: undefined };
+        },
+        resetInvoicingQboSettingsDraft(draft) {
+            draft.qboDraft = undefined;
+        },
         connectInvoicingStripe: {
             reducer(draft) {
                 draft.stripeFetchState = { fetchState: 'In-Progress', error: undefined };
@@ -89,5 +113,5 @@ const settingsView = (0, toolkit_1.createSlice)({
         });
     },
 });
-_a = settingsView.actions, exports.fetchInvoicingSettings = _a.fetchInvoicingSettings, exports.updateInvoicingSettings = _a.updateInvoicingSettings, exports.updateInvoicingSettingsFailure = _a.updateInvoicingSettingsFailure, exports.saveInvoicingSettings = _a.saveInvoicingSettings, exports.saveInvoicingSettingsSuccess = _a.saveInvoicingSettingsSuccess, exports.saveInvoicingSettingsFailure = _a.saveInvoicingSettingsFailure, exports.resetSaveInvoicingSettings = _a.resetSaveInvoicingSettings, exports.updateInvoicingBrandingFormDraft = _a.updateInvoicingBrandingFormDraft, exports.submitInvoicingBrandingForm = _a.submitInvoicingBrandingForm, exports.resetInvoicingBrandingFormDraft = _a.resetInvoicingBrandingFormDraft, exports.connectInvoicingStripe = _a.connectInvoicingStripe, exports.disconnectInvoicingStripe = _a.disconnectInvoicingStripe, exports.updateInvoicingStripeConnection = _a.updateInvoicingStripeConnection, exports.invoicingStripeConnectionFailure = _a.invoicingStripeConnectionFailure;
+_a = settingsView.actions, exports.fetchInvoicingSettings = _a.fetchInvoicingSettings, exports.updateInvoicingSettings = _a.updateInvoicingSettings, exports.updateInvoicingSettingsFailure = _a.updateInvoicingSettingsFailure, exports.saveInvoicingSettings = _a.saveInvoicingSettings, exports.saveInvoicingSettingsSuccess = _a.saveInvoicingSettingsSuccess, exports.saveInvoicingSettingsFailure = _a.saveInvoicingSettingsFailure, exports.resetSaveInvoicingSettings = _a.resetSaveInvoicingSettings, exports.updateInvoicingBrandingFormDraft = _a.updateInvoicingBrandingFormDraft, exports.submitInvoicingBrandingForm = _a.submitInvoicingBrandingForm, exports.resetInvoicingBrandingFormDraft = _a.resetInvoicingBrandingFormDraft, exports.updateInvoicingQboSettingsDraft = _a.updateInvoicingQboSettingsDraft, exports.submitInvoicingQboSettings = _a.submitInvoicingQboSettings, exports.resetInvoicingQboSettingsDraft = _a.resetInvoicingQboSettingsDraft, exports.connectInvoicingStripe = _a.connectInvoicingStripe, exports.disconnectInvoicingStripe = _a.disconnectInvoicingStripe, exports.updateInvoicingStripeConnection = _a.updateInvoicingStripeConnection, exports.invoicingStripeConnectionFailure = _a.invoicingStripeConnectionFailure;
 exports.default = settingsView.reducer;

package/lib/view/invoicing/settingsView/settingsViewSelector.d.ts

@@ -1,8 +1,12 @@
+import { NestedAccountHierarchyForReport } from '../../../commonStateTypes/accountView/nestedAccountID';
 import { FetchState, FetchStateAndError } from '../../../commonStateTypes/common';
 import { InvoicingDunningActionOption, InvoicingNamedOption, InvoicingQboAccountMappingKindOption, InvoicingSettingsPayload } from '../../../entity/invoicing/invoicingCommonPayload';
 import { ZeniAPIStatus } from '../../../responsePayload';
 import { RootState } from '../../../rootStateTypes';
+import { InvoicingQboConnection, InvoicingQboSyncHealth } from '../invoicingQboView/invoicingQboViewPayload';
+import { InvoicingAccountingOption } from '../invoicingQboView/invoicingQboViewSelector';
 import { InvoicingBrandingFormLocalData } from './invoicingBrandingFormConfig';
+import { InvoicingQboSettingsLocalData } from './invoicingQboSettingsFormConfig';
 /**
  * Shared primitive: the raw invoicing settings. Consumed internally by other
  * CES selectors (create-invoice, customer-detail, overview) and by non-settings
@@ -83,6 +87,37 @@ export interface InvoicingSettingsHubView {
  * and QBO slices read here are only fetched once a settings screen is mounted.
  */
 export declare const getInvoicingSettingsHubView: (state: RootState) => InvoicingSettingsHubView;
+export interface InvoicingQboSettingsFormView {
+    accountMappingKindOptions: InvoicingQboAccountMappingKindOption[];
+    /** Accounts for the mapping dropdowns, narrowed per kind by the page. */
+    accounts: InvoicingAccountingOption[];
+    backfillState: FetchStateAndError;
+    /** So the screen can fetch only what is missing, without reading the slices. */
+    configFetchState: FetchState;
+    customerMatchingOptions: InvoicingNamedOption[];
+    isLoading: boolean;
+    /** The persisted sync toggle — the backfill guard checks that, not the draft. */
+    isSyncEnabledSaved: boolean;
+    /** The draft the page edits, seeded from the settings response. */
+    localData: InvoicingQboSettingsLocalData;
+    nestedAccountHierarchy: NestedAccountHierarchyForReport[];
+    retryFetchStateByTaskId: Record<string, FetchStateAndError>;
+    saveState: FetchStateAndError;
+    settingsFetchState: FetchState;
+    syncStatusOptions: InvoicingNamedOption[];
+    connection?: InvoicingQboConnection;
+    syncHealth?: InvoicingQboSyncHealth;
+}
+/**
+ * Bundled view for the QBO configuration page: the draft it edits, the accounts
+ * and option lists its dropdowns render, the connection and sync health it
+ * reports, and the fetch states that decide between skeleton, form and error.
+ *
+ * `localData` is the draft once the user has edited, and the settings response
+ * before that — so the page has one field to read and CES owns when it becomes
+ * available, rather than the page copying settings into local state.
+ */
+export declare const getInvoicingQboSettingsFormView: (state: RootState) => InvoicingQboSettingsFormView;
 export interface InvoicingBrandingFormView {
     dateFormatOptions: InvoicingNamedOption[];
     localData: InvoicingBrandingFormLocalData;

package/lib/view/invoicing/settingsView/settingsViewSelector.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInvoicingBrandingFormView = exports.getInvoicingSettingsHubView = exports.getInvoicingSettingsView = exports.getInvoicingSettingsFetchState = exports.getInvoicingSettings = void 0;
+exports.getInvoicingBrandingFormView = exports.getInvoicingQboSettingsFormView = exports.getInvoicingSettingsHubView = exports.getInvoicingSettingsView = exports.getInvoicingSettingsFetchState = exports.getInvoicingSettings = void 0;
 exports.deriveInvoicingEnablePrerequisites = deriveInvoicingEnablePrerequisites;
 const invoicingCommonPayload_1 = require("../../../entity/invoicing/invoicingCommonPayload");
 const addressViewSelector_1 = require("../../addressView/addressViewSelector");
 const invoicingConfigViewSelector_1 = require("../invoicingConfigView/invoicingConfigViewSelector");
+const invoicingQboViewSelector_1 = require("../invoicingQboView/invoicingQboViewSelector");
 const invoicingBrandingFormConfig_1 = require("./invoicingBrandingFormConfig");
+const invoicingQboSettingsFormConfig_1 = require("./invoicingQboSettingsFormConfig");
 /**
  * Shared primitive: the raw invoicing settings. Consumed internally by other
  * CES selectors (create-invoice, customer-detail, overview) and by non-settings
@@ -100,6 +102,46 @@ const getInvoicingSettingsHubView = (state) => {
     };
 };
 exports.getInvoicingSettingsHubView = getInvoicingSettingsHubView;
+/**
+ * Bundled view for the QBO configuration page: the draft it edits, the accounts
+ * and option lists its dropdowns render, the connection and sync health it
+ * reports, and the fetch states that decide between skeleton, form and error.
+ *
+ * `localData` is the draft once the user has edited, and the settings response
+ * before that — so the page has one field to read and CES owns when it becomes
+ * available, rather than the page copying settings into local state.
+ */
+const getInvoicingQboSettingsFormView = (state) => {
+    const { error, fetchState, qboDraft, saveFetchState, settings } = state.invoicingSettingsViewState;
+    const { fetchState: configFetchState, qboAccountMappingKindOptions, qboCustomerMatchingOptions, qboSyncStatusOptions, } = (0, invoicingConfigViewSelector_1.getInvoicingConfigView)(state);
+    const qboView = (0, invoicingQboViewSelector_1.getInvoicingQboView)(state);
+    return {
+        accountMappingKindOptions: qboAccountMappingKindOptions,
+        accounts: qboView.accounts,
+        backfillState: qboView.backfillState,
+        connection: qboView.connection,
+        configFetchState,
+        customerMatchingOptions: qboCustomerMatchingOptions,
+        // The dropdowns cannot be built before both the settings and the accounts
+        // land, so the page waits on either rather than rendering empty pickers.
+        isLoading: fetchState === 'Not-Started' ||
+            fetchState === 'In-Progress' ||
+            (0, invoicingQboViewSelector_1.isInvoicingAccountingPickerDataLoading)(state),
+        isSyncEnabledSaved: settings?.qbo?.enabled === true,
+        // Seeded in the reducer when the settings response lands, so this is a plain
+        // read rather than a second place that decides what the page starts from.
+        localData: qboDraft ?? invoicingQboSettingsFormConfig_1.initialInvoicingQboSettingsLocalData,
+        nestedAccountHierarchy: qboView.nestedAccountHierarchy,
+        retryFetchStateByTaskId: qboView.retryFetchStateByTaskId,
+        saveState: saveFetchState.fetchState === 'Not-Started' && error != null
+            ? { fetchState, error }
+            : saveFetchState,
+        settingsFetchState: fetchState,
+        syncHealth: qboView.syncHealth,
+        syncStatusOptions: qboSyncStatusOptions,
+    };
+};
+exports.getInvoicingQboSettingsFormView = getInvoicingQboSettingsFormView;
 /**
  * Bundled view for the branding settings form: the draft `localData` (seeded
  * from the existing settings until the user edits), the business-address label

package/lib/view/invoicing/settingsView/settingsViewState.d.ts

@@ -1,9 +1,17 @@
 import { FetchStateAndError, FetchedState } from '../../../commonStateTypes/common';
 import { InvoicingSettingsPayload } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingBrandingFormLocalData } from './invoicingBrandingFormConfig';
+import { InvoicingQboSettingsLocalData } from './invoicingQboSettingsFormConfig';
 export interface InvoicingSettingsViewState extends FetchedState {
     saveFetchState: FetchStateAndError;
     stripeFetchState: FetchStateAndError;
     brandingDraft?: InvoicingBrandingFormLocalData;
+    /**
+     * In-progress QBO settings edits. Held here rather than in the page so a
+     * selection cannot be lost between the change and the save, and so a
+     * half-finished edit survives navigating away. Undefined until first edited,
+     * which is what makes the server's settings the fallback.
+     */
+    qboDraft?: InvoicingQboSettingsLocalData;
     settings?: InvoicingSettingsPayload;
 }