feat(kudos): display notification when kudos received (#9199)

* chore(kudos): add kudos team settings

* store emoji id

* chore(kudos): add kudos record when adding emoji reaction

* Fix snackbar

* quick fix for types

* Dynamic emoji

* del console log

* feat(kudos): display notification when kudos received

* Remove comment

* Update notification text

* Remove unused kudos field

* expose senderUser

* Fix reactable type

* Fix table name

* remove unused fields

* Don't check feature flag

* Fix analytics

* Add snackbar events

* fix typescript

* Fix type

* Fix type

* add notification status analytics

* Fix type

* fix type

* Fix table name caused by wrong merge

* add snackbar clicked event to kudosReceived snackbar

packages/client/components/KudosReceivedNotification.tsx

@@ -0,0 +1,61 @@
+import graphql from 'babel-plugin-relay/macro'
+import {Link} from 'react-router-dom'
+import React, {useEffect} from 'react'
+import {useFragment} from 'react-relay'
+import {KudosReceivedNotification_notification$key} from '~/__generated__/KudosReceivedNotification_notification.graphql'
+import NotificationTemplate from './NotificationTemplate'
+import useAtmosphere from '../hooks/useAtmosphere'
+import SendClientSideEvent from '../utils/SendClientSideEvent'
+import getReactji from '~/utils/getReactji'
+
+interface Props {
+ notification: KudosReceivedNotification_notification$key
+}
+
+const KudosReceivedNotification = (props: Props) => {
+ const atmosphere = useAtmosphere()
+ const {notification: notificationRef} = props
+ const notification = useFragment(
+ graphql`
+ fragment KudosReceivedNotification_notification on NotifyKudosReceived {
+ ...NotificationTemplate_notification
+ id
+ type
+ name
+ picture
+ meetingName
+ meetingId
+ emoji
+ status
+ }
+ `,
+ notificationRef
+ )
+ const {type, name, picture, meetingName, emoji, meetingId, status} = notification
+
+ const {unicode} = getReactji(emoji)
+
+ useEffect(() => {
+ SendClientSideEvent(atmosphere, 'Notification Viewed', {
+ notificationType: type,
+ notificationStatus: status
+ })
+ }, [])
+
+ return (
+ <NotificationTemplate
+ message={
+ <>
+ {unicode} {name} gave you kudos in{' '}
+ <Link to={`/meet/${meetingId}`} className='font-semibold text-sky-500 underline'>
+ {meetingName}
+ </Link>
+ </>
+ }
+ notification={notification}
+ avatar={picture}
+ />
+ )
+}
+
+export default KudosReceivedNotification

packages/client/components/NotificationPicker.tsx

@@ -53,6 +53,9 @@ const typePicker: Record<NotificationEnum, LazyExoticPreload<any>> = {
  ),
  RESPONSE_REPLIED: lazyPreload(
  () => import(/* webpackChunkName: 'ResponseReplied' */ './ResponseReplied')
+ ),
+ KUDOS_RECEIVED: lazyPreload(
+ () => import(/* webpackChunkName: 'KudosReceivedNotification' */ './KudosReceivedNotification')
  )
 }
 
