feat(kudos): send kudos by text in standups

packages/client/components/KudosReceivedNotification.tsx

@@ -6,7 +6,6 @@ import {KudosReceivedNotification_notification$key} from '~/__generated__/KudosR
 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
@@ -25,15 +24,13 @@ const KudosReceivedNotification = (props: Props) => {
         picture
         meetingName
         meetingId
-        emoji
+        emojiUnicode
         status
       }
     `,
     notificationRef
   )
-  const {type, name, picture, meetingName, emoji, meetingId, status} = notification
-
-  const {unicode} = getReactji(emoji)
+  const {type, name, picture, meetingName, emojiUnicode, meetingId, status} = notification
 
   useEffect(() => {
     SendClientSideEvent(atmosphere, 'Notification Viewed', {
@@ -46,7 +43,7 @@ const KudosReceivedNotification = (props: Props) => {
     <NotificationTemplate
       message={
         <>
-          {unicode} {name} gave you kudos in{' '}
+          {emojiUnicode} {name} gave you kudos in{' '}
           <Link to={`/meet/${meetingId}`} className='font-semibold text-sky-500 underline'>
             {meetingName}
           </Link>

packages/client/components/ResponseMentioned.tsx

@@ -1,10 +1,12 @@
 import graphql from 'babel-plugin-relay/macro'
-import React from 'react'
+import React, {useEffect} from 'react'
 import {useFragment} from 'react-relay'
 import NotificationAction from '~/components/NotificationAction'
 import useRouter from '../hooks/useRouter'
 import {ResponseMentioned_notification$key} from '../__generated__/ResponseMentioned_notification.graphql'
 import NotificationTemplate from './NotificationTemplate'
+import SendClientSideEvent from '../utils/SendClientSideEvent'
+import useAtmosphere from '~/hooks/useAtmosphere'
 
 interface Props {
   notification: ResponseMentioned_notification$key
@@ -27,24 +29,40 @@ const ResponseMentioned = (props: Props) => {
           id
           name
         }
+        type
+        status
+        kudosEmojiUnicode
       }
     `,
     notificationRef
   )
   const {history} = useRouter()
-  const {meeting, response} = notification
+  const atmosphere = useAtmosphere()
+  const {meeting, response, kudosEmojiUnicode, type, status} = notification
   const {picture: authorPicture, preferredName: authorName} = response.user
 
+  useEffect(() => {
+    SendClientSideEvent(atmosphere, 'Notification Viewed', {
+      notificationType: type,
+      notificationStatus: status,
+      kudosEmojiUnicode
+    })
+  }, [])
+
   const {id: meetingId, name: meetingName} = meeting
   const goThere = () => {
     history.push(`/meet/${meetingId}/responses?responseId=${encodeURIComponent(response.id)}`)
   }
 
+  const message = kudosEmojiUnicode
+    ? `${kudosEmojiUnicode} ${authorName} mentioned you and gave kudos in their response in ${meetingName}.`
+    : `${authorName} mentioned you in their response in ${meetingName}.`
+
   // :TODO: (jmtaber129): Show mention preview.
   return (
     <NotificationTemplate
       avatar={authorPicture}
-      message={`${authorName} mentioned you in their response in ${meetingName}.`}
+      message={message}
       notification={notification}
       action={<NotificationAction label={'See their response'} onClick={goThere} />}
     />

packages/client/modules/email/components/EmailNotifications/EmailResponseMentioned.tsx

@@ -28,11 +28,12 @@ const EmailResponseMentioned = (props: Props) => {
           id
           name
         }
+        kudosEmojiUnicode
       }
     `,
     notificationRef
   )
-  const {meeting, response} = notification
+  const {meeting, response, kudosEmojiUnicode} = notification
   const {rasterPicture: authorPicture, preferredName: authorName} = response.user
 
   const {id: meetingId, name: meetingName} = meeting
@@ -46,11 +47,15 @@ const EmailResponseMentioned = (props: Props) => {
     }
   })
 
+  const message = kudosEmojiUnicode
+    ? `${kudosEmojiUnicode} ${authorName} mentioned you and gave kudos in their response in ${meetingName}.`
+    : `${authorName} mentioned you in their response in ${meetingName}.`
+
   // :TODO: (jmtaber129): Show mention preview.
   return (
     <EmailNotificationTemplate
       avatar={authorPicture}
-      message={`${authorName} mentioned you in their response in ${meetingName}.`}
+      message={message}
       notificationRef={notification}
       linkLabel={'See their response'}
       linkUrl={linkUrl}

packages/client/mutations/AddReactjiToReactableMutation.ts

@@ -3,7 +3,6 @@ import {commitMutation} from 'react-relay'
 import createProxyRecord from '~/utils/relay/createProxyRecord'
 import {StandardMutation} from '../types/relayMutations'
 import {AddReactjiToReactableMutation as TAddReactjiToReactableMutation} from '../__generated__/AddReactjiToReactableMutation.graphql'
-import getReactji from '~/utils/getReactji'
 import SendClientSideEvent from '../utils/SendClientSideEvent'
 
 graphql`
