@zeniai/client-epic-state 5.1.93 → 5.1.94

package/lib/esm/view/invoicing/invoicingDunningCaseDetailView/fetchInvoicingDunningEmailPreviewEpic.js

@@ -0,0 +1,26 @@
+import { of } from 'rxjs';
+import { catchError, filter, map, switchMap } from 'rxjs/operators';
+import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { toInvoicingDunningEmailPreview, } from './invoicingDunningCaseDetailViewPayload';
+import { fetchInvoicingDunningEmailPreview, updateInvoicingDunningEmailPreview, updateInvoicingDunningEmailPreviewFailure, } from './invoicingDunningCaseDetailViewReducer';
+export const fetchInvoicingDunningEmailPreviewEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingDunningEmailPreview.match), switchMap((action) => {
+    const { id } = action.payload;
+    const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/dunning/${encodeURIComponent(id)}/email-preview`;
+    return zeniAPI
+        .postAndGetJSON(apiUrl, {})
+        .pipe(map((response) => {
+        if (isSuccessResponse(response) && response.data != null) {
+            return updateInvoicingDunningEmailPreview({
+                id,
+                preview: toInvoicingDunningEmailPreview(response.data),
+            });
+        }
+        return updateInvoicingDunningEmailPreviewFailure({
+            id,
+            status: response.status,
+        });
+    }), catchError((error) => of(updateInvoicingDunningEmailPreviewFailure({
+        id,
+        status: createZeniAPIStatus('Unexpected Error', `Dunning email preview REST API call errored out: ${error instanceof Error ? error.message : String(error)}`),
+    }))));
+}));

package/lib/esm/view/invoicing/invoicingDunningCaseDetailView/fetchInvoicingDunningEmailPreviewPageEpic.js

@@ -0,0 +1,16 @@
+import { EMPTY, of } from 'rxjs';
+import { filter, mergeMap } from 'rxjs/operators';
+import { fetchInvoicingDunningEmailPreview, fetchInvoicingDunningEmailPreviewPage, } from './invoicingDunningCaseDetailViewReducer';
+const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
+    (fetchStateAndError.fetchState !== 'Completed' &&
+        fetchStateAndError.fetchState !== 'In-Progress');
+export const fetchInvoicingDunningEmailPreviewPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoicingDunningEmailPreviewPage.match), mergeMap((action) => {
+    const { cacheOverride, id } = action.payload;
+    const detailState = state$.value.invoicingDunningCaseDetailViewState;
+    if (detailState.id !== id) {
+        return EMPTY;
+    }
+    return shouldFetch(detailState.emailPreview, cacheOverride)
+        ? of(fetchInvoicingDunningEmailPreview({ id }))
+        : EMPTY;
+}));

package/lib/esm/view/invoicing/invoicingDunningCaseDetailView/invoicingDunningCaseDetailViewPayload.js

@@ -1 +1,9 @@
-export {};
+export const toInvoicingDunningEmailPreview = (payload) => ({
+    body: payload.body,
+    bodyToken: payload.body_token,
+    cc: payload.cc,
+    renderedHtmlTemplate: payload.rendered_html_template,
+    subject: payload.subject,
+    subjectToken: payload.subject_token,
+    to: payload.to,
+});

package/lib/esm/view/invoicing/invoicingDunningCaseDetailView/invoicingDunningCaseDetailViewReducer.js

@@ -1,8 +1,14 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+export const initialEmailPreviewState = {
+    fetchState: 'Not-Started',
+    error: undefined,
+    preview: undefined,
+};
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    emailPreview: initialEmailPreviewState,
     id: undefined,
 };
 const invoicingDunningCaseDetailView = createSlice({
@@ -10,10 +16,38 @@ const invoicingDunningCaseDetailView = createSlice({
     initialState,
     reducers: {
         fetchInvoicingDunningCaseDetail(draft, action) {
+            if (draft.id !== action.payload.id) {
+                draft.emailPreview = { ...initialEmailPreviewState };
+            }
             draft.id = action.payload.id;
             draft.fetchState = 'In-Progress';
             draft.error = undefined;
         },
+        fetchInvoicingDunningEmailPreview(draft, action) {
+            if (draft.id !== action.payload.id) {
+                return;
+            }
+            draft.emailPreview.fetchState = 'In-Progress';
+            draft.emailPreview.error = undefined;
+        },
+        fetchInvoicingDunningEmailPreviewPage: {
+            reducer() {
+                // Cache-aware orchestrator trigger only.
+            },
+            prepare(payload) {
+                return {
+                    payload: {
+                        cacheOverride: payload.cacheOverride ?? false,
+                        id: payload.id,
+                    },
+                };
+            },
+        },
+        invalidateInvoicingDunningEmailPreview(draft, action) {
+            if (draft.id === action.payload.id) {
+                draft.emailPreview = { ...initialEmailPreviewState };
+            }
+        },
         updateInvoicingDunningCaseDetail(draft, action) {
             draft.id = action.payload.id;
             draft.fetchState = 'Completed';
@@ -23,6 +57,21 @@ const invoicingDunningCaseDetailView = createSlice({
             draft.fetchState = 'Error';
             draft.error = action.payload;
         },
+        updateInvoicingDunningEmailPreview(draft, action) {
+            if (draft.id === action.payload.id) {
+                draft.emailPreview = {
+                    error: undefined,
+                    fetchState: 'Completed',
+                    preview: action.payload.preview,
+                };
+            }
+        },
+        updateInvoicingDunningEmailPreviewFailure(draft, action) {
+            if (draft.id === action.payload.id) {
+                draft.emailPreview.fetchState = 'Error';
+                draft.emailPreview.error = action.payload.status;
+            }
+        },
         clearInvoicingDunningCaseDetailView(draft) {
             Object.assign(draft, initialState);
         },
@@ -33,5 +82,5 @@ const invoicingDunningCaseDetailView = createSlice({
         });
     },
 });
-export const { fetchInvoicingDunningCaseDetail, updateInvoicingDunningCaseDetail, updateInvoicingDunningCaseDetailFailure, clearInvoicingDunningCaseDetailView, } = invoicingDunningCaseDetailView.actions;
+export const { clearInvoicingDunningCaseDetailView, fetchInvoicingDunningCaseDetail, fetchInvoicingDunningEmailPreview, fetchInvoicingDunningEmailPreviewPage, invalidateInvoicingDunningEmailPreview, updateInvoicingDunningCaseDetail, updateInvoicingDunningCaseDetailFailure, updateInvoicingDunningEmailPreview, updateInvoicingDunningEmailPreviewFailure, } = invoicingDunningCaseDetailView.actions;
 export default invoicingDunningCaseDetailView.reducer;

package/lib/esm/view/invoicing/invoicingDunningCaseDetailView/invoicingDunningCaseDetailViewSelector.js

@@ -1,13 +1,26 @@
 import { getInvoicingDunningCaseById as getInvoicingDunningCaseByIdFromState } from '../../../entity/invoicing/dunningCase/dunningCaseSelector';
 import { getInvoicingDunningActionState } from '../dunningAction/dunningActionSelector';
+const EMAIL_PREVIEW_NOT_STARTED = {
+    error: undefined,
+    fetchState: 'Not-Started',
+    preview: undefined,
+};
 export const getInvoicingDunningCaseById = (state, id) => getInvoicingDunningCaseByIdFromState(state.invoicingDunningCaseState, id);
 export const getInvoicingDunningCaseDetail = (state, invoicingDunningCaseID) => {
-    const { error, fetchState } = state.invoicingDunningCaseDetailViewState;
+    const { emailPreview, error, fetchState, id } = state.invoicingDunningCaseDetailViewState;
     return {
         actionState: getInvoicingDunningActionState(invoicingDunningCaseID)(state),
         dunningCase: getInvoicingDunningCaseById(state, invoicingDunningCaseID),
+        emailPreview: id === invoicingDunningCaseID ? emailPreview : EMAIL_PREVIEW_NOT_STARTED,
         fetchState,
         error,
         version: 1.0,
     };
 };
+export const getInvoicingDunningEmailPreview = (state, invoicingDunningCaseID) => {
+    const detailState = state.invoicingDunningCaseDetailViewState;
+    if (detailState.id !== invoicingDunningCaseID) {
+        return EMAIL_PREVIEW_NOT_STARTED;
+    }
+    return detailState.emailPreview;
+};

package/lib/esm/view/invoicing/invoicingQboView/epics/retryInvoicingQboSyncTaskEpic.js

@@ -1,5 +1,7 @@
-import { of } from 'rxjs';
+import { from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { apiErrorSnackbarVariables } from '../../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { fetchInvoicingQboSyncHealth, retryInvoicingQboSyncTask, retryInvoicingQboSyncTaskFailure, retryInvoicingQboSyncTaskSuccess, } from '../invoicingQboViewReducer';
 export const retryInvoicingQboSyncTaskEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(retryInvoicingQboSyncTask.match), mergeMap((action) => {
@@ -12,15 +14,34 @@ export const retryInvoicingQboSyncTaskEpic = (actions$, _state$, zeniAPI) => act
             return of(retryInvoicingQboSyncTaskSuccess({
                 status: response.data?.status ?? '',
                 taskId: response.data?.task_id ?? taskId,
-            }), fetchInvoicingQboSyncHealth());
+            }), fetchInvoicingQboSyncHealth(), openSnackbar({
+                messageSection: 'invoicing_qbo_sync_health_retry',
+                messageText: 'success',
+                type: 'success',
+            }));
         }
-        return of(retryInvoicingQboSyncTaskFailure({
-            status: response.status,
+        return from([
+            retryInvoicingQboSyncTaskFailure({
+                status: response.status,
+                taskId,
+            }),
+            openSnackbar({
+                messageSection: 'invoicing_qbo_sync_health_retry',
+                messageText: 'failed',
+                type: 'error',
+                variables: apiErrorSnackbarVariables(response.status),
+            }),
+        ]);
+    }), catchError((error) => from([
+        retryInvoicingQboSyncTaskFailure({
+            status: createZeniAPIStatus('Unexpected Error', 'Retry QBO sync task REST API call errored out ' +
+                JSON.stringify(error)),
             taskId,
-        }));
-    }), catchError((error) => of(retryInvoicingQboSyncTaskFailure({
-        status: createZeniAPIStatus('Unexpected Error', 'Retry QBO sync task REST API call errored out ' +
-            JSON.stringify(error)),
-        taskId,
-    }))));
+        }),
+        openSnackbar({
+            messageSection: 'invoicing_qbo_sync_health_retry',
+            messageText: 'failed',
+            type: 'error',
+        }),
+    ])));
 }));

package/lib/esm/view/invoicing/invoicingQboView/epics/startInvoicingQboBackfillEpic.js

@@ -1,5 +1,7 @@
-import { of } from 'rxjs';
+import { from } from 'rxjs';
 import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
+import { apiErrorSnackbarVariables } from '../../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { fetchInvoicingQboSyncHealth, startInvoicingQboBackfill, startInvoicingQboBackfillFailure, startInvoicingQboBackfillSuccess, } from '../invoicingQboViewReducer';
 export const startInvoicingQboBackfillEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(startInvoicingQboBackfill.match), switchMap((action) => {
@@ -10,9 +12,32 @@ export const startInvoicingQboBackfillEpic = (actions$, _state$, zeniAPI) => act
     })
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response)) {
-            return of(startInvoicingQboBackfillSuccess(), fetchInvoicingQboSyncHealth());
+            return from([
+                startInvoicingQboBackfillSuccess(),
+                fetchInvoicingQboSyncHealth(),
+                openSnackbar({
+                    messageSection: 'invoicing_qbo_backfill',
+                    messageText: 'success',
+                    type: 'success',
+                }),
+            ]);
         }
-        return of(startInvoicingQboBackfillFailure(response.status));
-    }), catchError((error) => of(startInvoicingQboBackfillFailure(createZeniAPIStatus('Unexpected Error', 'Start QBO backfill REST API call errored out ' +
-        JSON.stringify(error))))));
+        return from([
+            startInvoicingQboBackfillFailure(response.status),
+            openSnackbar({
+                messageSection: 'invoicing_qbo_backfill',
+                messageText: 'failed',
+                type: 'error',
+                variables: apiErrorSnackbarVariables(response.status),
+            }),
+        ]);
+    }), catchError((error) => from([
+        startInvoicingQboBackfillFailure(createZeniAPIStatus('Unexpected Error', 'Start QBO backfill REST API call errored out ' +
+            JSON.stringify(error))),
+        openSnackbar({
+            messageSection: 'invoicing_qbo_backfill',
+            messageText: 'failed',
+            type: 'error',
+        }),
+    ])));
 }));

package/lib/esm/view/invoicing/issueCreditNote/issueCreditNoteEpic.js

@@ -1,6 +1,8 @@
-import { of } from 'rxjs';
+import { from } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateInvoicingCreditNotes } from '../../../entity/invoicing/creditNote/creditNoteReducer';
+import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { fetchInvoiceDetail } from '../invoiceDetail/invoiceDetailReducer';
 import { localDataToIssueCreditNotePayload, } from './issueCreditNotePayload';
@@ -18,9 +20,29 @@ export const issueCreditNoteEpic = (actions$, state$, zeniAPI) => actions$.pipe(
                 updateInvoicingCreditNotes([response.data], 'merge'),
                 fetchInvoiceDetail({ invoiceId }),
                 issueCreditNoteSuccess({ creditNoteId: response.data.id }),
+                openSnackbar({
+                    messageSection: 'invoicing_credit_note_saved',
+                    messageText: 'success',
+                    type: 'success',
+                }),
             ];
         }
-        return of(issueCreditNoteFailure(response.status));
-    }), catchError((error) => of(issueCreditNoteFailure(createZeniAPIStatus('Unexpected Error', 'Issue credit note REST API call errored out ' +
-        JSON.stringify(error))))));
+        return from([
+            issueCreditNoteFailure(response.status),
+            openSnackbar({
+                messageSection: 'invoicing_credit_note_saved',
+                messageText: 'failed',
+                type: 'error',
+                variables: apiErrorSnackbarVariables(response.status),
+            }),
+        ]);
+    }), catchError((error) => from([
+        issueCreditNoteFailure(createZeniAPIStatus('Unexpected Error', 'Issue credit note REST API call errored out ' +
+            JSON.stringify(error))),
+        openSnackbar({
+            messageSection: 'invoicing_credit_note_saved',
+            messageText: 'failed',
+            type: 'error',
+        }),
+    ])));
 }));

package/lib/esm/view/invoicing/issueCreditNote/issueCreditNoteSelector.js

@@ -1,20 +1,28 @@
-import { INVOICING_CREDIT_NOTE_REASON_CODES } from './issueCreditNoteFormConfig';
-export const getIssueCreditNoteView = (state) => {
-    const { error, fetchState, issuedCreditNoteId } = state.invoicingIssueCreditNoteState;
+import { getInvoiceDetail } from '../invoiceDetail/invoiceDetailSelector';
+import { INVOICING_CREDIT_NOTE_REASON_CODES, initialIssueCreditNoteFormLocalData, } from './issueCreditNoteFormConfig';
+/**
+ * The draft is a single global slice, so a draft seeded for a previously opened
+ * invoice can still be in state when another invoice's screen mounts. Anything
+ * that would render that stale draft next to this invoice is dropped until the
+ * screen re-seeds it for `invoiceId`.
+ */
+export const getIssueCreditNoteView = (state, invoiceId) => {
+    const invoiceView = getInvoiceDetail(state, invoiceId);
+    const { draft, error, fetchState, issuedCreditNoteId } = state.invoicingIssueCreditNoteState;
+    const isDraftForInvoice = draft.invoiceId === invoiceId;
     return {
-        error,
-        fetchState,
+        invoice: invoiceView.invoice,
+        isPageReady: invoiceView.fetchState === 'Completed' &&
+            isDraftForInvoice &&
+            draft.lineItems.length > 0,
         issuedCreditNoteId,
-        version: 1.0,
-    };
-};
-export const getIssueCreditNoteFormView = (state) => {
-    const { draft, error, fetchState } = state.invoicingIssueCreditNoteState;
-    return {
-        localData: draft,
+        localData: isDraftForInvoice
+            ? draft
+            : initialIssueCreditNoteFormLocalData(invoiceId),
         reasonCodeValues: [...INVOICING_CREDIT_NOTE_REASON_CODES],
-        error,
-        fetchState,
+        submitState: { error, fetchState },
+        error: invoiceView.error,
+        fetchState: invoiceView.fetchState,
         version: 1.0,
     };
 };

package/lib/esm/view/invoicing/recordPayment/recordPaymentEpic.js

@@ -1,7 +1,9 @@
-import { of } from 'rxjs';
+import { from } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateInvoices } from '../../../entity/invoicing/invoice/invoiceReducer';
 import { updateInvoicingTransactions } from '../../../entity/invoicing/invoicingTransaction/invoicingTransactionReducer';
+import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { fetchInvoiceDetail } from '../invoiceDetail/invoiceDetailReducer';
 import { addInvoicingTransactionToList } from '../invoicingTransactionListView/invoicingTransactionListViewReducer';
@@ -26,11 +28,31 @@ export const recordPaymentEpic = (actions$, state$, zeniAPI) => actions$.pipe(fi
                     updateInvoices([response.data], 'merge'),
                     fetchInvoiceDetail({ invoiceId }),
                     recordPaymentSuccess({ invoiceId }),
+                    openSnackbar({
+                        messageSection: 'invoicing_payment_recorded',
+                        messageText: 'success',
+                        type: 'success',
+                    }),
                 ];
             }
-            return of(recordPaymentFailure(response.status));
-        }), catchError((error) => of(recordPaymentFailure(createZeniAPIStatus('Unexpected Error', 'Record payment REST API call errored out ' +
-            JSON.stringify(error))))));
+            return from([
+                recordPaymentFailure(response.status),
+                openSnackbar({
+                    messageSection: 'invoicing_payment_recorded',
+                    messageText: 'failed',
+                    type: 'error',
+                    variables: apiErrorSnackbarVariables(response.status),
+                }),
+            ]);
+        }), catchError((error) => from([
+            recordPaymentFailure(createZeniAPIStatus('Unexpected Error', 'Record payment REST API call errored out ' +
+                JSON.stringify(error))),
+            openSnackbar({
+                messageSection: 'invoicing_payment_recorded',
+                messageText: 'failed',
+                type: 'error',
+            }),
+        ])));
     }
     const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/payments`;
     const data = localDataToRecordPaymentPayload(draft);
@@ -49,9 +71,29 @@ export const recordPaymentEpic = (actions$, state$, zeniAPI) => actions$.pipe(fi
             if (linkedInvoiceId != null) {
                 successActions.push(fetchInvoiceDetail({ invoiceId: linkedInvoiceId }));
             }
+            successActions.push(openSnackbar({
+                messageSection: 'invoicing_payment_recorded',
+                messageText: 'success',
+                type: 'success',
+            }));
             return successActions;
         }
-        return of(recordPaymentFailure(response.status));
-    }), catchError((error) => of(recordPaymentFailure(createZeniAPIStatus('Unexpected Error', 'Record payment REST API call errored out ' +
-        JSON.stringify(error))))));
+        return from([
+            recordPaymentFailure(response.status),
+            openSnackbar({
+                messageSection: 'invoicing_payment_recorded',
+                messageText: 'failed',
+                type: 'error',
+                variables: apiErrorSnackbarVariables(response.status),
+            }),
+        ]);
+    }), catchError((error) => from([
+        recordPaymentFailure(createZeniAPIStatus('Unexpected Error', 'Record payment REST API call errored out ' +
+            JSON.stringify(error))),
+        openSnackbar({
+            messageSection: 'invoicing_payment_recorded',
+            messageText: 'failed',
+            type: 'error',
+        }),
+    ])));
 }));

