Integrate novu

.env.example

@@ -6,3 +6,11 @@ LOKALISE_PROJECT_ID=
 NEXT_PUBLIC_TARTEEL_VS_API_KEY=
 NEXT_PUBLIC_ENABLE_FS_LOGGING=
 NEXT_PUBLIC_SANITY_PROJECT_ID=
+
+NEXT_PUBLIC_NOVU_BACKEND_URL=
+NEXT_PUBLIC_NOVU_SOCKET_URL=
+NEXT_PUBLIC_NOVU_APP_ID=
+
+NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_SERVER_SENTRY_ENABLED=false
+NEXT_PUBLIC_CLIENT_SENTRY_ENABLED=true

locales/en/common.json

@@ -362,5 +362,11 @@
         "title": "Word Click"
     },
     "word-tooltip": "Word Tooltip",
-    "yes": "Yes"
+    "yes": "Yes",
+    "notifications": "Notifications",
+    "no-notifications": "No notifications yet",
+    "notification": {
+        "mark-all-as-read": "Mark all as read",
+        "mark-as-read": "Mark as read"
+    }
 }

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@next/bundle-analyzer": "^12.3.1",
+    "@novu/headless": "^0.19.0",
     "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
@@ -154,4 +155,4 @@
     "*.{tsx,ts}": "yarn lint:fix",
     "*.scss": "yarn lint:scss"
   }
-}
+}

sentry.client.config.js

@@ -5,17 +5,13 @@
 import * as Sentry from '@sentry/nextjs';
 
 const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const SENTRY_ENABLED = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
+const SENTRY_ENABLED = process.env.NEXT_PUBLIC_CLIENT_SENTRY_ENABLED === 'true';
+const isDev = process.env.NODE_ENV === 'development';
 
 Sentry.init({
-  enabled: false,
-  dsn: SENTRY_ENABLED
-    ? SENTRY_DSN || 'https://[email protected]/5906954'
-    : null,
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+  enabled: SENTRY_ENABLED,
+  dsn: SENTRY_ENABLED ? SENTRY_DSN : null,
+  debug: isDev,
+  defaultIntegrations: false,
+  autoSessionTracking: false,
 });

sentry.server.config.js

@@ -5,17 +5,15 @@
 import * as Sentry from '@sentry/nextjs';
 
 const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const SENTRY_ENABLED = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
+const SENTRY_ENABLED = process.env.NEXT_PUBLIC_SERVER_SENTRY_ENABLED === 'true';
+const isDev = process.env.NODE_ENV === 'development';
 
 Sentry.init({
-  enabled: false,
-  dsn: SENTRY_ENABLED
-    ? SENTRY_DSN || 'https://[email protected]/5906954'
-    : null,
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+  enabled: SENTRY_ENABLED,
+  dsn: SENTRY_ENABLED ? SENTRY_DSN : null,
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: isDev ? 1 : 0.2,
+  debug: isDev,
 });

src/components/Navbar/InAppNotifications/InAppNotifications.module.scss

@@ -0,0 +1,3 @@
+.notificationsPopover {
+  padding: 0;
+}

src/components/Navbar/InAppNotifications/NotificationBell/NotificationBell.module.scss

@@ -0,0 +1,34 @@
+@use "src/styles/theme";
+
+.count {
+    position: absolute;
+    border-radius: 50%;
+    background-color: var(--color-error-deep);
+
+    @include theme.light {
+        color: var(--color-text-inverse);
+    }
+
+    @include theme.dark {
+        color: var(--color-text-default);
+    }
+
+    @include theme.sepia {
+        color: var(--color-text-inverse);
+    }
+
+    z-index: var(--z-index-default);
+    margin-inline-start: var(--spacing-xsmall);
+    margin-block-start: calc(var(--spacing-xxsmall) * -1);
+    width: var(--spacing-medium);
+    height: var(--spacing-medium);
+    display: flex;
+    align-items: center;
+}
+
+.countText {
+    width: 100%;
+    text-align: center;
+    font-size: var(--font-size-xsmall);
+    font-weight: var(--font-weight-bold);
+}

src/components/Navbar/InAppNotifications/NotificationBell/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './NotificationBell.module.scss';
+
+import Button, { ButtonShape, ButtonVariant } from '@/dls/Button/Button';
+import NotificationBellIcon from '@/icons/notification-bell.svg';
+import { toLocalizedNumber } from '@/utils/locale';
+
+type Props = {
+  onBellClicked: () => void;
+  unseenNotificationsCount: number;
+};
+
+const MAX_NOTIFICATIONS_COUNT = 9;
+
+const NotificationBell: React.FC<Props> = ({ onBellClicked, unseenNotificationsCount }) => {
+  const { t, lang } = useTranslation('common');
+
+  let count = null;
+  if (unseenNotificationsCount > 0) {
+    count =
+      unseenNotificationsCount > MAX_NOTIFICATIONS_COUNT
+        ? `${toLocalizedNumber(MAX_NOTIFICATIONS_COUNT, lang)}+`
+        : toLocalizedNumber(unseenNotificationsCount, lang);
+  }
+
+  return (
+    <Button
+      tooltip={t('notifications')}
+      shape={ButtonShape.Circle}
+      variant={ButtonVariant.Ghost}
+      ariaLabel={t('aria.select-lng')}
+      onClick={onBellClicked}
+    >
+      <NotificationBellIcon />
+
+      {count && (
+        <div className={styles.count}>
+          <p className={styles.countText}>{count}</p>
+        </div>
+      )}
+    </Button>
+  );
+};
+
+export default NotificationBell;