@@ -81,6 +84,7 @@ const NotificationPicker = (props: Props) => {
  ...TeamsLimitReminderNotification_notification
  ...PromptToJoinOrgNotification_notification
  ...RequestToJoinOrgNotification_notification
+ ...KudosReceivedNotification_notification
  }
  `,
  notificationRef

packages/client/components/NotificationTemplate.tsx

@@ -12,7 +12,7 @@ import NotificationRow from './NotificationRow'
 
 interface Props {
  avatar?: string
- message: string
+ message: ReactNode
  notification: NotificationTemplate_notification$key
  action?: ReactNode
  children?: ReactNode

packages/client/mutations/toasts/mapKudosReceivedToToast.ts

@@ -0,0 +1,49 @@
+import graphql from 'babel-plugin-relay/macro'
+import {Snack} from '../../components/Snackbar'
+import {mapKudosReceivedToToast_notification$data} from '../../__generated__/mapKudosReceivedToToast_notification.graphql'
+import makeNotificationToastKey from './makeNotificationToastKey'
+import {OnNextHistoryContext} from '../../types/relayMutations'
+import SendClientSideEvent from '../../utils/SendClientSideEvent'
+import getReactji from '~/utils/getReactji'
+
+graphql`
+ fragment mapKudosReceivedToToast_notification on NotifyKudosReceived {
+ id
+ name
+ meetingName
+ meetingId
+ emoji
+ }
+`
+
+const mapKudosReceivedToToast = (
+ notification: mapKudosReceivedToToast_notification$data,
+ {atmosphere, history}: OnNextHistoryContext
+): Snack => {
+ const {id: notificationId, meetingName, name, emoji, meetingId} = notification
+ const {unicode} = getReactji(emoji)
+ return {
+ autoDismiss: 5,
+ showDismissButton: true,
+ key: makeNotificationToastKey(notificationId),
+ message: `${unicode} ${name} gave you kudos in`,
+ action: {
+ label: meetingName,
+ callback: () => {
+ history.push(`/meet/${meetingId}`)
+ }
+ },
+ onShow: () => {
+ SendClientSideEvent(atmosphere, 'Snackbar Viewed', {
+ snackbarType: 'kudosReceived'
+ })
+ },
+ onManualDismiss: () => {
+ SendClientSideEvent(atmosphere, 'Snackbar Clicked', {
+ snackbarType: 'kudosReceived'
+ })
+ }
+ }
+}
+
+export default mapKudosReceivedToToast

packages/client/mutations/toasts/popNotificationToast.ts

@@ -13,6 +13,7 @@ import mapTeamsLimitExceededToToast from './mapTeamsLimitExceededToToast'
 import mapTeamsLimitReminderToToast from './mapTeamsLimitReminderToToast'
 import mapPromptToJoinOrgToToast from './mapPromptToJoinOrgToToast'
 import mapRequestToJoinOrgToToast from './mapRequestToJoinOrgToToast'
+import mapKudosReceivedToToast from './mapKudosReceivedToToast'
 
 const typePicker: Partial<
  Record<NotificationEnum, (notification: any, context: OnNextHistoryContext) => Snack | null>
@@ -23,7 +24,8 @@ const typePicker: Partial<
  TEAMS_LIMIT_EXCEEDED: mapTeamsLimitExceededToToast,
  TEAMS_LIMIT_REMINDER: mapTeamsLimitReminderToToast,
  PROMPT_TO_JOIN_ORG: mapPromptToJoinOrgToToast,
- REQUEST_TO_JOIN_ORG: mapRequestToJoinOrgToToast
+ REQUEST_TO_JOIN_ORG: mapRequestToJoinOrgToToast,
+ KUDOS_RECEIVED: mapKudosReceivedToToast
 }
 
 graphql`
@@ -38,6 +40,7 @@ graphql`
  ...mapTeamsLimitReminderToToast_notification @relay(mask: false)
  ...mapPromptToJoinOrgToToast_notification @relay(mask: false)
  ...mapRequestToJoinOrgToToast_notification @relay(mask: false)
+ ...mapKudosReceivedToToast_notification @relay(mask: false)
  }
  }
 `

packages/server/database/types/Notification.ts

@@ -16,6 +16,7 @@ export type NotificationEnum =
  | 'TEAMS_LIMIT_REMINDER'
  | 'PROMPT_TO_JOIN_ORG'
  | 'REQUEST_TO_JOIN_ORG'
