From df0000899cde4d0ac6dfd2d6a9e0a4e1419c477d Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Wed, 2 Dec 2020 14:24:52 -0800 Subject: [PATCH 1/3] Add EnablePushNotificationsDrawer --- src/assets/img/iconGradientNotification.svg | 14 +++ src/containers/App.js | 5 + .../EnablePushNotificationsDrawer.module.css | 68 +++++++++++++ .../EnablePushNotificationsDrawer.tsx | 96 +++++++++++++++++++ .../store/selectors.ts | 4 + .../store/slice.ts | 26 +++++ src/store/reducers.js | 4 +- src/store/types.ts | 4 + 8 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 src/assets/img/iconGradientNotification.svg create mode 100644 src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.module.css create mode 100644 src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx create mode 100644 src/containers/enable-push-notifications-drawer/store/selectors.ts create mode 100644 src/containers/enable-push-notifications-drawer/store/slice.ts diff --git a/src/assets/img/iconGradientNotification.svg b/src/assets/img/iconGradientNotification.svg new file mode 100644 index 0000000000..a3ef87ddcf --- /dev/null +++ b/src/assets/img/iconGradientNotification.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/containers/App.js b/src/containers/App.js index c7ec48f9f7..179fb75317 100644 --- a/src/containers/App.js +++ b/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,10 @@ class App extends Component { {/* Mobile-only */} {isMobileClient && } + {/* Native Mobile-only */} + {isMobileClient /* && NATIVE_MOBILE */ && ( + + )} {shouldShowPopover && isMobileClient && !NATIVE_MOBILE && ( { + const dispatch = useDispatch() + const isOpen = useSelector(getIsOpen) + const keyboardVisible = useSelector(getKeyboardVisibility) + + const onClose = useCallback(() => { + dispatch(hide()) + }, [dispatch]) + + const enablePushNotifications = useCallback(() => { + const message = new EnablePushNotificationsMessage() + message.send() + }, []) + + return ( + +
+
+
+ +
{messages.dontMiss}
+
+
{messages.turnOn}
+
+
+
+
+ + {messages.favorites} +
+
+ + {messages.reposts} +
+
+ + {messages.followers} +
+
+ + {messages.coSigns} +
+
+ + {messages.remixes} +
+
+ + {messages.newReleases} +
+
+
+
+ + ) +} + +export default EnablePushNotificationsDrawer diff --git a/src/containers/enable-push-notifications-drawer/store/selectors.ts b/src/containers/enable-push-notifications-drawer/store/selectors.ts new file mode 100644 index 0000000000..a412dca5a2 --- /dev/null +++ b/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 diff --git a/src/containers/enable-push-notifications-drawer/store/slice.ts b/src/containers/enable-push-notifications-drawer/store/slice.ts new file mode 100644 index 0000000000..a086b5b25c --- /dev/null +++ b/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 diff --git a/src/store/reducers.js b/src/store/reducers.js index ed8027a455..ac031241b8 100644 --- a/src/store/reducers.js +++ b/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, diff --git a/src/store/types.ts b/src/store/types.ts index a4736aeee8..667c794b5c 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -28,6 +28,7 @@ import QueueReducer from 'store/queue/slice' import { PasswordResetState } from 'containers/password-reset/store/types' 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 AccountReducer from 'store/account/reducer' import tokenDashboard from 'store/token-dashboard/slice' @@ -113,6 +114,9 @@ export type AppState = { appCTAModal: ReturnType musicConfetti: ReturnType mobileUploadDrawer: ReturnType + enablePushNotificationsDrawer: ReturnType< + typeof EnablePushNotificationsDrawer + > } pages: { explore: ExplorePageState From 96061d08176daec4433dfd2cf83e54b14565e68f Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Thu, 3 Dec 2020 19:21:39 -0800 Subject: [PATCH 2/3] Add native integration --- .../EnablePushNotificationsDrawer.tsx | 15 ++++++----- .../store/sagas.ts | 15 +++++++++++ .../sign-on/components/mobile/SignOnPage.tsx | 27 ++++++++++++++----- .../native-mobile-interface/lifecycle.ts | 6 +++++ src/services/native-mobile-interface/types.ts | 2 ++ src/store/account/sagas.js | 4 +++ src/store/sagas.js | 2 ++ 7 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 src/containers/enable-push-notifications-drawer/store/sagas.ts diff --git a/src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx b/src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx index 9439a56d57..700835767b 100644 --- a/src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx +++ b/src/containers/enable-push-notifications-drawer/EnablePushNotificationsDrawer.tsx @@ -2,7 +2,6 @@ import React, { useCallback } from 'react' import { useDispatch, useSelector } from 'react-redux' import { getIsOpen } from './store/selectors' -import { getKeyboardVisibility } from 'store/application/ui/mobileKeyboard/selectors' import Drawer from 'components/drawer/Drawer' import styles from './EnablePushNotificationsDrawer.module.css' @@ -18,7 +17,8 @@ import { IconRepost } from '@audius/stems' import { hide } from './store/slice' -import { EnablePushNotificationsMessage } from 'services/native-mobile-interface/notifications' +import { togglePushNotificationSetting } from 'containers/settings-page/store/actions' +import { PushNotificationSetting } from 'containers/settings-page/store/types' const messages = { dontMiss: `Don't Miss a Beat!`, @@ -34,19 +34,20 @@ const messages = { const EnablePushNotificationsDrawer = () => { const dispatch = useDispatch() const isOpen = useSelector(getIsOpen) - const keyboardVisible = useSelector(getKeyboardVisibility) const onClose = useCallback(() => { dispatch(hide()) }, [dispatch]) const enablePushNotifications = useCallback(() => { - const message = new EnablePushNotificationsMessage() - message.send() - }, []) + dispatch( + togglePushNotificationSetting(PushNotificationSetting.MobilePush, true) + ) + onClose() + }, [dispatch, onClose]) return ( - +
diff --git a/src/containers/enable-push-notifications-drawer/store/sagas.ts b/src/containers/enable-push-notifications-drawer/store/sagas.ts new file mode 100644 index 0000000000..c8f420c04a --- /dev/null +++ b/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 diff --git a/src/containers/sign-on/components/mobile/SignOnPage.tsx b/src/containers/sign-on/components/mobile/SignOnPage.tsx index b29fd33fc9..b72e68a986 100644 --- a/src/containers/sign-on/components/mobile/SignOnPage.tsx +++ b/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) => { 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()) } } diff --git a/src/services/native-mobile-interface/lifecycle.ts b/src/services/native-mobile-interface/lifecycle.ts index dbf4e833f2..6f257c36f7 100644 --- a/src/services/native-mobile-interface/lifecycle.ts +++ b/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, {}) + } +} diff --git a/src/services/native-mobile-interface/types.ts b/src/services/native-mobile-interface/types.ts index 8851c65655..6f4bd53d45 100644 --- a/src/services/native-mobile-interface/types.ts +++ b/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', diff --git a/src/store/account/sagas.js b/src/store/account/sagas.js index 4eac901fa0..40cda29551 100644 --- a/src/store/account/sagas.js +++ b/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) { diff --git a/src/store/sagas.js b/src/store/sagas.js index c522f5248a..5b46491572 100644 --- a/src/store/sagas.js +++ b/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(), From d6ba91015fc8eb0bd1fb9e73e9e00ec7063a0bb2 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Fri, 4 Dec 2020 11:50:53 -0800 Subject: [PATCH 3/3] Remove comment --- src/containers/App.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/containers/App.js b/src/containers/App.js index 179fb75317..bc7b11ea4c 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -816,9 +816,7 @@ class App extends Component { {/* Mobile-only */} {isMobileClient && } {/* Native Mobile-only */} - {isMobileClient /* && NATIVE_MOBILE */ && ( - - )} + {isMobileClient && NATIVE_MOBILE && } {shouldShowPopover && isMobileClient && !NATIVE_MOBILE && (