Fix settings notifications (4672)

modules/ppcp-settings/resources/css/components/_app.scss

@@ -2,6 +2,10 @@
  * Global app-level styles
  */
 
+.ppcp-r-app {
+	position: relative;
+}
+
 .ppcp-r-app.loading {
 	.ppcp-r-spinner-overlay {
 		display: flex;

modules/ppcp-settings/resources/css/components/_reusable.scss

@@ -7,6 +7,7 @@
 @import './reusable-components/fields';
 @import './reusable-components/help-section';
 @import './reusable-components/navigation';
+@import './reusable-components/notifications';
 @import './reusable-components/onboarding-header';
 @import './reusable-components/payment-method-icons';
 @import './reusable-components/select-box';

modules/ppcp-settings/resources/css/components/reusable-components/_notifications.scss

@@ -0,0 +1,95 @@
+.ppcp-r-notifications {
+	position: fixed;
+	bottom: 0;
+	left: 160px;
+	width: calc(100% - 160px);
+	pointer-events: none;
+	z-index: 100001;
+
+	// Collapsed sidebar
+	.folded & {
+		left: 36px;
+		width: calc(100% - 36px);
+	}
+
+	// Auto-fold breakpoint
+	@media screen and (max-width: 960px) {
+		left: 36px;
+		width: calc(100% - 36px);
+	}
+
+	// Mobile - no sidebar
+	@media screen and (max-width: 782px) {
+		left: 0;
+		width: 100%;
+	}
+
+	.components-snackbar-list__notice-container {
+		position: absolute;
+		left: 16px;
+		bottom: 12px;
+		pointer-events: auto;
+	}
+
+	.components-snackbar.components-snackbar {
+		backdrop-filter: blur(16px) saturate(180%);
+		background: #000000d9;
+		border-radius: 4px;
+		box-shadow:
+			0 1px 2px #0000000d,
+			0 2px 3px #0000000a,
+			0 6px 6px #00000008,
+			0 8px 8px #00000005;
+		box-sizing: border-box;
+		color: #fff;
+		cursor: pointer;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 13px;
+		line-height: 1.4;
+		max-width: 600px;
+		padding: 12px 20px;
+		width: 100%;
+
+		@media (min-width: 600px) {
+			width: fit-content;
+		}
+
+		&.components-snackbar-explicit-dismiss {
+			cursor: default;
+		}
+
+		.components-snackbar__content {
+			display: flex;
+			align-items: center;
+			white-space: pre-line;
+			font-family: inherit;
+			font-size: inherit;
+			line-height: inherit;
+		}
+
+		.components-snackbar__content-with-icon {
+			padding-left: 0;
+			margin-left: 0;
+		}
+
+		.components-snackbar__icon {
+			position: static;
+			display: flex;
+			flex-shrink: 0;
+			margin-right: 8px;
+		}
+
+		.components-snackbar__dismiss-button {
+			margin-left: 32px;
+			cursor: pointer;
+			background: none;
+			border: none;
+			padding: 0;
+			color: #fff;
+			font-family: inherit;
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 1;
+		}
+	}
+}

modules/ppcp-settings/resources/js/Components/App.js

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
 import classNames from 'classnames';
 
 import { OnboardingHooks, CommonHooks } from '@ppcp-settings/data';
+import Notifications from './ReusableComponents/Notifications';
 import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
 import SendOnlyMessage from './Screens/SendOnlyMessage';
 import OnboardingScreen from './Screens/Onboarding';
@@ -81,7 +82,12 @@ const SettingsApp = () => {
 		activePanel,
 	] );
 
-	return <div className={ wrapperClass }>{ Content }</div>;
+	return (
+		<div className={ wrapperClass }>
+			{ Content }
+			<Notifications />
+		</div>
+	);
 };
 
 export default SettingsApp;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js

@@ -1,6 +1,40 @@
+import { SVG, Path } from '@wordpress/primitives';
+
 export { default as PPIcon } from './GenericIcon';
 export { default as OpenSignup } from './OpenSignup';
 export { default as LogoPayPal } from './LogoPayPal';
 
-export const NOTIFICATION_SUCCESS = '✔️';
-export const NOTIFICATION_ERROR = '❌';
+/**
+ * Success checkmark icon
+ */
+export const SuccessIcon = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		fill="#1ed15a"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
+	</SVG>
+);
+
+/**
+ * Error icon for error notifications
+ */
+export const ErrorIcon = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		fill="#d63638"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+	</SVG>
+);
+

modules/ppcp-settings/resources/js/Components/ReusableComponents/Notifications.js

@@ -0,0 +1,22 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { SnackbarList } from '@wordpress/components';
+
+const Notifications = () => {
+	const notices = useSelect(
+		( select ) => select( noticesStore ).getNotices(),
+		[]
+	);
+
+	const { removeNotice } = useDispatch( noticesStore );
+
+	return (
+		<SnackbarList
+			className="ppcp-r-notifications"
+			notices={ notices }
+			onRemove={ removeNotice }
+		/>
+	);
+};
+
+export default Notifications;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features/Features.js

