feat: add the notifications drop down (#1999)

Author: iccicci

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsAllClear.module.scss

@@ -0,0 +1,7 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.icon {
+  width: size_unit(14);
+  height: size_unit(14);
+}

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsAllClear.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+
+import styles from './NotificationsAllClear.module.scss';
+
+import HappyFaceIcon from '@lace/core/src/ui/assets/icons/happy-face.component.svg';
+
+export const NotificationsAllClear = (): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDirection="column" alignItems="center" justifyContent="center" gap="$8">
+      <HappyFaceIcon className={styles.icon} />
+      <Text.Body.Large>{t('notificationsCenter.allClear.title')}</Text.Body.Large>
+      <Text.Body.Small>{t('notificationsCenter.allClear.description')}</Text.Body.Small>
+    </Flex>
+  );
+};

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss renamed to apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBell.module.scss

@@ -1,21 +1,22 @@
 import React from 'react';
+
 import { Button } from '@lace/common';
-import styles from './NotificationsCenter.module.scss';
-import NotificationBellIcon from '../../assets/icons/notifications-bell.component.svg';
+
+import styles from './NotificationsBell.module.scss';
+
+import NotificationBellIcon from '@lace/core/src/ui/assets/icons/notifications-bell.component.svg';
 
 // eslint-disable-next-line no-magic-numbers
 const formatNotificationCount = (count: number) => (count < 10 ? count.toString() : '9+');
 
 export interface NotificationsBellProps {
-  notificationsCount: number;
   onClick: () => void;
-  popupView?: boolean;
+  unreadNotifications: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const NotificationsBell = ({ notificationsCount, onClick }: NotificationsBellProps): React.ReactElement => (
-  <Button className={styles.btn} block onClick={onClick} color="gradient" data-testid="notifications-bell">
+export const NotificationsBell = ({ onClick, unreadNotifications }: NotificationsBellProps): React.ReactElement => (
+  <Button className={styles.btn} block color="gradient" data-testid="notifications-bell" onClick={onClick}>
     <NotificationBellIcon />
-    {notificationsCount > 0 && <span className={styles.badge}>{formatNotificationCount(notificationsCount)}</span>}
+    {unreadNotifications > 0 && <span className={styles.badge}>{formatNotificationCount(unreadNotifications)}</span>}
   </Button>
 );

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBell.tsx

@@ -1,27 +1,63 @@
 import React, { useState } from 'react';
-import { NotificationsBell } from './NotificationsBell';
+import { Dropdown } from 'antd';
+
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 import { ExperimentName } from '@lib/scripts/types/feature-flags';
+
+import { NotificationsBell } from './NotificationsBell';
+import { NotificationsDropDown } from './NotificationsDropDown';
+
 export interface NotificationsCenterContainerProps {
   popupView?: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
   const posthog = usePostHogClientContext();
 
-  // TODO Connect with notifications center
-  const [notificationsCount, setNotificationsCount] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
 
   // TODO Connect with notifications center
-  const handleClick = () => {
-    // eslint-disable-next-line no-magic-numbers
-    setNotificationsCount(notificationsCount === 11 ? 0 : notificationsCount + 1);
+  const [notifications, setNotifications] = useState<string[]>([]);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+
+    // TODO remove this placeholder logic
+    if (!open) {
+      setNotifications(
+        // eslint-disable-next-line no-magic-numbers
+        notifications.length === 11 ? [] : [...notifications, `Notification ${notifications.length + 1}`]
+      );
+    }
+  };
+
+  const handleMarkAllAsRead = () => {
+    // TODO remove this placeholder logic
+    setNotifications([]);
+  };
+
+  const handleViewAll = () => {
+    setIsOpen(false);
   };
 
   return (
     posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) && (
-      <NotificationsBell notificationsCount={notificationsCount} onClick={handleClick} popupView={popupView} />
+      <Dropdown
+        onOpenChange={handleOpenChange}
+        open={isOpen}
+        dropdownRender={() => (
+          <NotificationsDropDown
+            notifications={notifications}
+            onMarkAllAsRead={handleMarkAllAsRead}
+            onViewAll={handleViewAll}
+            popupView={popupView}
+          />
+        )}
+        placement="bottomRight"
+        trigger={['click']}
+      >
+        <NotificationsBell onClick={() => setIsOpen(!isOpen)} unreadNotifications={notifications.length} />
+      </Dropdown>
     )
   );
 };

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx

@@ -0,0 +1,25 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/abstracts/mixins';
+
+.container {
+  background-color: var(--bg-color-container, #ffffff) !important;
+  border: 1px var(--light-mode-light-grey) solid !important;
+  border-radius: size_unit(2) !important;
+  box-shadow: 0 0 16px 0 rgba(167, 143, 160, 0.2);
+  margin-top: size_unit(0.5) !important;
+  max-height: 475px;
+  padding: size_unit(1) !important;
+  width: 310px;
+
+  &.popupView {
+    left: size_unit(-4);
+  }
+}
+
+.content {
+  min-height: 200px;
+  max-height: 350px;
+  overflow-y: scroll;
+  @include scroll-bar-style;
+}

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsDropDown.module.scss

@@ -0,0 +1,47 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'antd';
+
+import { Divider, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+
+import { NotificationsAllClear } from './NotificationsAllClear';
+
+import styles from './NotificationsDropDown.module.scss';
+
+export interface NotificationsDropDownProps {
+  notifications: string[];
+  onMarkAllAsRead: () => void;
+  onViewAll: () => void;
+  popupView?: boolean;
+}
+
+export const NotificationsDropDown = ({
+  notifications,
+  onMarkAllAsRead,
+  onViewAll,
+  popupView
+}: NotificationsDropDownProps): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Menu className={classnames(styles.container, { [styles.popupView]: popupView })}>
+      <div className={styles.content}>
+        {notifications.length > 0 ? <div>Placeholder content</div> : <NotificationsAllClear />}
+      </div>
+      <Divider my="$4" />
+      <Flex justifyContent="space-between">
+        <Text.Body.Normal>
+          <a onClick={onViewAll}>
+            {t(`notificationsCenter.${notifications.length > 0 ? 'viewAll' : 'manageSubscriptions'}`)}
+          </a>
+        </Text.Body.Normal>
+        {notifications.length > 0 && (
+          <Text.Body.Normal>
+            <a onClick={onMarkAllAsRead}>{t('notificationsCenter.markAllAsRead')}</a>
+          </Text.Body.Normal>
+        )}
+      </Flex>
+    </Menu>
+  );
+};

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsDropDown.tsx

@@ -1,2 +1 @@
-export * from './NotificationsBell';
 export * from './NotificationsBellContainer';