[PAY-1464] DMs: Go to chat after successful tip (#3625)

apps/audius-client/packages/common/src/store/pages/chat/index.ts

@@ -3,3 +3,4 @@ export * as chatSelectors from './selectors'
 export { sagas as chatSagas } from './sagas'
 export { chatMiddleware } from './middleware'
 export * from './types'
+export { makeChatId } from './utils'

apps/audius-client/packages/common/src/store/pages/chat/sagas.ts

@@ -18,7 +18,7 @@ import { ulid } from 'ulid'
 import { ID } from 'models/Identifiers'
 import { Status } from 'models/Status'
 import { getAccountUser, getUserId } from 'store/account/selectors'
-import { toastActions } from 'store/index'
+import { makeChatId, toastActions } from 'store/index'
 
 import { decodeHashId, encodeHashId, removeNullable } from '../../../utils'
 import { cacheUsersActions } from '../../cache'
@@ -205,7 +205,7 @@ function* doSetMessageReaction(action: ReturnType<typeof setMessageReaction>) {
 }
 
 function* doCreateChat(action: ReturnType<typeof createChat>) {
-  const { userIds } = action.payload
+  const { userIds, skipNavigation } = action.payload
   try {
     const audiusSdk = yield* getContext('audiusSdk')
     const sdk = yield* call(audiusSdk)
@@ -214,23 +214,19 @@ function* doCreateChat(action: ReturnType<typeof createChat>) {
       throw new Error('User not found')
     }
     // Try to get existing chat:
-    const chatId = [currentUserId, ...userIds]
-      .map((id) => encodeHashId(id))
-      .sort()
-      .join(':')
+    const chatId = makeChatId([currentUserId, ...userIds])
 
-    // Optimistically navigate - if we fail we'll toast
-    yield* put(goToChat({ chatId }))
+    // Optimistically go to the chat. If we fail to create it, we'll toast
+    if (!skipNavigation) {
+      yield* put(goToChat({ chatId }))
+    }
 
     try {
       yield* call(doFetchChatIfNecessary, { chatId })
     } catch {}
     const existingChat = yield* select((state) => getChat(state, chatId))
-    if (existingChat) {
-      // Simply navigate to the existing chat
-      yield* put(goToChat({ chatId: existingChat.chat_id }))
-    } else {
-      // Create new chat and navigate to it
+    if (!existingChat) {
+      // Create new chat
       yield* call([sdk.chats, sdk.chats.create], {
         userId: encodeHashId(currentUserId),
         invitedUserIds: userIds.map((id) => encodeHashId(id))

apps/audius-client/packages/common/src/store/pages/chat/slice.ts

@@ -126,7 +126,10 @@ const slice = createSlice({
   name: 'application/pages/chat',
   initialState,
   reducers: {
-    createChat: (_state, _action: PayloadAction<{ userIds: ID[] }>) => {
+    createChat: (
+      _state,
+      _action: PayloadAction<{ userIds: ID[]; skipNavigation?: boolean }>
+    ) => {
       // triggers saga
     },
     createChatSucceeded: (state, action: PayloadAction<{ chat: UserChat }>) => {

apps/audius-client/packages/common/src/store/pages/chat/utils.ts

@@ -0,0 +1,6 @@
+import { ID } from 'models/Identifiers'
+import { encodeHashId } from 'utils/hashIds'
+
+export const makeChatId = (userIds: ID[]) => {
+  return userIds.map(encodeHashId).sort().join(':')
+}

apps/audius-client/packages/mobile/src/components/inbox-unavailable-drawer/InboxUnavailableDrawer.tsx

@@ -138,7 +138,7 @@ const DrawerContent = ({ data }: DrawerContentProps) => {
   }, [closeDrawer])
 
   const handleTipPress = useCallback(() => {
-    dispatch(beginTip({ user, source: 'profile' }))
+    dispatch(beginTip({ user, source: 'inboxUnavailableModal' }))
     navigation.navigate('TipArtist')
     closeDrawer()
   }, [closeDrawer, dispatch, navigation, user])

apps/audius-client/packages/mobile/src/screens/tip-artist-screen/TipSentScreen.tsx

@@ -2,13 +2,15 @@ import { useCallback } from 'react'
 
 import type { SolanaWalletAddress } from '@audius/common'
 import {
+  makeChatId,
+  chatActions,
   formatNumberCommas,
   accountSelectors,
   tippingSelectors
 } from '@audius/common'
 import { useNavigation } from '@react-navigation/native'
 import { Platform } from 'react-native'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import IconCheck from 'app/assets/images/iconCheck.svg'
 import IconRemove from 'app/assets/images/iconRemove.svg'
@@ -48,6 +50,7 @@ const useStyles = makeStyles(({ spacing }) => ({
 }))
 
 export const TipSentScreen = () => {
+  const dispatch = useDispatch()
   const account = useSelector(getAccountUser)
   const {
     user: recipient,
@@ -78,8 +81,23 @@ export const TipSentScreen = () => {
   }
 
   const handleClose = useCallback(() => {
-    navigation.getParent()?.goBack()
-  }, [navigation])
+    // After success + close, take the user to the chat they were
+    // attempting to make if they were unlocking DMs by tipping.
+    // The saga will create the chat once the tip is confirmed
+    if (
+      source === 'inboxUnavailableModal' &&
+      account?.user_id &&
+      recipient?.user_id
+    ) {
+      dispatch(
+        chatActions.goToChat({
+          chatId: makeChatId([account.user_id, recipient.user_id])
+        })
+      )
+    } else {
+      navigation.getParent()?.goBack()
+    }
+  }, [account?.user_id, dispatch, navigation, recipient?.user_id, source])
 
   return (
     <TipScreen

apps/audius-client/packages/web/src/common/store/tipping/sagas.ts

@@ -376,12 +376,23 @@ function* sendTipAsync() {
         source
       })
     )
-    yield put(refreshTipGatedTracks({ userId: recipient.user_id, trackId }))
-    yield fork(function* () {
+
+    yield* put(refreshTipGatedTracks({ userId: recipient.user_id, trackId }))
+    yield* fork(function* () {
       yield* call(confirmTipIndexed, { sender, recipient })
       yield* put(
         fetchPermissions({ userIds: [sender.user_id, recipient.user_id] })
       )
+      if (source === 'inboxUnavailableModal') {
+        console.debug('Creating chat silently...')
+        // Create the chat but don't navigate
+        yield* put(
+          chatActions.createChat({
+            userIds: [recipient.user_id],
+            skipNavigation: true
+          })
+        )
+      }
     })
 
     /**

apps/audius-client/packages/web/src/components/tipping/tip-audio/TipAudioModal.tsx

@@ -6,7 +6,10 @@ import {
   tippingActions,
   TippingSendStatus,
   walletActions,
-  StringKeys
+  StringKeys,
+  chatActions,
+  accountSelectors,
+  makeChatId
 } from '@audius/common'
 import { Modal, ModalHeader, ModalTitle } from '@audius/stems'
 import cn from 'classnames'
@@ -26,7 +29,7 @@ import styles from './TipAudio.module.css'
 import { TipSent } from './TipSent'
 const { getBalance } = walletActions
 const { resetSend } = tippingActions
-const { getSendStatus } = tippingSelectors
+const { getSendStatus, getSendTipData } = tippingSelectors
 
 const messages = {
   sendATip: 'Send Tip',
@@ -111,14 +114,31 @@ export const TipAudioModal = () => {
   const dispatch = useDispatch()
   const sendStatus = useSelector(getSendStatus)
   const previousSendStatus = usePrevious(sendStatus)
+  const { user: recipient, source } = useSelector(getSendTipData)
+  const currentUserId = useSelector(accountSelectors.getUserId)
 
   const audioFeaturesDegradedText = useRemoteVar(
     StringKeys.AUDIO_FEATURES_DEGRADED_TEXT
   )
 
   const onClose = useCallback(() => {
+    // After success + close, take the user to the chat they were
+    // attempting to make if they were unlocking DMs by tipping.
+    // The saga will create the chat once the tip is confirmed
+    if (
+      source === 'inboxUnavailableModal' &&
+      sendStatus === 'SUCCESS' &&
+      recipient?.user_id &&
+      currentUserId
+    ) {
+      dispatch(
+        chatActions.goToChat({
+          chatId: makeChatId([currentUserId, recipient.user_id])
+        })
+      )
+    }
     dispatch(resetSend())
-  }, [dispatch])
+  }, [currentUserId, dispatch, recipient?.user_id, sendStatus, source])
 
   useEffect(() => {
     if (sendStatus !== null) {