[PAY-1688] Mobile: Share track, collection to DMs (#3840)

Author: rickyrombo

apps/audius-client/packages/mobile/src/components/share-drawer/ShareDrawer.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useRef } from 'react'
 import {
   accountSelectors,
   collectionsSocialActions,
+  createChatModalActions,
   FeatureFlags,
   shareModalUISelectors,
   shareSoundToTiktokModalActions,
@@ -16,12 +17,15 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import IconInstagram from 'app/assets/images/iconInstagram.svg'
 import IconLink from 'app/assets/images/iconLink.svg'
+import IconMessage from 'app/assets/images/iconMessage.svg'
 import IconShare from 'app/assets/images/iconShare.svg'
 import IconSnapchat from 'app/assets/images/iconSnapchat.svg'
 import TikTokIcon from 'app/assets/images/iconTikTokInverted.svg'
 import IconTwitterBird from 'app/assets/images/iconTwitterBird.svg'
+import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
+import type { AppTabScreenParamList } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -39,6 +43,7 @@ const { shareUser } = usersSocialActions
 const { shareTrack } = tracksSocialActions
 const { shareCollection } = collectionsSocialActions
 const { getAccountUser } = accountSelectors
+const { setState: setCreateChatModalState } = createChatModalActions
 
 export const shareToastTimeout = 1500
 
@@ -81,6 +86,7 @@ const useStyles = makeStyles(({ spacing }) => ({
 export const ShareDrawer = () => {
   const styles = useStyles()
   const viewShotRef = useRef() as React.RefObject<ViewShot>
+  const navigation = useNavigation<AppTabScreenParamList>()
 
   const { isEnabled: isShareSoundToTikTokEnabled } = useFeatureFlag(
     FeatureFlags.SHARE_SOUND_TO_TIKTOK
@@ -100,6 +106,17 @@ export const ShareDrawer = () => {
 
   const isPremiumTrack = content?.type === 'track' && content.track.is_premium
 
+  const handleShareToDirectMessage = useCallback(async () => {
+    if (!content) return
+    navigation.navigate('ChatUserList')
+    dispatch(
+      setCreateChatModalState({
+        // Just care about the link
+        presetMessage: getContentUrl(content)
+      })
+    )
+  }, [content, dispatch, navigation])
+
   const handleShareToTwitter = useCallback(async () => {
     if (!content) return
     const twitterShareUrl = await getTwitterShareUrl(content)
@@ -166,6 +183,12 @@ export const ShareDrawer = () => {
   )
 
   const getRows = useCallback(() => {
+    const shareToChatAction = {
+      icon: <IconMessage fill={secondary} height={26} width={26} />,
+      text: messages.directMessage,
+      callback: handleShareToDirectMessage
+    }
+
     const shareToTwitterAction = {
       icon: <IconTwitterBird fill={secondary} height={20} width={26} />,
       text: messages.twitter,
@@ -185,13 +208,13 @@ export const ShareDrawer = () => {
     }
 
     const copyLinkAction = {
-      text: messages.copyLink(shareType),
+      text: messages.copyLink,
       icon: <IconLink height={26} width={26} fill={secondary} />,
       callback: handleCopyLink
     }
 
     const shareSheetAction = {
-      text: messages.shareSheet(shareType),
+      text: messages.shareSheet,
       icon: <IconShare height={26} width={26} fill={secondary} />,
       callback: handleOpenShareSheet
     }
@@ -213,16 +236,16 @@ export const ShareDrawer = () => {
       icon: React.ReactElement
       style?: Record<string, string>
       callback: (() => void) | (() => Promise<void>)
-    }[] = [shareToTwitterAction]
+    }[] = [shareToChatAction, shareToTwitterAction]
 
     if (shouldIncludeTikTokSoundAction) {
       result.push(shareSoundToTiktokAction)
     }
 
     if (isShareableTrack) {
       result.push(shareToInstagramStoriesAction)
-      result.push(shareToSnapchatAction)
       result.push(shareVideoToTiktokAction)
+      result.push(shareToSnapchatAction)
     }
 
     result.push(copyLinkAction, shareSheetAction)
@@ -231,15 +254,15 @@ export const ShareDrawer = () => {
   }, [
     handleShareToTwitter,
     handleShareSoundToTikTok,
-    shareType,
     secondary,
     handleCopyLink,
     handleOpenShareSheet,
     handleShareToSnapchat,
     handleShareToInstagramStory,
     shouldIncludeTikTokSoundAction,
     isShareableTrack,
-    handleShareVideoToTiktok
+    handleShareVideoToTiktok,
+    handleShareToDirectMessage
   ])
 
   return (

apps/audius-client/packages/mobile/src/components/share-drawer/messages.ts

@@ -12,14 +12,15 @@ export const messages = {
   modalTitle: (asset: ShareType) => `Share ${shareTypeMap[asset]}`,
   hiddenPlaylistShareHelperText:
     'Spread the word! Share your playlist with friends and fans! Hidden playlists will be visible to anyone on the internet with the link.',
-  twitter: 'Share to Twitter',
-  instagramStory: 'Share to Instagram Story',
-  snapchat: 'Share to Snapchat',
-  tikTokVideo: 'Share to TikTok',
+  directMessage: 'Direct Message',
+  twitter: 'Twitter',
+  instagramStory: ' Instagram Story',
+  snapchat: 'Snapchat',
+  tikTokVideo: 'TikTok',
   tikTokSound: 'Share Sound to TikTok',
-  copyLink: (asset: ShareType) => `Copy Link to ${shareTypeMap[asset]}`,
+  copyLink: 'Copy Link',
   shareToStoryError: 'Sorry, something went wrong.',
-  shareSheet: (asset: ShareType) => `Share ${asset} via...`,
+  shareSheet: 'More...',
   toast: (asset: ShareType) => `Copied Link to ${shareTypeMap[asset]}`,
   trackShareText: (title: string, handle: string) =>
     `Check out ${title} by ${handle} on @AudiusProject #Audius`,

apps/audius-client/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useState } from 'react'
 
-import { chatActions, playerSelectors } from '@audius/common'
+import {
+  chatActions,
+  createChatModalSelectors,
+  playerSelectors
+} from '@audius/common'
 import { Platform, Pressable } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -13,6 +17,7 @@ import { useThemeColors } from 'app/utils/theme'
 
 const { sendMessage } = chatActions
 const { getHasTrack } = playerSelectors
+const { getPresetMessage } = createChatModalSelectors
 
 const messages = {
   startNewMessage: ' Start a New Message'
@@ -60,7 +65,8 @@ export const ChatTextInput = ({
   const dispatch = useDispatch()
   const { primary, primaryDark2 } = useThemeColors()
 
-  const [inputMessage, setInputMessage] = useState('')
+  const presetMessage = useSelector(getPresetMessage)
+  const [inputMessage, setInputMessage] = useState(presetMessage ?? '')
   const hasLength = inputMessage.length > 0
   const hasCurrentlyPlayingTrack = useSelector(getHasTrack)