@@ -1,7 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
 import FeatureItem from './FeatureItem';
 import FeatureDescription from './FeatureDescription';
 import { ContentWrapper } from '@ppcp-settings/Components/ReusableComponents/Elements';
@@ -11,20 +10,16 @@ import {
 	useWooSettings,
 } from '@ppcp-settings/data/common/hooks';
 import { STORE_NAME as COMMON_STORE_NAME } from '@ppcp-settings/data/common';
-import {
-	NOTIFICATION_ERROR,
-	NOTIFICATION_SUCCESS,
-} from '@ppcp-settings/Components/ReusableComponents/Icons';
 import { useFeatures } from '@ppcp-settings/data/features/hooks';
+import useNotices from '@ppcp-settings/hooks/useNotices';
 
 const Features = () => {
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 	const { merchant } = useMerchantInfo();
 	const { storeCountry } = useWooSettings();
 	const { features, fetchFeatures } = useFeatures();
 	const { refreshFeatureStatuses } = useDispatch( COMMON_STORE_NAME );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
+	const { createSuccessNotice, createErrorNotice } = useNotices();
 
 	if ( ! features || features.length === 0 ) {
 		return null;
@@ -53,11 +48,7 @@ const Features = () => {
 					__(
 						'Features refreshed successfully.',
 						'woocommerce-paypal-payments'
-					),
-					{
-						icon: NOTIFICATION_SUCCESS,
-						speak: true,
-					}
+					)
 				);
 			} else {
 				throw new Error(
@@ -71,11 +62,7 @@ const Features = () => {
 					__( 'Operation failed: %s', 'woocommerce-paypal-payments' ),
 					error.message ||
 						__( 'Unknown error', 'woocommerce-paypal-payments' )
-				),
-				{
-					icon: NOTIFICATION_ERROR,
-					speak: true,
-				}
+				)
 			);
 		} finally {
 			setIsRefreshing( false );

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Todos/Todos.js

@@ -3,13 +3,12 @@ import { useState } from '@wordpress/element';
 import { Button, Icon } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { reusableBlock } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
 import { TodoSettingsBlock } from '@ppcp-settings/Components/ReusableComponents/SettingsBlocks';
 import SettingsCard from '@ppcp-settings/Components/ReusableComponents/SettingsCard';
 import { useTodos } from '@ppcp-settings/data/todos/hooks';
 import { STORE_NAME as COMMON_STORE_NAME } from '@ppcp-settings/data/common';
 import { STORE_NAME as TODOS_STORE_NAME } from '@ppcp-settings/data/todos';
-import { NOTIFICATION_SUCCESS } from '@ppcp-settings/Components/ReusableComponents/Icons';
+import useNotices from '@ppcp-settings/hooks/useNotices';
 
 const Todos = () => {
 	const [ isResetting, setIsResetting ] = useState( false );
@@ -18,7 +17,7 @@ const Todos = () => {
 	const { setActiveModal } = useDispatch( COMMON_STORE_NAME );
 	const { resetDismissedTodos, setDismissedTodos } =
 		useDispatch( TODOS_STORE_NAME );
-	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { createSuccessNotice } = useNotices();
 
 	const showTodos = areTodosReady && todos.length > 0;
 
@@ -32,11 +31,7 @@ const Todos = () => {
 				__(
 					'Dismissed items restored successfully.',
 					'woocommerce-paypal-payments'
-				),
-				{
-					icon: NOTIFICATION_SUCCESS,
-					speak: true,
-				}
+				)
 			);
 		} finally {
 			setIsResetting( false );

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js

@@ -1,19 +1,14 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
 
 import { STORE_NAME } from '@ppcp-settings/data/common';
 import { ControlButton } from '@ppcp-settings/Components/ReusableComponents/Controls';
-import {
-	NOTIFICATION_ERROR,
-	NOTIFICATION_SUCCESS,
-} from '@ppcp-settings/Components/ReusableComponents/Icons';
 import SettingsBlock from '@ppcp-settings/Components/ReusableComponents/SettingsBlock';
+import useNotices from '@ppcp-settings/hooks/useNotices';
 
 const ResubscribeBlock = () => {
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
+	const { createSuccessNotice, createErrorNotice } = useNotices();
 	const [ resubscribing, setResubscribing ] = useState( false );
 
 	const { resubscribeWebhooks } = useDispatch( STORE_NAME );
@@ -28,10 +23,7 @@ const ResubscribeBlock = () => {
 				__(
 					'Operation failed. Check WooCommerce logs for more details.',
 					'woocommerce-paypal-payments'
-				),
-				{
-					icon: NOTIFICATION_ERROR,
-				}
+				)
 			);
 			return;
 		}
@@ -41,10 +33,7 @@ const ResubscribeBlock = () => {
 			__(
 				'Webhooks were successfully re-subscribed.',
 				'woocommerce-paypal-payments'
-			),
-			{
-				icon: NOTIFICATION_SUCCESS,
-			}
+			)
 		);
 	};