@@ -41,7 +40,7 @@ const mutation = graphql`
       }
       ... on AddReactjiToReactableSuccess {
         addedKudos {
-          emoji
+          emojiUnicode
           receiverUser {
             preferredName
           }
@@ -118,10 +117,10 @@ const AddReactjiToReactableMutation: StandardMutation<TAddReactjiToReactableMuta
       const {isRemove} = variables
       const addedKudos = res.addReactjiToReactable.addedKudos
       if (!isRemove && addedKudos) {
-        const {unicode} = getReactji(addedKudos.emoji)
+        const {emojiUnicode} = addedKudos
         atmosphere.eventEmitter.emit('addSnackbar', {
           key: 'youGaveKudos',
-          message: `You gave kudos to ${addedKudos.receiverUser.preferredName} ${unicode}`,
+          message: `You gave kudos to ${addedKudos.receiverUser.preferredName} ${emojiUnicode}`,
           autoDismiss: 5,
           onShow: () => {
             SendClientSideEvent(atmosphere, 'Snackbar Viewed', {

packages/client/mutations/UpsertTeamPromptResponseMutation.ts

@@ -4,6 +4,7 @@ import clientTempId from '~/utils/relay/clientTempId'
 import {UpsertTeamPromptResponseMutation_meeting$data} from '~/__generated__/UpsertTeamPromptResponseMutation_meeting.graphql'
 import {LocalHandlers, SharedUpdater, StandardMutation} from '../types/relayMutations'
 import {UpsertTeamPromptResponseMutation as TUpsertTeamPromptResponseMutation} from '../__generated__/UpsertTeamPromptResponseMutation.graphql'
+import SendClientSideEvent from '../utils/SendClientSideEvent'
 
 graphql`
   fragment UpsertTeamPromptResponseMutation_meeting on UpsertTeamPromptResponseSuccess {
@@ -17,6 +18,12 @@ graphql`
       createdAt
       ...TeamPromptResponseEmojis_response
     }
+    addedKudoses {
+      receiverUser {
+        preferredName
+      }
+      emojiUnicode
+    }
   }
 `
 
@@ -97,7 +104,30 @@ const UpsertTeamPromptResponseMutation: StandardMutation<
       const payload = store.getRootField('upsertTeamPromptResponse')
       upsertTeamPromptResponseUpdater(payload as any, {atmosphere, store})
     },
-    onCompleted,
+    onCompleted: (res, errors) => {
+      const addedKudoses = res.upsertTeamPromptResponse.addedKudoses
+      if (addedKudoses?.length && addedKudoses[0]) {
+        const {emojiUnicode} = addedKudoses[0]
+        atmosphere.eventEmitter.emit('addSnackbar', {
+          key: 'youGaveKudos',
+          message: `You gave kudos to ${addedKudoses
+            .map((kudos) => kudos.receiverUser.preferredName)
+            .join(', ')} ${emojiUnicode}`,
+          autoDismiss: 5,
+          onShow: () => {
+            SendClientSideEvent(atmosphere, 'Snackbar Viewed', {
+              snackbarType: 'kudosSent'
+            })
+          },
+          onManualDismiss: () => {
+            SendClientSideEvent(atmosphere, 'Snackbar Clicked', {
+              snackbarType: 'kudosSent'
+            })
+          }
+        })
+      }
+      onCompleted?.(res, errors)
+    },
     onError
   })
 }

packages/client/mutations/toasts/mapKudosReceivedToToast.ts

@@ -4,29 +4,27 @@ import {mapKudosReceivedToToast_notification$data} from '../../__generated__/map
 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