package/lib/esm/view/invoicing/settingsView/settingsViewEpics.js

@@ -1,7 +1,9 @@
-import { of } from 'rxjs';
+import { from, of } from 'rxjs';
 import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
 import { updateAddresses } from '../../../entity/address/addressReducer';
-import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../responsePayload';
 import { connectInvoicingStripe, disconnectInvoicingStripe, fetchInvoicingSettings, invoicingStripeConnectionFailure, saveInvoicingSettings, saveInvoicingSettingsFailure, saveInvoicingSettingsSuccess, updateInvoicingSettings, updateInvoicingSettingsFailure, updateInvoicingStripeConnection, } from './settingsViewReducer';
 export const fetchInvoicingSettingsEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSettings.match), switchMap(() => {
     const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/settings`;
@@ -57,15 +59,34 @@ export const disconnectInvoicingStripeEpic = (actions$, _state$, zeniAPI) => act
 }));
 export const saveInvoicingSettingsEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(saveInvoicingSettings.match), 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
+        ? []
+        : [
+            openSnackbar({
+                messageSection: snackbarSection,
+                messageText,
+                type: messageText === 'success' ? 'success' : 'error',
+                variables: apiErrorSnackbarVariables(status),
+            }),
+        ];
     return zeniAPI
-        .putAndGetJSON(apiUrl, {
-        ...action.payload,
-    })
+        .putAndGetJSON(apiUrl, { ...settings })
         .pipe(switchMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
-            return of(saveInvoicingSettingsSuccess(response.data));
+            return from([
+                saveInvoicingSettingsSuccess(response.data),
+                ...snackbar('success'),
+            ]);
         }
-        return of(saveInvoicingSettingsFailure(response.status));
-    }), catchError((error) => of(saveInvoicingSettingsFailure(createZeniAPIStatus('Unexpected Error', 'Save settings REST API call errored out ' +
-        JSON.stringify(error))))));
+        return from([
+            saveInvoicingSettingsFailure(response.status),
+            ...snackbar('failed', response.status),
+        ]);
+    }), catchError((error) => from([
+        saveInvoicingSettingsFailure(createZeniAPIStatus('Unexpected Error', 'Save settings REST API call errored out ' +
+            JSON.stringify(error))),
+        ...snackbar('failed'),
+    ])));
 }));

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

@@ -30,7 +30,7 @@ const settingsView = createSlice({
         saveInvoicingSettings(draft, action) {
             draft.saveFetchState = { fetchState: 'In-Progress', error: undefined };
             if (draft.settings != null) {
-                draft.settings = { ...draft.settings, ...action.payload };
+                draft.settings = { ...draft.settings, ...action.payload.settings };
             }
         },
         saveInvoicingSettingsSuccess(draft, action) {

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

@@ -1,4 +1,6 @@
+import { getInvoicingQboAccountMappingId, } from '../../../entity/invoicing/invoicingCommonPayload';
 import { getFormattedAddress } from '../../addressView/addressViewSelector';
+import { getInvoicingConfigView } from '../invoicingConfigView/invoicingConfigViewSelector';
 import { INVOICING_BUSINESS_ADDRESS_TYPE, entityToInvoicingBrandingFormLocalData, } from './invoicingBrandingFormConfig';
 /**
  * Shared primitive: the raw invoicing settings. Consumed internally by other
@@ -29,11 +31,63 @@ export const getInvoicingSettingsView = (state) => {
         stripeConnectState: stripeFetchState,
     };
 };
+/**
+ * Gates the Enable Invoicing action: payments must be able to land (Stripe
+ * connected *and* accepting charges) and the QBO accounting step must be
+ * finished, so an enabled tenant can always book what it invoices.
+ *
+ * Deliberately not part of `deriveInvoicingOnboardingStatus`, which routes the
+ * module off the config flags alone. Folding these in there would (a) demote a
+ * live tenant to the settings tree the moment an integration broke, stranding
+ * its existing invoices, and (b) deadlock the route gate, which fetches only the
+ * config — never the settings or QBO connection these read.
+ */
+export function deriveInvoicingEnablePrerequisites(settings, isQboConnected, qboAccountMappingKindOptions) {
+    const isStripeConnected = settings?.stripe_connected === true &&
+        settings?.stripe_account?.charges_enabled === true;
+    const accountMappings = settings?.qbo?.account_mappings ?? undefined;
+    // An empty option list means the config has not landed yet — treating that as
+    // configured would let `every` pass vacuously and unlock the button early.
+    const isQboConfigured = isQboConnected &&
+        qboAccountMappingKindOptions.length > 0 &&
+        qboAccountMappingKindOptions.every((option) => getInvoicingQboAccountMappingId(accountMappings, option.code) != null);
+    return {
+        canEnable: isStripeConnected && isQboConfigured,
+        isQboConfigured,
+        isStripeConnected,
+    };
+}
+/**
+ * The settings hub's composite of everything it derives from the store: whether
+ * to offer Enable Invoicing at all, the in-flight flag for that action, and the
+ * two integration prerequisites kept separate so the hub can name the step still
+ * outstanding instead of showing a dead button.
+ *
+ * `canEnableInvoicing` folds in the onboarding step, so the screen does not need
+ * to re-check it: the footer is only offered mid-onboarding and only once both
+ * integrations are ready.
+ *
+ * Deliberately not folded into `getInvoicingConfigView`: that selector gates
+ * every invoicing route and stays a pure read of the config slice. The settings
+ * and QBO slices read here are only fetched once a settings screen is mounted.
+ */
+export const getInvoicingSettingsHubView = (state) => {
+    const { enableState, qboAccountMappingKindOptions, status } = getInvoicingConfigView(state);
+    const { canEnable, isQboConfigured, isStripeConnected } = deriveInvoicingEnablePrerequisites(state.invoicingSettingsViewState.settings, state.invoicingQboViewState.connection?.connected === true, qboAccountMappingKindOptions);
+    return {
+        canEnableInvoicing: status === 'settings' && canEnable,
+        isEnablingInvoicing: enableState.fetchState === 'In-Progress',
+        isQboConfigured,
+        isStripeConnected,
+        status,
+    };
+};
 /**
  * Bundled view for the branding settings form: the draft `localData` (seeded
  * from the existing settings until the user edits), the business-address label
  * (from the shared Address screen, seeded on load from `address_id`), the raw
- * settings (for the logo/preview) and the save fetch state.
+ * settings (for the logo/preview), the backend date-format choices and the
+ * save fetch state.
  */
 export const getInvoicingBrandingFormView = (state) => {
     const { brandingDraft, saveFetchState, settings } = state.invoicingSettingsViewState;
@@ -43,6 +97,7 @@ export const getInvoicingBrandingFormView = (state) => {
         : undefined;
     return {
         addressLabel,
+        dateFormatOptions: getInvoicingConfigView(state).dateFormatOptions,
         localData: brandingDraft ?? entityToInvoicingBrandingFormLocalData(settings),
         saveState: saveFetchState,
         settings,

package/lib/esm/view/invoicing/subscriptionAction/subscriptionActionEpic.js

@@ -1,13 +1,41 @@
-import { of } from 'rxjs';
+import { from } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateAddresses } from '../../../entity/address/addressReducer';
 import { extractInvoicingSubscriptionAddresses } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionPayload';
 import { updateInvoicingSubscriptions } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionReducer';
-import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
+import { apiErrorSnackbarVariables } from '../../../entity/snackbar/snackbarApiError';
+import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
+import { createZeniAPIStatus, isSuccessResponse, } from '../../../responsePayload';
 import { runInvoicingSubscriptionAction, runInvoicingSubscriptionActionFailure, runInvoicingSubscriptionActionSuccess, } from './subscriptionActionReducer';
+/**
+ * Each lifecycle action reports with its own copy. Keyed loosely because the
+ * action payload carries a plain `string`; an unmapped kind stays silent.
+ */
+const SNACKBAR_SECTION_BY_ACTION = {
+    activate: 'invoicing_subscription_activated',
+    cancel: 'invoicing_subscription_cancelled',
+    change_term_end: 'invoicing_subscription_term_end_changed',
+    pause: 'invoicing_subscription_paused',
+    reactivate: 'invoicing_subscription_reactivated',
+    remove_scheduled_cancellation: 'invoicing_subscription_cancellation_removed',
+    resume: 'invoicing_subscription_resumed',
+    set_non_renewing: 'invoicing_subscription_non_renewing',
+};
 export const runInvoicingSubscriptionActionEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(runInvoicingSubscriptionAction.match), mergeMap((action) => {
     const { action: kind, body, id } = action.payload;
     const requestBody = { action: kind, ...(body ?? {}) };
+    const snackbarSection = SNACKBAR_SECTION_BY_ACTION[kind];
+    /** `status` surfaces the platform's error text; omit it to keep the generic copy. */
+    const snackbar = (messageText, status) => snackbarSection == null
+        ? []
+        : [
+            openSnackbar({
+                messageSection: snackbarSection,
+                messageText,
+                type: messageText === 'success' ? 'success' : 'error',
+                variables: apiErrorSnackbarVariables(status),
+            }),
+        ];
     const apiUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions/${encodeURIComponent(id)}/actions`;
     return zeniAPI
         .postAndGetJSON(apiUrl, requestBody)
@@ -17,15 +45,22 @@ export const runInvoicingSubscriptionActionEpic = (actions$, _state$, zeniAPI) =
                 updateInvoicingSubscriptions([response.data], 'merge'),
                 updateAddresses(extractInvoicingSubscriptionAddresses([response.data])),
                 runInvoicingSubscriptionActionSuccess({ id }),
+                ...snackbar('success'),
             ];
         }
-        return of(runInvoicingSubscriptionActionFailure({
-            error: response.status,
+        return from([
+            runInvoicingSubscriptionActionFailure({
+                error: response.status,
+                id,
+            }),
+            ...snackbar('failed', response.status),
+        ]);
+    }), catchError((error) => from([
+        runInvoicingSubscriptionActionFailure({
+            error: createZeniAPIStatus('Unexpected Error', 'Subscription action REST API call errored out ' +
+                JSON.stringify(error)),
             id,
-        }));
-    }), catchError((error) => of(runInvoicingSubscriptionActionFailure({
-        error: createZeniAPIStatus('Unexpected Error', 'Subscription action REST API call errored out ' +
-            JSON.stringify(error)),
-        id,
-    }))));
+        }),
+        ...snackbar('failed'),
+    ])));
 }));