2.11

.gitignore

@@ -7,4 +7,5 @@ node_modules/*
 vendor
 assets/.DS_Store
 .php-cs-fixer.cache
-.wp-env.json
+.wp-env.json
+assets/js/admin/notification-system/*

Modula.php

@@ -4,7 +4,7 @@
 * Plugin URI:               https://wp-modula.com/
 * Description:              Modula is the most powerful, user-friendly WordPress gallery plugin. Add galleries, masonry grids and more in a few clicks.
 * Author:                   WPChill
-* Version:                  2.10.3
+* Version:                  2.11.0
 * Author URI:               https://www.wpchill.com/
 * License:                  GPLv3 or later
 * License URI:              http://www.gnu.org/licenses/gpl-3.0.html
@@ -47,11 +47,12 @@
  * @since    2.0.2
  */
 
-define( 'MODULA_LITE_VERSION', '2.10.3' );
+define( 'MODULA_LITE_VERSION', '2.11.0' );
 define( 'MODULA_PATH', plugin_dir_path( __FILE__ ) );
 define( 'MODULA_URL', plugin_dir_url( __FILE__ ) );
 defined( 'MODULA_PRO_STORE_URL' ) || define( 'MODULA_PRO_STORE_URL', 'https://wp-modula.com' );
 defined( 'MODULA_PRO_STORE_UPGRADE_URL' ) || define( 'MODULA_PRO_STORE_UPGRADE_URL', 'https://wp-modula.com/pricing' );
+define( 'MODULA_REMOTE_NOTIFICATIONS_URL', 'https://wp-modula.com/wp-json/notifications/v1/get' );
 define( 'MODULA_FILE', plugin_basename( __FILE__ ) );
 
 define( 'MODULA_LITE_TRANSLATE', dirname( plugin_basename( __FILE__ ) ) . '/languages' );

apps/notification-system/index.js

@@ -0,0 +1,31 @@
+import './index.scss';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './query/client';
+import { Notifications } from './notifications';
+import { StateProvider } from './state/state';
+import { createRoot } from '@wordpress/element';
+
+document.addEventListener('DOMContentLoaded', () => {
+	const postsContainer = document.getElementById('wpwrap');
+	if (postsContainer) {
+		const div = document.createElement('div');
+		const wrapper = document.createElement('div');
+		wrapper.setAttribute('id', 'modula-notifications-wrapper');
+		wrapper.classList.add('modula-best-grid-gallery');
+		div.setAttribute('id', 'modula-notifications-root');
+
+		postsContainer.prepend(wrapper);
+		wrapper.appendChild(div);
+		const root = createRoot(
+			document.getElementById('modula-notifications-root')
+		);
+
+		root.render(
+			<QueryClientProvider client={queryClient}>
+				<StateProvider>
+					<Notifications />
+				</StateProvider>
+			</QueryClientProvider>
+		);
+	}
+});

apps/notification-system/index.scss

@@ -0,0 +1,109 @@
+#modula-notifications-root {
+	position: fixed;
+	right: 20px;
+	bottom: 25px;
+	z-index: 9999;
+	padding: 10px;
+	.notification-log-empty{
+		padding: 5px;
+	}
+	.notification-container {
+		position: absolute;
+		width: 500px;
+		right: 0;
+		bottom: 80px;
+		background: #fff;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+		.notification-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 8px;
+			background-color: #f9f9f9;
+			border-bottom: 0;
+			h2 {
+				font-size: 1.1em;
+				margin: 8px;
+			}
+			button{
+				.dashicons{
+					margin: 0;
+				}
+			}
+		}
+		.notification-footer {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: #f9f9f9;
+		}
+		.notification-state {
+			width: 10px;
+			height: 10px;
+			margin-right: 10px;
+			border-radius: 50%;
+			position: relative;
+			top: 1px;
+
+		}
+		.notification-state.error{
+			background-color: #d63638;
+		}
+		.notification-state.warning{
+			background-color: #dba617;
+		}
+		.notification-state.info{
+			background-color: #2271b1;
+		}
+		.notification-state.success{
+			background-color: #00a32a;
+		}
+		.notification_dismiss_button{
+			margin-left: auto;
+			padding: 0;
+			height: auto;
+		}
+		.components-panel {
+			max-height: 250px;
+			overflow: auto;
+			.notification-row{
+				.notification-actions-wrapp{
+					a, button{
+						margin-right: 10px;
+					}
+				}
+			}
+		}
+	}
+	.notification-icon {
+		width: 45px;
+		height: 45px;
+		border-radius: 50%;
+		border: 1px solid #222222;
+		box-shadow: 0 0 5px #222222 ;
+		background: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		cursor: pointer;
+		padding: 4px;
+		.warn-icon {
+			position: absolute;
+			top: -6px;
+			left: -8px;
+			color: #fff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background-color: #d63638;
+		}
+
+		.notification-icon-img {
+			width: 100%;
+		}
+	}
+}

