From 507b355f81420bd2fae6c991a027eb35a08c1b00 Mon Sep 17 00:00:00 2001
From: Enzo Batista <111511512+Enzo707@users.noreply.github.com>
Date: Tue, 30 May 2023 10:53:00 -0300
Subject: [PATCH] feat:update EmptyStatePresenter and share any notification
 dismiss event back to NotificationCenter (#3)

---
 .../src/NotificationsPanel.js                 |  6 +++-
 .../behaviors/NotificationFlyoutBehavior.js   |  3 ++
 .../src/presenters/EmptyStatePresenter.js     | 31 ++++++++++++-------
 .../src/presenters/stylesheet.js              | 13 ++++++--
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/notifications-panel/src/NotificationsPanel.js b/packages/notifications-panel/src/NotificationsPanel.js
index 58007c3d8f..1b707465b4 100644
--- a/packages/notifications-panel/src/NotificationsPanel.js
+++ b/packages/notifications-panel/src/NotificationsPanel.js
@@ -64,7 +64,9 @@ export default function NotificationsPanel(props) {
     alterCoordinates,
     anchorPoint,
     children,
+    emptyTitle,
     emptyMessage,
+    emptyImage,
     heading,
     indicatorTitle,
     loading,
@@ -74,6 +76,7 @@ export default function NotificationsPanel(props) {
     open,
     markAllAsReadTitle,
     onClickMarkAllAsRead,
+    onNotificationChanged,
     notifications: notificationsInput = children,
     unreadCount: controlledUnreadCount,
     stylesheet,
@@ -85,6 +88,7 @@ export default function NotificationsPanel(props) {
     <NotificationFlyoutBehavior
       unreadCount={controlledUnreadCount}
       notifications={notificationsInput}
+      notificationChanged={onNotificationChanged}
     >
       {({
         dismissNotification,
@@ -99,7 +103,7 @@ export default function NotificationsPanel(props) {
           onClickMarkAllAsRead={onClickMarkAllAsRead}
           heading={heading}>
           {notifications.length == 0 ? (
-            <EmptyStatePresenter message={emptyMessage} stylesheet={stylesheet} />
+            <EmptyStatePresenter title={emptyTitle} message={emptyMessage} image={emptyImage} stylesheet={stylesheet} />
           ) : (
             notifications.map(
               CreateNotificationRenderer({ dismissNotification })
diff --git a/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js b/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js
index c1574deaa1..4b306a9734 100644
--- a/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js
+++ b/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js
@@ -103,6 +103,9 @@ export default class NotificationFlyoutBehavior extends Component {
       // eslint-disable-next-line react/no-access-state-in-setstate
       dismissedNotifications: this.state.dismissedNotifications.concat(id),
     });
+    // This function let NotificationCenter knows about any change done in NotificationsPanel
+    // so then we could trigger the function that shares the NotificationCenter height to Dynamo
+    this.props.notificationChanged();
   };
 
   /**
diff --git a/packages/notifications-panel/src/presenters/EmptyStatePresenter.js b/packages/notifications-panel/src/presenters/EmptyStatePresenter.js
index b43a22800f..e18bd71816 100644
--- a/packages/notifications-panel/src/presenters/EmptyStatePresenter.js
+++ b/packages/notifications-panel/src/presenters/EmptyStatePresenter.js
@@ -7,23 +7,30 @@ import Bell from "./Bell.svg";
 import stylesheet from "./stylesheet";
 
 export default function EmptyStatePresenter({
-  message,
-  stylesheet: customStylesheet,
+	title,
+	message,
+	image,
+	stylesheet: customStylesheet,
 }) {
-  const styles = stylesheet({ stylesheet: customStylesheet }, {});
-  return (
-    <div className={css(styles.emptyState)}>
-      <Bell role="presentation" className={css(styles.emptyStateImage)} />
-      <Typography style={styles.emptyStateMessage}>{message}</Typography>
-    </div>
-  );
+	const styles = stylesheet({ stylesheet: customStylesheet }, {});
+	const defaultImage = (
+		<Bell role="presentation" className={css(styles.emptyStateImage)} />
+	);
+	return (
+		<div className={css(styles.emptyState)}>
+			{image ? image : defaultImage}
+			<Typography variant={"h3"} style={styles.emptyStateTitle}>{title}</Typography>
+			<Typography style={styles.emptyStateMessage}>{message}</Typography>
+		</div>
+	);
 }
 
 EmptyStatePresenter.defaultProps = {
-  message: "You currently have no notifications",
+	message: "You currently have no notifications",
 };
 
 EmptyStatePresenter.propTypes = {
-  message: PropTypes.string,
-  stylesheet: PropTypes.func,
+  title: PropTypes.string,
+	message: PropTypes.string,
+	stylesheet: PropTypes.func,
 };
diff --git a/packages/notifications-panel/src/presenters/stylesheet.js b/packages/notifications-panel/src/presenters/stylesheet.js
index 2b113452e4..f9635c0411 100644
--- a/packages/notifications-panel/src/presenters/stylesheet.js
+++ b/packages/notifications-panel/src/presenters/stylesheet.js
@@ -144,10 +144,19 @@ export default function stylesheet(props, themeData) {
       alignItems: `center`,
     },
     emptyStateImage: {
-      marginTop: `20px`,
+      margin: `15px`
+    },
+    emptyStateTitle: {
+      fontFamily: themeData["notifications.fontFamily"],
+      fontSize: `14px`,
+      textAlign: `center`
     },
     emptyStateMessage: {
-      margin: `20px 0 37px`,
+      fontSize: `12px`,
+      fontFamily: themeData["notifications.fontFamily"],
+      margin: `10px 0 30px`,
+      textAlign: `center`,
+      width: `80%`
     },
   };