|
| 1 | +import { useCallback, useState } from 'react' |
| 2 | + |
| 3 | +import { Client, accountSelectors } from '@audius/common' |
| 4 | +import { push as pushRoute } from 'connected-react-router' |
| 5 | +import { useDispatch } from 'react-redux' |
| 6 | + |
| 7 | +import { useSelector } from 'common/hooks/useSelector' |
| 8 | +import { getClient } from 'utils/clientUtil' |
| 9 | +import { CHATS_PAGE } from 'utils/route' |
| 10 | + |
| 11 | +import { CallToActionBanner } from './CallToActionBanner' |
| 12 | + |
| 13 | +const messages = { |
| 14 | + text: 'Direct Messaging Now Available!', |
| 15 | + pill: 'New' |
| 16 | +} |
| 17 | + |
| 18 | +const { getHasAccount } = accountSelectors |
| 19 | + |
| 20 | +const DIRECT_MESSAGES_BANNER_LOCAL_STORAGE_KEY = 'dismissDirectMessagesBanner' |
| 21 | + |
| 22 | +/** |
| 23 | + * Displays a CTA Banner announcing the launch of Direct Messaging |
| 24 | + * for logged in users on desktop web and desktop app (since logged out users can't use Direct Messages) |
| 25 | + */ |
| 26 | +export const DirectMessagesBanner = () => { |
| 27 | + const dispatch = useDispatch() |
| 28 | + const signedIn = useSelector(getHasAccount) |
| 29 | + const isMobile = getClient() === Client.MOBILE |
| 30 | + const hasDismissed = window.localStorage.getItem( |
| 31 | + DIRECT_MESSAGES_BANNER_LOCAL_STORAGE_KEY |
| 32 | + ) |
| 33 | + const [isVisible, setIsVisible] = useState( |
| 34 | + !hasDismissed && !isMobile && signedIn |
| 35 | + ) |
| 36 | + |
| 37 | + const handleClose = useCallback(() => { |
| 38 | + setIsVisible(false) |
| 39 | + window.localStorage.setItem( |
| 40 | + DIRECT_MESSAGES_BANNER_LOCAL_STORAGE_KEY, |
| 41 | + 'true' |
| 42 | + ) |
| 43 | + }, []) |
| 44 | + |
| 45 | + const handleAccept = useCallback(() => { |
| 46 | + dispatch(pushRoute(CHATS_PAGE)) |
| 47 | + handleClose() |
| 48 | + }, [dispatch, handleClose]) |
| 49 | + |
| 50 | + return isVisible ? ( |
| 51 | + <CallToActionBanner |
| 52 | + text={messages.text} |
| 53 | + pill={messages.pill} |
| 54 | + emoji={'speech-balloon'} |
| 55 | + onClose={handleClose} |
| 56 | + onAccept={handleAccept} |
| 57 | + /> |
| 58 | + ) : null |
| 59 | +} |
0 commit comments