Enable notifications reminder

src/containers/App.js

@@ -143,6 +143,7 @@ import ExploreCollectionsPage from './explore-page/ExploreCollectionsPage'
 import ConfirmerPreview from 'containers/confirmer-preview/ConfirmerPreview'
 import Notice from './notice/Notice'
 import SignOn from 'containers/sign-on/SignOn'
+import EnablePushNotificationsDrawer from './enable-push-notifications-drawer/EnablePushNotificationsDrawer'
 
 const MOBILE_BANNER_LOCAL_STORAGE_KEY = 'dismissMobileAppBanner'
 
@@ -814,6 +815,8 @@ class App extends Component {
 
         {/* Mobile-only */}
         {isMobileClient && <ConnectedReachabilityBar />}
+        {/* Native Mobile-only */}
+        {isMobileClient && NATIVE_MOBILE && <EnablePushNotificationsDrawer />}
 
         {shouldShowPopover && isMobileClient && !NATIVE_MOBILE && (
           <AppRedirectPopover

src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.module.css

@@ -0,0 +1,68 @@
+.drawer {
+  height: 690px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 40px 36px;
+}
+
+.iconNotification {
+  width: 66px;
+  height: 66px;
+}
+
+.cta {
+  font-weight: var(--font-heavy);
+  font-size: 28px;
+  line-height: 34px;
+  text-align: center;
+  user-select: none;
+  background-image: var(--page-header-gradient);
+
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+.turnOn {
+  font-weight: var(--font-medium);
+  font-size: var(--font-2xl);
+  line-height: 29px;
+  text-align: center;
+  margin-top: 4px;
+}
+
+.bottom {
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action {
+  font-weight: var(--font-bold);
+  font-size: var(--font-2xl);
+  line-height: 40px;
+  display: flex;
+  align-items: center;
+  color: var(--neutral-light-2);
+}
+
+.action svg {
+  height: 30px;
+  width: 30px;
+  margin-right: 16px;
+}
+
+.action svg:not(.coSign) path {
+  fill: var(--neutral-light-2);
+}
+
+.action svg.coSign rect {
+  fill: var(--neutral-light-2);
+}

src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { getIsOpen } from './store/selectors'
+
+import Drawer from 'components/drawer/Drawer'
+import styles from './EnablePushNotificationsDrawer.module.css'
+import { ReactComponent as IconNotification } from 'assets/img/iconGradientNotification.svg'
+import {
+  Button,
+  ButtonType,
+  IconCoSign,
+  IconExploreNewReleases,
+  IconFollow,
+  IconHeart,
+  IconRemix,
+  IconRepost
+} from '@audius/stems'
+import { hide } from './store/slice'
+import { togglePushNotificationSetting } from 'containers/settings-page/store/actions'
+import { PushNotificationSetting } from 'containers/settings-page/store/types'
+
+const messages = {
+  dontMiss: `Don't Miss a Beat!`,
+  turnOn: 'Turn on Notifications',
+  favorites: 'Favorites',
+  reposts: 'Reposts',
+  followers: 'Followers',
+  coSigns: 'Co-Signs',
+  remixes: 'Remixes',
+  newReleases: 'New Releases'
+}
+
+const EnablePushNotificationsDrawer = () => {
+  const dispatch = useDispatch()
+  const isOpen = useSelector(getIsOpen)
+
+  const onClose = useCallback(() => {
+    dispatch(hide())
+  }, [dispatch])
+
+  const enablePushNotifications = useCallback(() => {
+    dispatch(
+      togglePushNotificationSetting(PushNotificationSetting.MobilePush, true)
+    )
+    onClose()
+  }, [dispatch, onClose])
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} shouldClose={!isOpen}>
+      <div className={styles.drawer}>
+        <div className={styles.top}>
+          <div className={styles.cta}>
+            <IconNotification className={styles.iconNotification} />
+            <div>{messages.dontMiss}</div>
+          </div>
+          <div className={styles.turnOn}>{messages.turnOn}</div>
+        </div>
+        <div className={styles.bottom}>
+          <div className={styles.actions}>
+            <div className={styles.action}>
+              <IconHeart />
+              {messages.favorites}
+            </div>
+            <div className={styles.action}>
+              <IconRepost />
+              {messages.reposts}
+            </div>
+            <div className={styles.action}>
+              <IconFollow />
+              {messages.followers}
+            </div>
+            <div className={styles.action}>
+              <IconCoSign className={styles.coSign} />
+              {messages.coSigns}
+            </div>
+            <div className={styles.action}>
+              <IconRemix />
+              {messages.remixes}
+            </div>
+            <div className={styles.action}>
+              <IconExploreNewReleases />
+              {messages.newReleases}
+            </div>
+          </div>
+        </div>
+        <Button
+          type={ButtonType.PRIMARY_ALT}
+          text='Enable Notifications'
+          onClick={enablePushNotifications}
+        />
+      </div>
+    </Drawer>
+  )
+}
+
+export default EnablePushNotificationsDrawer

src/containers/enable-push-notifications-drawer/store/sagas.ts

@@ -0,0 +1,15 @@
+import { put, takeEvery } from 'redux-saga/effects'
+import { MessageType } from 'services/native-mobile-interface/types'
+import { show } from './slice'
+
+function* watchEnablePushNotificationsReminder() {
+  yield takeEvery(MessageType.ENABLE_PUSH_NOTIFICATIONS_REMINDER, function* () {
+    yield put(show())
+  })
+}
+
+const sagas = () => {
+  return [watchEnablePushNotificationsReminder]
+}
+
+export default sagas

src/containers/enable-push-notifications-drawer/store/selectors.ts

@@ -0,0 +1,4 @@
+import { AppState } from 'store/types'
+
+export const getIsOpen = (state: AppState) =>
+  state.application.ui.enablePushNotificationsDrawer.isOpen

src/containers/enable-push-notifications-drawer/store/slice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+type EnablePushNotificationsDrawerState = {
+  isOpen: boolean
+}
+
+const initialState: EnablePushNotificationsDrawerState = {
+  isOpen: false
+}
+
+const slice = createSlice({
+  name: 'enable-push-notifications-drawer',
+  initialState,
+  reducers: {
+    show: state => {
+      state.isOpen = true
+    },
+    hide: state => {
+      state.isOpen = false
+    }
+  }
+})
+
+export const { show, hide } = slice.actions
+
+export default slice.reducer

src/containers/sign-on/components/mobile/SignOnPage.tsx

@@ -23,6 +23,7 @@ import styles from './SignOnPage.module.css'
 import { PushNotificationSetting } from 'containers/settings-page/store/types'
 import { BASE_URL, SIGN_UP_PAGE } from 'utils/route'
 import cn from 'classnames'
+import { show as showEnablePushNotificationsDrawer } from 'containers/enable-push-notifications-drawer/store/slice'
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
 export type SignOnProps = {
@@ -96,7 +97,8 @@ const SignOnPage = ({
   onSelectArtistCategory,
   onNextPage,
   suggestedFollows: suggestedFollowEntries,
-  togglePushNotificationSetting
+  togglePushNotificationSetting,
+  showEnablePushNotificationsDrawer
 }: SignOnProps & ReturnType<typeof mapDispatchToProps>) => {
   const {
     email,
@@ -119,11 +121,22 @@ const SignOnPage = ({
 
   const onAllowNotifications = useCallback(() => {
     if (NATIVE_MOBILE) {
-      // Enable push notifications (will trigger device popup)
-      togglePushNotificationSetting(PushNotificationSetting.MobilePush, true)
-      onNextPage()
+      if (page === Pages.SIGNIN) {
+        // Trigger enable push notifs drawer
+        showEnablePushNotificationsDrawer()
+      } else {
+        // Sign up flow
+        // Enable push notifications (will trigger device popup)
+        togglePushNotificationSetting(PushNotificationSetting.MobilePush, true)
+        onNextPage()
+      }
     }
-  }, [togglePushNotificationSetting, onNextPage])
+  }, [
+    togglePushNotificationSetting,
+    onNextPage,
+    page,
+    showEnablePushNotificationsDrawer
+  ])
 
   const pages = {
     // Captures Pages.EMAIL and Pages.SIGNIN
@@ -323,7 +336,9 @@ function mapDispatchToProps(dispatch: Dispatch) {
     ) =>
       dispatch(
         settingPageActions.togglePushNotificationSetting(notificationType, isOn)
-      )
+      ),
+    showEnablePushNotificationsDrawer: () =>
+      dispatch(showEnablePushNotificationsDrawer())
   }
 }
 

src/services/native-mobile-interface/lifecycle.ts

@@ -24,3 +24,9 @@ export class NotOnFirstPage extends NativeMobileMessage {
     super(MessageType.NOT_ON_FIRST_PAGE, {})
   }
 }
+
+export class SignedIn extends NativeMobileMessage {
+  constructor() {
+    super(MessageType.SIGNED_IN, {})
+  }
+}

src/services/native-mobile-interface/types.ts

@@ -23,6 +23,7 @@ export enum MessageType {
   ENABLE_PUSH_NOTIFICATIONS = 'enable-push-notifications',
   DISABLE_PUSH_NOTIFICATIONS = 'disable-push-notifications',
   RESET_NOTIFICATIONS_BADGE_COUNT = 'reset-notifications-badge-count',
+  ENABLE_PUSH_NOTIFICATIONS_REMINDER = 'action/enable-push-notifications-reminder',
 
   // Haptics
   HAPTIC_FEEDBACK = 'haptic-feedback',
@@ -40,6 +41,7 @@ export enum MessageType {
   BACKEND_SETUP = 'backend-setup',
   REQUEST_NETWORK_CONNECTED = 'request-network-connected',
   IS_NETWORK_CONNECTED = 'is-network-connected',
+  SIGNED_IN = 'signed-in',
 
   // Keyboard
   KEYBOARD_VISIBLE = 'keyboard-visible',

src/store/account/sagas.js

@@ -48,6 +48,7 @@ import {
   clearAudiusAccount,
   clearAudiusAccountUser
 } from 'services/LocalStorage'
+import { SignedIn } from 'services/native-mobile-interface/lifecycle'
 
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
@@ -63,6 +64,9 @@ function* onFetchAccount(account) {
   yield fork(AudiusBackend.updateUserEvent, {
     hasSignedInNativeMobile: !!NATIVE_MOBILE
   })
+  if (NATIVE_MOBILE) {
+    new SignedIn().send()
+  }
 }
 
 export function* fetchAccountAsync(action) {

src/store/reducers.js

@@ -46,6 +46,7 @@ import remixSettingsModal from 'containers/remix-settings-modal/store/slice'
 import remoteConfig from 'containers/remote-config/slice'
 import musicConfetti from 'containers/music-confetti/store/slice'
 import mobileUploadDrawer from 'containers/mobile-upload-drawer/store/slice'
+import enablePushNotificationsDrawer from 'containers/enable-push-notifications-drawer/store/slice'
 
 import account from 'store/account/reducer'
 import tracksReducer from 'store/cache/tracks/reducer'
@@ -134,7 +135,8 @@ const createRootReducer = routeHistory =>
         stemsUpload,
         appCTAModal,
         musicConfetti,
-        mobileUploadDrawer
+        mobileUploadDrawer,
+        enablePushNotificationsDrawer
       }),
       pages: combineReducers({
         explore,

src/store/sagas.js

@@ -33,6 +33,7 @@ import firstUploadModalSagas from 'containers/first-upload-modal/store/sagas'
 import addToPlaylistSagas from 'containers/add-to-playlist/store/sagas'
 import remixSettingsModalSagas from 'containers/remix-settings-modal/store/sagas'
 import remoteConfigSagas from 'containers/remote-config/sagas'
+import enablePushNotificationsSagas from 'containers/enable-push-notifications-drawer/store/sagas'
 
 import analyticsSagas from 'store/analytics/sagas'
 import accountSagas from 'store/account/sagas'
@@ -123,6 +124,7 @@ export default function* rootSaga() {
     remixesSagas(),
     deletedSagas(),
     tokenDashboardSagas(),
+    enablePushNotificationsSagas(),
 
     // Remote config
     remoteConfigSagas(),