[WebApp] Achievements notifications (#1064)

* functioanlity to render achievements notifications from novu - added * yarn.lock - updated * naming refactor
SaladTechnologies · Oct 25, 2023 · cc6df67 · cc6df67
1 parent d743a70
commit cc6df67
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 49 deletions.
diff --git a/packages/web-app/package.json b/packages/web-app/package.json
@@ -88,7 +88,7 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@novu/notification-center": "0.20.0",
     "@novu/shared": "0.20.0",
-    "@saladtechnologies/garden-components": "1.2.0",
+    "@saladtechnologies/garden-components": "1.2.4",
     "@saladtechnologies/garden-fonts": "1.0.3",
     "@saladtechnologies/garden-icons": "1.0.12",
     "@storybook/addon-a11y": "6.5.16",

diff --git a/packages/web-app/src/modules/home-views/components/NavigationBarWithNovuNotifications.tsx b/packages/web-app/src/modules/home-views/components/NavigationBarWithNovuNotifications.tsx
@@ -22,7 +22,9 @@ export const NavigationBarWithNovuNotifications: FunctionComponent<NavigationBar
   const bannerNotifications = getConfiguredNovuBannerNotifications(unreadNovuNotifications, (notificationId: string) =>
     novu?.markNotificationAsRead(notificationId),
   )
+
   const newsNotifications = bannerNotifications.filter((notification) => notification?.variant === 'news')
+  const achievementNotifications = bannerNotifications.filter((notification) => notification?.variant === 'achievement')
   const warningsNotifications = bannerNotifications.filter((notification) => notification?.variant === 'error')
   const hasUnseenNotifications = novu?.unseenCount > 0
   const handleOpenNotificationsDrawer = () => {
@@ -43,6 +45,7 @@ export const NavigationBarWithNovuNotifications: FunctionComponent<NavigationBar
     ...props.notifications,
     news: newsNotifications,
     warnings: warningsNotifications,
+    achievements: achievementNotifications,
     hasUnseenNotifications,
     onOpenNotificationsDrawer: handleOpenNotificationsDrawer,
     onCloseNotificationsDrawer: handleCloseNotificationsDrawer,

diff --git a/packages/web-app/src/modules/notifications/models/NotificationMessage.tsx b/packages/web-app/src/modules/notifications/models/NotificationMessage.tsx
@@ -1,3 +1,5 @@
+import type { NotificationVariant } from '@saladtechnologies/garden-components/lib/components/NotificationBanner/NotificationBanner'
+
 export enum NotificationMessageCategory {
   AppUpdate = 'App Update',
   AutoStart = 'Auto Start',
@@ -12,8 +14,6 @@ export enum NotificationMessageCategory {
   ReferralCodeInvalid = 'Referral Code Invalid',
   ReferralCodeDoesNotExist = 'Referral Code Does Not Exist',
   ReferralCodeError = 'Referral Code Error',
-  NovuInfo = 'Novu Info',
-  NovuWarning = 'Novu Warning',
 }
 
 export interface NotificationMessage {
@@ -98,13 +98,11 @@ export interface Notification {
   /** The body. */
   body: string
   /** The date and time of the notification. */
-  createDate: Date | undefined
+  createdDate: Date | undefined
   /** The list of actions. */
   actions: NotificationAction[]
   /** A value indicating whether the notification has been acknowledged. */
   acknowledged: boolean
-  /** identifier used to track actions from this notification. */
-  trackId: string
   /** A value indicating whether the notification is os type. */
   osNotification: boolean
   /** A value indicating whether the notification is overlay type. */
@@ -113,4 +111,8 @@ export interface Notification {
   seen: boolean
   /** A value indicating whether the notification has been read. */
   read: boolean
+  /** A value indicating the absolute link to the badge image. */
+  badgeUrl: string
+  /** A value indicating the notification variant */
+  variant: NotificationVariant
 }
diff --git a/packages/web-app/src/modules/notifications/utils.tsx b/packages/web-app/src/modules/notifications/utils.tsx
@@ -1,8 +1,7 @@
 import type { IMessage } from '@novu/shared'
 import type { NotificationBannerProps as GardenNotificationBannerProps } from '@saladtechnologies/garden-components'
 import { unescape } from 'lodash'
-import { DateTime } from 'luxon'
-import { NotificationMessageCategory, type Notification, type NotificationAction } from './models'
+import type { Notification, NotificationAction } from './models'
 
 interface NovuTemplateCta {
   acknowledgeLabel: string
@@ -50,27 +49,25 @@ export interface IMessageWithId extends IMessage {
 export const getNormalizedNovuNotification = (novuNotification: IMessage): Notification | null => {
   try {
     const { v1, osNotification, overlay } = JSON.parse(novuNotification.content as string)
-
-    const { cta } = v1
+    const { cta, title, body, badgeUrl, type } = v1
 
     const actions: NotificationAction[] = Object.keys(cta).map((key: string) => {
       return { action: getNormalizedNotificationAction(key, cta[key]) }
     })
 
-    const trackId = v1.type === 'info' ? NotificationMessageCategory.NovuInfo : NotificationMessageCategory.NovuWarning
-
     return {
-      trackId,
       novuId: novuNotification._id,
-      title: v1.title,
-      body: v1.body,
+      title,
+      body,
       read: novuNotification.read,
       seen: novuNotification.seen,
-      createDate: new Date(novuNotification.createdAt),
+      createdDate: new Date(novuNotification.createdAt),
       acknowledged: novuNotification.read,
+      badgeUrl,
       actions,
       overlay,
       osNotification,
+      variant: type === 'info' ? 'news' : type,
     }
   } catch (e) {
     return null
@@ -82,31 +79,6 @@ interface NotificationActionPayload {
   onClick: () => void
 }
 
-const getReceivedAtDisplay = (
-  createDate: Date,
-): { value: number; unit: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' } => {
-  const createDateLuxon = DateTime.fromJSDate(createDate)
-  const duration = DateTime.now().diff(createDateLuxon)
-  const interval = duration.shiftTo('years', 'months', 'days', 'hours', 'minutes', 'seconds').toObject()
-  if (interval.years !== undefined && interval.years >= 1) {
-    return { value: interval.years, unit: 'year' }
-  }
-  if (interval.months !== undefined && interval.months >= 1) {
-    return { value: interval.months, unit: 'month' }
-  }
-  if (interval.days !== undefined && interval.days >= 1) {
-    return { value: interval.days, unit: 'day' }
-  }
-  if (interval.hours !== undefined && interval.hours >= 1) {
-    return { value: interval.hours, unit: 'hour' }
-  }
-  if (interval.minutes !== undefined && interval.minutes >= 1) {
-    return { value: Math.ceil(interval.minutes), unit: 'minute' }
-  }
-
-  return { value: interval.seconds ? Math.ceil(interval.seconds) : 0, unit: 'second' }
-}
-
 const getNotificationBannerAction = (
   notification: Notification,
   onReadNovuNotification: (notificationId: string) => void,
@@ -161,18 +133,18 @@ export const getConfiguredNovuBannerNotifications = (
         return null
       }
 
-      const { createDate, title, body, overlay, trackId, actions, novuId } = normalizedNotification
+      const { createdDate, title, body, overlay, variant, actions, novuId, badgeUrl } = normalizedNotification
       const firstNotificationAction = actions[0]
       const secondNotificationAction = actions[1]
-      const variant = trackId === NotificationMessageCategory.NovuInfo ? 'news' : 'error'
 
       return {
         action1: getNotificationBannerAction(normalizedNotification, onReadNovuNotification, firstNotificationAction),
         action2: getNotificationBannerAction(normalizedNotification, onReadNovuNotification, secondNotificationAction),
         message: unescape(body),
         onClose: () => onReadNovuNotification(novuId),
-        receivedAt: createDate ? getReceivedAtDisplay(createDate) : { value: 1, unit: 'minute' },
+        createdDate: createdDate ?? new Date(),
         title: unescape(title),
+        badgeUrl,
         variant,
         overlay,
       }

diff --git a/packages/web-app/yarn.lock b/packages/web-app/yarn.lock
@@ -3364,7 +3364,7 @@ __metadata:
     "@fortawesome/react-fontawesome": 0.2.0
     "@novu/notification-center": 0.20.0
     "@novu/shared": 0.20.0
-    "@saladtechnologies/garden-components": 1.2.0
+    "@saladtechnologies/garden-components": 1.2.4
     "@saladtechnologies/garden-fonts": 1.0.3
     "@saladtechnologies/garden-icons": 1.0.12
     "@storybook/addon-a11y": 6.5.16
@@ -3464,9 +3464,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@saladtechnologies/garden-components@npm:1.2.0":
-  version: 1.2.0
-  resolution: "@saladtechnologies/garden-components@npm:1.2.0"
+"@saladtechnologies/garden-components@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@saladtechnologies/garden-components@npm:1.2.4"
   peerDependencies:
     "@emotion/react": 11.x
     "@emotion/styled": 11.x
@@ -3481,7 +3481,7 @@ __metadata:
     react-intl: 6.x
     react-range: 1.x
     react-responsive: 9.x
-  checksum: 8424f93b39b033368aca8d4254e306677a28dcbb95864c64402a7b4dfe5d638a57e5536bff50735dda645e243d28e443de80bf3df2996c8353ca4a35f1763e7a
+  checksum: 9307e281f1b61cc90773d1a3ae2464a92123b8095605f477897a64aa75fb3f74bf7428ad02da1190179e1ed5fff0c15e88c6c7bfa540ec3e4354bf0caa5285f0
   languageName: node
   linkType: hard