+    emojiUnicode
   }
 `
 
 const mapKudosReceivedToToast = (
   notification: mapKudosReceivedToToast_notification$data,
   {atmosphere, history}: OnNextHistoryContext
 ): Snack => {
-  const {id: notificationId, meetingName, name, emoji, meetingId} = notification
-  const {unicode} = getReactji(emoji)
+  const {id: notificationId, meetingName, name, emojiUnicode, meetingId} = notification
   return {
     autoDismiss: 5,
     showDismissButton: true,
     key: makeNotificationToastKey(notificationId),
-    message: `${unicode} ${name} gave you kudos in`,
+    message: `${emojiUnicode} ${name} gave you kudos in`,
     action: {
       label: meetingName,
       callback: () => {

packages/client/mutations/toasts/mapResponseMentionedToToast.ts

@@ -3,6 +3,7 @@ import {Snack} from '../../components/Snackbar'
 import {OnNextHistoryContext} from '../../types/relayMutations'
 import {mapResponseMentionedToToast_notification$data} from '../../__generated__/mapResponseMentionedToToast_notification.graphql'
 import makeNotificationToastKey from './makeNotificationToastKey'
+import SendClientSideEvent from '../../utils/SendClientSideEvent'
 
 graphql`
   fragment mapResponseMentionedToToast_notification on NotifyResponseMentioned {
@@ -17,30 +18,47 @@ graphql`
       id
       name
     }
+    kudosEmojiUnicode
   }
 `
 
 const mapResponseMentionedToToast = (
   notification: mapResponseMentionedToToast_notification$data,
-  {history}: OnNextHistoryContext
+  {atmosphere, history}: OnNextHistoryContext
 ): Snack | null => {
   if (!notification) return null
-  const {id: notificationId, meeting, response} = notification
+  const {id: notificationId, meeting, response, kudosEmojiUnicode} = notification
   const {preferredName: authorName} = response.user
   const {id: meetingId, name: meetingName} = meeting
 
+  const message = kudosEmojiUnicode
+    ? `${kudosEmojiUnicode} ${authorName} mentioned you and gave kudos in their response in ${meetingName}.`
+    : `${authorName} mentioned you in their response in ${meetingName}.`
+
   // :TODO: (jmtaber129): Check if we're already open to the relevant standup response discussion
   // thread, and do nothing if we are.
 
   return {
     key: makeNotificationToastKey(notificationId),
     autoDismiss: 10,
-    message: `${authorName} mentioned you in their response in ${meetingName}.`,
+    message,
     action: {
       label: 'See their response',
       callback: () => {
         history.push(`/meet/${meetingId}/responses?responseId=${encodeURIComponent(response.id)}`)
       }
+    },
+    onShow: () => {
+      SendClientSideEvent(atmosphere, 'Snackbar Viewed', {
+        snackbarType: 'responseMentioned',
+        kudosEmojiUnicode
+      })
+    },
+    onManualDismiss: () => {
+      SendClientSideEvent(atmosphere, 'Snackbar Clicked', {
+        snackbarType: 'responseMentioned',
+        kudosEmojiUnicode
+      })
     }
   }
 }

packages/server/database/types/NotificationKudosReceived.ts

@@ -8,6 +8,7 @@ interface Input {
   meetingName: string
   meetingId: string
   emoji: string
+  emojiUnicode: string
 }
 
 export default class NotificationKudosReceived extends Notification {
@@ -18,15 +19,17 @@ export default class NotificationKudosReceived extends Notification {
   meetingName: string
   meetingId: string
   emoji: string
+  emojiUnicode: string
 
   constructor(input: Input) {
-    const {userId, name, picture, senderUserId, meetingName, meetingId, emoji} = input
+    const {userId, name, picture, senderUserId, meetingName, meetingId, emoji, emojiUnicode} = input
     super({userId, type: 'KUDOS_RECEIVED'})
     this.name = name
     this.picture = picture
     this.senderUserId = senderUserId
     this.meetingName = meetingName
     this.meetingId = meetingId
     this.emoji = emoji
+    this.emojiUnicode = emojiUnicode
   }
 }

packages/server/database/types/NotificationResponseMentioned.ts

@@ -4,17 +4,23 @@ interface Input {
   responseId: string
   meetingId: string
   userId: string
+  kudosEmoji?: string | null
+  kudosEmojiUnicode?: string | null
 }
 
 export default class NotificationResponseMentioned extends Notification {
   readonly type = 'RESPONSE_MENTIONED'
   responseId: string
   meetingId: string
+  kudosEmoji?: string | null
+  kudosEmojiUnicode?: string | null
 
   constructor(input: Input) {
-    const {responseId, meetingId, userId} = input
+    const {responseId, meetingId, userId, kudosEmoji, kudosEmojiUnicode} = input
     super({userId, type: 'RESPONSE_MENTIONED'})
     this.responseId = responseId
     this.meetingId = meetingId
+    this.kudosEmoji = kudosEmoji
+    this.kudosEmojiUnicode = kudosEmojiUnicode
   }
 }

packages/server/graphql/mutations/helpers/notifications/SlackNotifier.ts

@@ -267,9 +267,12 @@ const getSlackMessageForNotification = async (
     const responseId = notification.responseId
     const response = await dataLoader.get('teamPromptResponses').loadNonNull(responseId)
     const author = await dataLoader.get('users').loadNonNull(response.userId)
+    const title = notification.kudosEmojiUnicode
+      ? `${notification.kudosEmojiUnicode} *${author.preferredName}* mentioned you and gave kudos in their response in *${meeting.name}*`
+      : `*${author.preferredName}* mentioned you in their response in *${meeting.name}*`
     return {
       responseId,
-      title: `*${author.preferredName}* mentioned you in their response in *${meeting.name}*`,
+      title,
       buttonText: 'See their response'
     }
   }

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

@@ -187,7 +187,8 @@ const addReactjiToReactable: MutationResolvers['addReactjiToReactable'] = async
         reactableType: reactableType,
         reactableId: reactableId,
         teamId,
-        emoji: team.kudosEmoji
+        emoji: team.kudosEmoji,
+        emojiUnicode: team.kudosEmojiUnicode
       })
       .returning('id')
       .executeTakeFirst())!.id
@@ -200,6 +201,7 @@ const addReactjiToReactable: MutationResolvers['addReactjiToReactable'] = async
       meetingId,
       meetingName: meeting.name,
       emoji: team.kudosEmoji,
+      emojiUnicode: team.kudosEmojiUnicode,
       name: senderUser.preferredName,
       picture: senderUser.picture
     })