+ | 'KUDOS_RECEIVED'
 
 export interface NotificationInput {
  type: NotificationEnum

packages/server/database/types/NotificationKudosReceived.ts

@@ -0,0 +1,32 @@
+import Notification from './Notification'
+
+interface Input {
+ userId: string
+ name: string
+ picture: string
+ senderUserId: string
+ meetingName: string
+ meetingId: string
+ emoji: string
+}
+
+export default class NotificationKudosReceived extends Notification {
+ readonly type = 'KUDOS_RECEIVED'
+ name: string
+ picture: string
+ senderUserId: string
+ meetingName: string
+ meetingId: string
+ emoji: string
+
+ constructor(input: Input) {
+ const {userId, name, picture, senderUserId, meetingName, meetingId, emoji} = input
+ super({userId, type: 'KUDOS_RECEIVED'})
+ this.name = name
+ this.picture = picture
+ this.senderUserId = senderUserId
+ this.meetingName = meetingName
+ this.meetingId = meetingId
+ this.emoji = emoji
+ }
+}

packages/server/graphql/private/typeDefs/_legacy.graphql

@@ -1658,6 +1658,7 @@ enum NotificationEnum {
  TEAMS_LIMIT_REMINDER
  PROMPT_TO_JOIN_ORG
  REQUEST_TO_JOIN_ORG
+ KUDOS_RECEIVED
 }
 
 """

packages/server/graphql/public/mutations/addReactjiToReactable.ts

@@ -24,6 +24,8 @@ import {AnyMeeting} from '../../../postgres/types/Meeting'
 import MeetingRetrospective from '../../../database/types/MeetingRetrospective'
 import {TeamPromptResponse} from '../../../postgres/queries/getTeamPromptResponsesByIds'
 import {MutationResolvers} from '../resolverTypes'
+import NotificationKudosReceived from '../../../database/types/NotificationKudosReceived'
+import publishNotification from './helpers/publishNotification'
 
 const rethinkTableLookup = {
  COMMENT: 'Comment',
@@ -190,6 +192,22 @@ const addReactjiToReactable: MutationResolvers['addReactjiToReactable'] = async
  .returning('id')
  .executeTakeFirst())!.id
 
+ const senderUser = await dataLoader.get('users').loadNonNull(viewerId)
+
+ const notificationsToInsert = new NotificationKudosReceived({
+ userId: reactableCreatorId,
+ senderUserId: viewerId,
+ meetingId,
+ meetingName: meeting.name,
+ emoji: team.kudosEmoji,
+ name: senderUser.preferredName,
+ picture: senderUser.picture
+ })
+
+ await r.table('Notification').insert(notificationsToInsert).run()
+
+ publishNotification(notificationsToInsert, subOptions)
+
  analytics.kudosSent(viewerId, teamId, addedKudosId, reactableCreatorId)
  }
 

packages/server/graphql/public/typeDefs/NotifyKudosReceived.graphql

@@ -0,0 +1,47 @@
+type NotifyKudosReceived implements Notification {
+ """
+ A shortid for the notification
+ """
+ id: ID!
+
+ """
+ UNREAD if new, READ if viewer has seen it, CLICKED if viewed clicked it
+ """
+ status: NotificationStatusEnum!
+
+ """
+ The datetime to activate the notification & send it to the client
+ """
+ createdAt: DateTime!
+ type: NotificationEnum!
+
+ """
+ The userId that should see this notification
+ """
+ userId: ID!
+
+ """
+ Sender name
+ """
+ name: String!
+
+ """
+ Sender picture
+ """
+ picture: URL!
+
+ """
+ Meeting name
+ """
+ meetingName: String!
+
+ """
+ Meeting id
+ """
+ meetingId: String!
+
+ """
+ Kudos emoji
+ """
+ emoji: String!
+}

packages/server/graphql/public/types/NotifyKudosReceived.ts

@@ -0,0 +1,7 @@
+import {NotifyKudosReceivedResolvers} from '../resolverTypes'
+
+const NotifyKudosReceived: NotifyKudosReceivedResolvers = {
+ __isTypeOf: ({type}) => type === 'KUDOS_RECEIVED'
+}
+
+export default NotifyKudosReceived

packages/server/graphql/types/NotificationEnum.ts

@@ -12,6 +12,7 @@ export type NotificationEnumType =
  | 'TEAMS_LIMIT_REMINDER'
  | 'PROMPT_TO_JOIN_ORG'
  | 'REQUEST_TO_JOIN_ORG'
+ | 'KUDOS_RECEIVED'
 
 const NotificationEnum = new GraphQLEnumType({
  name: 'NotificationEnum',
@@ -27,7 +28,8 @@ const NotificationEnum = new GraphQLEnumType({
  TEAMS_LIMIT_EXCEEDED: {},
  TEAMS_LIMIT_REMINDER: {},
  PROMPT_TO_JOIN_ORG: {},
- REQUEST_TO_JOIN_ORG: {}
+ REQUEST_TO_JOIN_ORG: {},
+ KUDOS_RECEIVED: {}
  }
 })