src/components/Navbar/InAppNotifications/NotificationsList/NotificationItem/NotificationItem.module.scss

@@ -0,0 +1,49 @@
+.individualNotif {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.container {
+    padding: var(--spacing-large);
+    border-radius: var(--border-radius-default);
+    &:hover {
+        background-color: var(--color-background-alternative-faded);
+    }
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.readText {
+    color: var(--color-text-faded);
+}
+
+.tickIcon {
+    svg {
+        position: absolute;
+        path {
+            color: var(--color-background-inverse);
+            stroke: var(--color-background-inverse);
+            stroke-width: 1;
+        }
+    }
+}
+
+.popoverContainer {
+    display: flex;
+    align-items: center;
+}
+
+.dot {
+    color: var(--color-success-deep);
+    font-size: var(--font-size-jumbo);
+    font-weight: var(--font-weight-bold);
+}
+
+.date {
+    font-size: var(--font-size-xsmall);
+}

src/components/Navbar/InAppNotifications/NotificationsList/NotificationItem/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+
+import type { IMessage } from '@novu/shared';
+import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './NotificationItem.module.scss';
+
+import Button, { ButtonShape, ButtonSize, ButtonVariant } from '@/dls/Button/Button';
+import PopoverMenu from '@/dls/PopoverMenu/PopoverMenu';
+import Spinner from '@/dls/Spinner/Spinner';
+import CloseIcon from '@/icons/close.svg';
+import OverflowMenuIcon from '@/icons/menu_more_horiz.svg';
+import TickIcon from '@/icons/tick.svg';
+import useDeleteNotification from '@/notifications/useDeleteNotification';
+import useMarkNotificationAsRead from '@/notifications/useMarkNotificationAsRead';
+import { formatDateRelatively } from '@/utils/datetime';
+import { logButtonClick } from '@/utils/eventLogger';
+
+type Props = {
+  notification: IMessage;
+};
+
+const NotificationItem: React.FC<Props> = ({ notification }) => {
+  const { t, lang } = useTranslation('common');
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const markNotificationAsRead = useMarkNotificationAsRead();
+  const deleteNotification = useDeleteNotification();
+
+  const onMarkNotificationAsReadClicked = (notificationId: string) => {
+    logButtonClick('notification_mark_as_read', { notificationId });
+    markNotificationAsRead.mutate(notificationId);
+    setIsPopoverOpen(false);
+  };
+
+  const onDeletedNotificationClicked = (notificationId: string) => {
+    logButtonClick('notification_delete', { notificationId });
+    deleteNotification.mutate(notificationId);
+  };
+
+  const onOpenChange = (open: boolean) => {
+    logButtonClick('notification_more', {
+      // eslint-disable-next-line no-underscore-dangle
+      notificationId: notification._id,
+      open,
+    });
+    setIsPopoverOpen(open);
+  };
+
+  const isNotRead = !notification?.read;
+
+  const formattedDate = formatDateRelatively(new Date(notification.createdAt), lang);
+
+  return (
+    <div
+      className={classNames(styles.container, {
+        [styles.readText]: notification.read,
+      })}
+    >
+      <div className={styles.individualNotif}>
+        <p>{notification?.content}</p>
+        <div className={styles.popoverContainer}>
+          {/* eslint-disable-next-line i18next/no-literal-string */}
+          {isNotRead && <p className={styles.dot}>&#x2022;</p>}
+          <PopoverMenu
+            trigger={
+              <Button
+                size={ButtonSize.Small}
+                tooltip={t('more')}
+                variant={ButtonVariant.Ghost}
+                shape={ButtonShape.Circle}
+                ariaLabel={t('more')}
+              >
+                <OverflowMenuIcon />
+              </Button>
+            }
+            isModal={false}
+            isOpen={isPopoverOpen}
+            isPortalled={false}
+            onOpenChange={onOpenChange}
+          >
+            {isNotRead && (
+              <PopoverMenu.Item
+                // eslint-disable-next-line no-underscore-dangle
+                onClick={() => onMarkNotificationAsReadClicked(notification?._id)}
+                icon={markNotificationAsRead.isMutating ? <Spinner /> : <TickIcon />}
+                isDisabled={markNotificationAsRead.isMutating}
+                className={styles.tickIcon}
+              >
+                {t('notification.mark-as-read')}
+              </PopoverMenu.Item>
+            )}
+
+            <PopoverMenu.Item
+              // eslint-disable-next-line no-underscore-dangle
+              onClick={() => onDeletedNotificationClicked(notification?._id)}
+              icon={deleteNotification.isMutating ? <Spinner /> : <CloseIcon />}
+              isDisabled={deleteNotification.isMutating}
+            >
+              {t('remove')}
+            </PopoverMenu.Item>
+          </PopoverMenu>
+        </div>
+      </div>
+      <p className={styles.date}>{formattedDate}</p>
+    </div>
+  );
+};
+
+export default NotificationItem;

src/components/Navbar/InAppNotifications/NotificationsList/NotificationsList.module.scss

@@ -0,0 +1,40 @@
+.notificationsContainer {
+  width: calc(13 * var(--spacing-mega));
+  max-width: 100vw;
+}
+
+.notificationsList {
+  height: calc(14 * var(--spacing-mega)) !important;
+}
+
+.listContainer {
+  padding-block: var(--spacing-xxsmall);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--spacing-large);
+  padding-inline: var(--spacing-medium);
+}
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-default);
+}
+
+.emptyMessage {
+  font-size: var(--font-size-medium);
+  color: var(--color-text-faded);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-block: var(--spacing-mega);
+}