Add global notices

Author: irshadahmad21

packages/js/services/wp/use-display-feedback.ts

@@ -0,0 +1,59 @@
+import { __ } from '@wpsocio/i18n';
+import { useGlobalNotices } from '@wpsocio/ui/wp/global-notices';
+import { FORM_ERROR } from '@wpsocio/utilities/constants.js';
+import { getErrorStrings } from '@wpsocio/utilities/misc.js';
+import type { AnyObject } from '@wpsocio/utilities/types.js';
+import { useCallback, useMemo } from 'react';
+
+interface DisplayFeedback {
+	displayValidationErrors: (errors: AnyObject, error?: string) => void;
+	displaySubmitErrors: (errors: AnyObject, submitError?: string) => void;
+}
+
+type DF = DisplayFeedback;
+
+export const useDisplayFeedback = (): DF => {
+	const { createErrorNotice } = useGlobalNotices();
+
+	const displayErrors = useCallback(
+		(errors: AnyObject) => {
+			const errorStrings = getErrorStrings(errors);
+			for (const error of errorStrings) {
+				createErrorNotice(error);
+			}
+		},
+		[createErrorNotice],
+	);
+
+	const displaySubmitErrors = useCallback<DF['displaySubmitErrors']>(
+		({ [FORM_ERROR]: formError, ...errors }, submitError) => {
+			// biome-ignore lint/suspicious/noConsoleLog: <explanation>
+			console.log({ errors, submitError, formError });
+
+			if (submitError || formError) {
+				const title = submitError ?? formError;
+				createErrorNotice(title);
+			}
+			displayErrors(errors);
+		},
+		[displayErrors, createErrorNotice],
+	);
+
+	const displayValidationErrors = useCallback<DF['displayValidationErrors']>(
+		(errors, error) => {
+			const title =
+				typeof error === 'string' ? error : __('Lets fix these errors first.');
+			createErrorNotice(title);
+			displayErrors(errors);
+		},
+		[createErrorNotice, displayErrors],
+	);
+
+	return useMemo(
+		() => ({
+			displaySubmitErrors,
+			displayValidationErrors,
+		}),
+		[displaySubmitErrors, displayValidationErrors],
+	);
+};

packages/js/ui/package.json

@@ -46,7 +46,9 @@
 		"@radix-ui/react-tooltip": "^1.2.0",
 		"@wordpress/base-styles": "^6.2.0",
 		"@wordpress/components": "^29.8.0",
+		"@wordpress/data": "^10.22.0",
 		"@wordpress/icons": "^10.22.0",
+		"@wordpress/notices": "^5.26.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"copy-to-clipboard": "^3.3.3",

packages/js/ui/src/wp/global-notices/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Inspired by the same component in Jetpack.
+ */
+import { SnackbarList } from '@wordpress/components';
+import styles from './styles.module.scss';
+import { useGlobalNotices } from './use-global-notices.js';
+
+export type GlobalNoticesProps = {
+	maxVisibleNotices?: number;
+};
+
+/**
+ * Renders the global notices.
+ */
+export function GlobalNotices({ maxVisibleNotices = 3 }: GlobalNoticesProps) {
+	const { getNotices, removeNotice } = useGlobalNotices();
+
+	const snackbarNotices = getNotices()
+		// Filter to only include snackbar notices.
+		// @ts-expect-error - The type is not correctly inferred.
+		.filter(({ type }) => type === 'snackbar')
+		// Slices from the tail end of the list.
+		.slice(-maxVisibleNotices);
+
+	return (
+		<SnackbarList
+			notices={snackbarNotices}
+			className={styles['global-notices']}
+			onRemove={removeNotice}
+		/>
+	);
+}
+
+export * from './use-global-notices.js';

packages/js/ui/src/wp/global-notices/styles.module.scss

@@ -0,0 +1,28 @@
+@use '../../../wp-base-styles.scss' as gb;
+
+.global-notices {
+
+    &:global(.components-snackbar-list) {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        position: fixed;
+        inset-block-start: auto; // top
+        inset-block-end: 0.5rem; // bottom
+        inset-inline: 0; // left and right
+        // Modals have 100000, so this needs to be above them
+        z-index: 100001;
+
+        @include gb.break-small {
+            width: auto;
+            inset-inline: unset; // left and right
+            inset-block-end: 3rem;
+            inset-inline-end: 1rem;
+        }
+
+        @include gb.break-medium {
+            inset-block-end: 2rem;
+        }
+    }
+}

packages/js/ui/src/wp/global-notices/use-global-notices.ts

@@ -0,0 +1,50 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import type { WPNotice } from '@wordpress/notices/build-types/store/selectors.js';
+import { useCallback, useMemo } from 'react';
+
+type NoticesStore = ReturnType<(typeof noticesStore)['instantiate']>;
+
+export type TGlobalNotices = ReturnType<NoticesStore['getActions']> &
+	ReturnType<NoticesStore['getSelectors']>;
+
+/**
+ * The global notices hook.
+ *
+ * @return The global notices selectors and actions.
+ */
+export function useGlobalNotices() {
+	const actionCreators = useDispatch(noticesStore);
+	const notices = useSelect((select) => select(noticesStore).getNotices(), []);
+
+	const createNotice = useCallback<typeof actionCreators.createNotice>(
+		(status, content, options) => {
+			return actionCreators.createNotice(status, content, {
+				type: 'snackbar',
+				id: status + content,
+				...options,
+			});
+		},
+		[actionCreators.createNotice],
+	);
+
+	return useMemo<TGlobalNotices>(() => {
+		return {
+			...actionCreators,
+			createNotice,
+			createErrorNotice(content, options) {
+				return createNotice('error', content, options);
+			},
+			createInfoNotice(content, options) {
+				return createNotice('info', content, options);
+			},
+			createSuccessNotice(content, options) {
+				return createNotice('success', content, options);
+			},
+			createWarningNotice(content, options) {
+				return createNotice('warning', content, options);
+			},
+			getNotices: (): WPNotice[] => notices,
+		};
+	}, [actionCreators, createNotice, notices]);
+}