apps/notification-system/notification-icon.jsx

@@ -0,0 +1,20 @@
+import modulaIcon from './images/modula-logo-black.png';
+import { useModulaState } from './state/use-modula-state';
+import { setShowContainer } from './state/actions';
+
+export function NotificationIcon( { notifications } ) {
+	const { state, dispatch } = useModulaState();
+	const { showContainer, visibleNotifications } = state;
+	const handleClick = () => {
+		dispatch( setShowContainer( showContainer? false: true ) );
+	};
+
+	return (
+		<div className="notification-icon" onClick={handleClick}>
+			<img src={modulaIcon} className="notification-icon-img"/>
+			<span className="warn-icon">
+				{visibleNotifications.length}
+			</span>
+		</div>
+	);
+}

apps/notification-system/notification/notification-actions.jsx

@@ -0,0 +1,34 @@
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import he from 'he';
+
+export function NotificationActions( { actions, id, onDismiss } ) {
+
+	const handleClick = (action, id) => {
+		if (action.callback && typeof window[action.callback] === 'function') {
+			window[action.callback](action, id);
+		}
+
+		if (action.dismiss) {
+			onDismiss(id);
+		}
+	};
+
+	return (
+		<div className="notification-actions-wrapp">
+			{actions.map((action, index) => (
+				<Button
+					key={index}
+					className={action.class || 'notification-action'}
+					{...(action.url ? { href: action.url } : {})}
+					{...(action.id ? { id: action.id } : {})}
+					target={action.target || ''}
+					text={he.decode(action.label || __('Action', 'modula-best-grid-gallery'))}
+					variant={action.variant || 'secondary'}
+					size={action.size || 'small'}
+					onClick={() => handleClick(action, id)}
+				/>
+			))}
+		</div>
+	);
+}

apps/notification-system/notification/notifications-footer.jsx

@@ -0,0 +1,19 @@
+import { __ } from '@wordpress/i18n';
+import { useModulaState } from '../state/use-modula-state';
+import { setClosedBubble } from '../state/actions';
+import { Button } from '@wordpress/components';
+import { useNotificationsDismiss } from '../query/useNotificationsDismiss';
+export function NotificationsFooter() {
+	const { dispatch } = useModulaState();
+	const mutation = useNotificationsDismiss();
+	const closePanel = () => {
+		dispatch( setClosedBubble( true ) );
+		mutation.mutate();
+	};
+
+	return(
+			<Button className="dismiss_all_notifications" onClick={closePanel}>
+				{__(' Dismiss All Notifications', 'modula-best-grid-gallery')}
+			</Button>
+		);
+}

apps/notification-system/notification/notifications-head.jsx

@@ -0,0 +1,19 @@
+import { __ } from '@wordpress/i18n';
+import { useModulaState } from '../state/use-modula-state';
+import { setShowContainer } from '../state/actions';
+import { Button } from '@wordpress/components';
+
+export function NotificationsHead() {
+	const { dispatch } = useModulaState();
+
+	const closePanel = () => {
+		dispatch( setShowContainer( false ) );
+	};
+
+	return  <>
+				<h2>{__('Modula Notification Center', 'modula-best-grid-gallery')}</h2>
+				<Button onClick={closePanel}>
+					<span className="dashicons dashicons-no-alt" ></span>
+				</Button>
+			</>;
+}

