Feature: Notification Placeholder component

src/NotificationPlaceholder/hooks/index.ts

@@ -0,0 +1,50 @@
+import {useState} from 'react';
+
+declare const window: {
+    givewpNotifications: {
+        apiNonce: string;
+        notifications: {
+            user: string[];
+            system: string[];
+        };
+    };
+} & Window;
+
+export type NotificationType = 'user' | 'system';
+
+/**
+ * Dismiss a notification
+ */
+const dismissNotification = async (id: string, type: NotificationType) => {
+    const response = await fetch('/wp-json/give-api/v2/dismiss-notification', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-WP-Nonce': window.givewpNotifications.apiNonce,
+        },
+        body: JSON.stringify({
+            notification: id,
+            type
+        }),
+    });
+
+    return response.ok ? await response.json() : [];
+};
+
+/**
+ * Hook
+ */
+export const useNotifications = (type: NotificationType): [Array<string>, Function] => {
+    const [notifications, setNotifications] = useState(
+        window.givewpNotifications.notifications[type]
+    );
+
+    return [
+        notifications,
+        (id: string) => {
+            dismissNotification(id, type).then((notifications) => {
+                setNotifications(notifications);
+            });
+        },
+    ];
+};

src/NotificationPlaceholder/index.ts

@@ -0,0 +1,20 @@
+import {MouseEventHandler} from 'react';
+import {useNotifications, NotificationType} from './hooks';
+
+interface NotificationProps {
+    id: string;
+    render: (dismiss: MouseEventHandler) => JSX.Element,
+    type?: NotificationType;
+}
+
+export default ({id, render, type = 'user'}: NotificationProps) => {
+    const [notifications, dismissNotification] = useNotifications(type);
+
+    if (notifications.includes(id)) {
+        return null;
+    }
+
+    return render(() => {
+        dismissNotification(id)
+    });
+}

src/NotificationPlaceholder/readme.md

@@ -0,0 +1,45 @@
+## Notification types
+There are two notification types, `user` and `system`.
+User type notifications when dismissed, won't be shown again only to the user that dismissed the notification, while system notifications when dismissed, won't be shown again to any user.
+You will probably use `user` type notifications 99% of the time, but sometimes in some special cases like upgrade action that can be done only once for all users, you might want to use `system` type notifications.
+
+## Usage
+
+```jsx
+import {NotificationPlaceholder} from '@givewp/form-builder-library';
+
+function App() {
+    return (
+        <div>
+            <h1>
+                My app title
+            </h1>
+            <NotificationPlaceholder
+                id="notificationUniqueId"
+                render={dismiss => (
+                    <div>
+                        <p>User notification - if dismissed it won't be shown again to this user only.</p>
+                        <button onClick={dismiss}>Dismiss</button>
+                    </div>
+                )}
+            />
+
+            <NotificationPlaceholder
+                id="sysNotificationUniqueId"
+                type="system"
+                render={dismiss => (
+                    <div>
+                        <p>System notification - if dismissed it won't be shown again to any user.</p>
+                        <button onClick={dismiss}>Dismiss</button>
+                    </div>
+                )}
+            />
+
+            <div>
+                My app content
+            </div>
+        </div>
+    );
+
+}
+```

src/index.ts

@@ -3,3 +3,4 @@ export {default as ClassicEditor} from "./ClassicEditor";
 export {default as OptionsPanel} from "./OptionsPanel";
 export {default as SettingsSection} from "./SettingsSection";
 export {default as BlockNotice} from "./BlockNotice";
+export {default as NotificationPlaceholder} from "./NotificationPlaceholder";