apps/notification-system/notification/notifications-list.jsx

@@ -0,0 +1,82 @@
+import { useEffect } from '@wordpress/element';
+import { Panel, PanelBody, PanelRow, __experimentalText as Text, Button } from '@wordpress/components';
+import { Markup } from 'interweave';
+import { __ } from '@wordpress/i18n';
+import { useNotificationDismiss } from '../query/useNotificationDismiss';
+import { useQueryClient } from '@tanstack/react-query';
+import { NotificationActions } from './notification-actions';
+import { useModulaState } from '../state/use-modula-state';
+import { setOpenPanels, setVisibleNotifications } from '../state/actions';
+
+export function NotificationsList() {
+	const mutation = useNotificationDismiss();
+	const queryClient = useQueryClient();
+	const { state, dispatch } = useModulaState();
+	const {visibleNotifications, openPanels} = state;
+
+	const dismissNotification = (id) => {
+		mutation.mutate( id, {
+			onSettled: () => {
+				queryClient.invalidateQueries(['notifications']);
+			},
+		} );
+		setVisibleNotifications(prevNotifications =>
+			prevNotifications.filter(notification => notification.id !== id)
+		);
+    };
+
+	useEffect(() => {
+
+		visibleNotifications.forEach( (notification) => {
+			if (notification.timed && openPanels.includes( notification.id ) ) {
+				setTimeout(() => {
+					dismissNotification(notification.id);
+				}, notification.timed);
+			}
+		});
+
+	}, [visibleNotifications, openPanels] );
+
+	const handleTogglePanel = (id) => {
+		dispatch(setOpenPanels( [ ...openPanels, id ]));
+	};
+
+	return (
+		<Panel>
+			{visibleNotifications?.length === 0 && (
+				<div className="notification-log-empty">
+					<Text>{__('No notifications!', 'modula-best-grid-gallery')}</Text>
+				</div>
+			)}
+			{visibleNotifications?.length > 0 &&
+				visibleNotifications?.map((notification) => (
+					<PanelBody
+						title={
+							<>
+								<span className={`notification-state ${notification?.status}`}></span>
+								<span className="notification-title">{notification?.title}</span>
+							</>
+						}
+						key={notification?.id}
+						initialOpen={false}
+						isOpen={openPanels.includes( notification.id )}
+						onToggle={() => handleTogglePanel(notification.id)}
+					>
+						<PanelRow className='notification-row'>
+							<Text variant="muted">
+								<Markup content={notification.message} />
+							</Text>
+							{ (notification?.dismissible === undefined || notification.dismissible) && 
+							<Button className="notification_dismiss_button" onClick={() => dismissNotification(notification.id)}>
+								{__('Dismiss', 'modula-best-grid-gallery')}
+							</Button>}
+						</PanelRow>
+						{(notification?.actions !== undefined && notification.actions.length > 0) && 
+						<PanelRow className='notification-row'>
+							<NotificationActions actions={notification.actions} id={notification.id} onDismiss={dismissNotification} />
+						</PanelRow>}
+					</PanelBody>
+				))}
+		</Panel>
+	);
+}

apps/notification-system/notifications-container.jsx

@@ -0,0 +1,19 @@
+import { __ } from '@wordpress/i18n';
+import { NotificationsList } from './notification/notifications-list';
+import { NotificationsHead } from './notification/notifications-head';
+import { NotificationsFooter } from './notification/notifications-footer';
+
+export function NotificationsContainer() {
+
+	return (
+		<div className="notification-container">
+			<div className="notification-header">
+				<NotificationsHead />
+			</div>
+			<NotificationsList />
+			<div className="notification-footer">
+				<NotificationsFooter />
+			</div>
+		</div>
+	);
+}