[C-2689] Add upload confirmation modal (#3934)

packages/common/src/store/reducers.ts

@@ -114,6 +114,8 @@ import { StripeModalState } from './ui/stripe-modal/types'
 import theme, { ThemeState } from './ui/theme/slice'
 import toastReducer from './ui/toast/slice'
 import transactionDetailsReducer from './ui/transaction-details/slice'
+import uploadConfirmationReducer from './ui/upload-confirmation-modal/slice'
+import { UploadConfirmationModalState } from './ui/upload-confirmation-modal/types'
 import vipDiscordModalReducer from './ui/vip-discord-modal/slice'
 import { VipDiscordModalState } from './ui/vip-discord-modal/types'
 import upload from './upload/reducer'
@@ -202,6 +204,7 @@ export const reducers = () => ({
     searchUsersModal: searchUsersModalReducer,
     toast: toastReducer,
     transactionDetails: transactionDetailsReducer,
+    uploadConfirmationModal: uploadConfirmationReducer,
     userList: combineReducers({
       followers: followersUserListReducer,
       following: followingUserListReducer,
@@ -327,6 +330,7 @@ export type CommonState = {
     stripeModal: StripeModalState
     toast: ToastState
     transactionDetails: TransactionDetailsState
+    uploadConfirmationModal: UploadConfirmationModalState
     userList: {
       mutuals: ReturnType<typeof mutualsUserListReducer>
       notifications: ReturnType<typeof notificationsUserListReducer>

packages/common/src/store/sagas.ts

@@ -23,7 +23,8 @@ import {
   publishPlaylistConfirmationModalUISagas,
   mobileOverflowMenuUISagas,
   shareModalUISagas,
-  stripeModalUISagas
+  stripeModalUISagas,
+  uploadConfirmationModalUISagas
 } from 'store/ui'
 
 import { playlistUpdatesSagas } from './playlist-updates'
@@ -56,6 +57,7 @@ export const sagas = (_ctx: CommonStoreContext) => ({
   mobileOverflowMenuUI: mobileOverflowMenuUISagas,
   deletePlaylistConfirmationModalUI: deletePlaylistConfirmationModalUISagas,
   duplidateAddConfirmationModalUI: duplicateAddConfirmationModalUISagas,
+  uploadConfirmationModalUI: uploadConfirmationModalUISagas,
   publishPlaylistConfirmationModalUI: publishPlaylistConfirmationModalUISagas,
   player: playerSagas,
   playbackPosition: playbackPositionSagas,

packages/common/src/store/ui/index.ts

@@ -120,6 +120,14 @@ export * from './buy-audio/types'
 export * from './buy-audio/constants'
 export * as buyAudioSelectors from './buy-audio/selectors'
 
+export * as uploadConfirmationModalUISelectors from './upload-confirmation-modal/selectors'
+export {
+  default as uploadConfirmationModalUIReducer,
+  actions as uploadConfirmationModalUIActions
+} from './upload-confirmation-modal/slice'
+export { default as uploadConfirmationModalUISagas } from './upload-confirmation-modal/sagas'
+export * from './upload-confirmation-modal/types'
+
 export {
   default as withdrawUSDCReducer,
   actions as withdrawUSDCActions

packages/common/src/store/ui/modals/parentSlice.ts

@@ -42,7 +42,8 @@ export const initialState: BasicModalsState = {
   PremiumContentPurchase: { isOpen: false },
   CreateChatModal: { isOpen: false },
   LeavingAudiusModal: { isOpen: false },
-  InboxUnavailableModal: { isOpen: false }
+  InboxUnavailableModal: { isOpen: false },
+  UploadConfirmation: { isOpen: false }
 }
 
 const slice = createSlice({

packages/common/src/store/ui/modals/types.ts

@@ -44,6 +44,7 @@ export type Modals =
   | 'CreateChatModal'
   | 'InboxUnavailableModal'
   | 'LeavingAudiusModal'
+  | 'UploadConfirmation'
 
 export type BasicModalsState = {
   [modal in Modals]: BaseModalState

packages/common/src/store/ui/upload-confirmation-modal/sagas.ts

@@ -0,0 +1,20 @@
+import { takeEvery } from 'redux-saga/effects'
+import { put } from 'typed-redux-saga'
+
+import { setVisibility } from '../modals/parentSlice'
+
+import { open, OpenPayload, requestOpen } from './slice'
+
+function* handleRequestOpen(action: OpenPayload) {
+  const { payload } = action
+  yield* put(open(payload))
+  yield* put(setVisibility({ modal: 'UploadConfirmation', visible: true }))
+}
+
+function* watchHandleRequestOpen() {
+  yield takeEvery(requestOpen, handleRequestOpen)
+}
+
+export default function sagas() {
+  return [watchHandleRequestOpen]
+}

packages/common/src/store/ui/upload-confirmation-modal/selectors.ts

@@ -0,0 +1,7 @@
+import { CommonState } from 'store/commonStore'
+
+export const getHasPublicTracks = (state: CommonState) =>
+  state.ui.uploadConfirmationModal.hasPublicTracks
+
+export const getConfirmCallback = (state: CommonState) =>
+  state.ui.uploadConfirmationModal.confirmCallback

packages/common/src/store/ui/upload-confirmation-modal/slice.ts

@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { UploadConfirmationState } from './types'
+
+export type OpenPayload = PayloadAction<{
+  hasPublicTracks: boolean
+  confirmCallback: () => void
+}>
+
+const initialState: UploadConfirmationState = {
+  hasPublicTracks: true,
+  confirmCallback: () => {}
+}
+
+const slice = createSlice({
+  name: 'applications/ui/uploadConfirmation',
+  initialState,
+  reducers: {
+    requestOpen: (_state, _action: OpenPayload) => {},
+    open: (state, action: OpenPayload) => {
+      const { confirmCallback, hasPublicTracks } = action.payload
+      state.hasPublicTracks = hasPublicTracks
+      state.confirmCallback = confirmCallback
+    }
+  }
+})
+
+export const { open, requestOpen } = slice.actions
+export const actions = slice.actions
+export default slice.reducer

packages/common/src/store/ui/upload-confirmation-modal/types.ts

@@ -0,0 +1,8 @@
+export type UploadConfirmationState = {
+  hasPublicTracks: boolean
+  confirmCallback: () => void
+}
+
+export type UploadConfirmationModalState = {
+  isOpen: boolean
+} & UploadConfirmationState

packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.module.css

@@ -0,0 +1,17 @@
+.titleIcon path {
+  fill: var(--neutral-light-2);
+}
+
+.modalText {
+  text-align: center;
+}
+
+.modalButton {
+  font-size: var(--font-l) !important;
+  font-weight: var(--font-bold) !important;
+}
+
+.modalFooter {
+  column-gap: var(--unit-2);
+  padding: 0 var(--unit-6) var(--unit-6);
+}

packages/web/src/components/upload-confirmation-modal/UploadConfirmationModal.tsx

@@ -0,0 +1,90 @@
+import { useCallback } from 'react'
+
+import { uploadConfirmationModalUISelectors } from '@audius/common'
+import {
+  Button,
+  ButtonType,
+  IconUpload,
+  Modal,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle
+} from '@audius/stems'
+
+import { useModalState } from 'common/hooks/useModalState'
+import { useSelector } from 'common/hooks/useSelector'
+import { Text } from 'components/typography'
+
+import styles from './UploadConfirmationModal.module.css'
+
+const { getConfirmCallback, getHasPublicTracks } =
+  uploadConfirmationModalUISelectors
+
+const messages = {
+  title: 'Confirm Upload',
+  publicDescription:
+    'Ready to begin uploading? Your followers will be notified once your upload is complete.',
+  hiddenDescription: 'Ready to begin uploading?',
+  cancel: 'Go Back',
+  upload: 'Upload'
+}
+
+export const UploadConfirmationModal = () => {
+  const confirmCallback = useSelector(getConfirmCallback)
+  const hasPublicTracks = useSelector(getHasPublicTracks)
+  const [isOpen, setIsOpen] = useModalState('UploadConfirmation')
+
+  const onClose = useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
+
+  const handleConfirm = useCallback(() => {
+    confirmCallback()
+    onClose()
+  }, [confirmCallback, onClose])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size='small'>
+      <ModalHeader>
+        <ModalTitle
+          icon={<IconUpload className={styles.titleIcon} />}
+          title={
+            <Text
+              variant='label'
+              size='xLarge'
+              strength='strong'
+              color='neutralLight2'
+            >
+              {messages.title}
+            </Text>
+          }
+        />
+      </ModalHeader>
+      <ModalContent>
+        <ModalContentText className={styles.modalText}>
+          {hasPublicTracks
+            ? messages.publicDescription
+            : messages.hiddenDescription}
+        </ModalContentText>
+      </ModalContent>
+      <ModalFooter className={styles.modalFooter}>
+        <Button
+          textClassName={styles.modalButton}
+          fullWidth
+          text={messages.cancel}
+          type={ButtonType.COMMON}
+          onClick={onClose}
+        />
+        <Button
+          textClassName={styles.modalButton}
+          fullWidth
+          text={messages.upload}
+          type={ButtonType.PRIMARY}
+          onClick={handleConfirm}
+        />
+      </ModalFooter>
+    </Modal>
+  )
+}

packages/web/src/components/upload-confirmation-modal/index.ts

@@ -0,0 +1 @@
+export { UploadConfirmationModal } from './UploadConfirmationModal'

packages/web/src/pages/modals/Modals.tsx

@@ -34,6 +34,7 @@ import ConnectedMobileOverflowModal from 'components/track-overflow-modal/Connec
 import { TransactionDetailsModal } from 'components/transaction-details-modal'
 import UnfollowConfirmationModal from 'components/unfollow-confirmation-modal/UnfollowConfirmationModal'
 import UnloadDialog from 'components/unload-dialog/UnloadDialog'
+import { UploadConfirmationModal } from 'components/upload-confirmation-modal'
 import TierExplainerModal from 'components/user-badges/TierExplainerModal'
 import ConnectedUserListModal from 'components/user-list-modal/ConnectedUserListModal'
 import AudioBreakdownModal from 'pages/audio-rewards-page/components/modals/AudioBreakdownModal'
@@ -60,6 +61,7 @@ const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = {
   TiersExplainer: TierExplainerModal,
   DeletePlaylistConfirmation: DeletePlaylistConfirmationModal,
   DuplicateAddConfirmation: DuplicateAddConfirmationModal,
+  UploadConfirmation: UploadConfirmationModal,
   BuyAudio: BuyAudioModal,
   BuyAudioRecovery: BuyAudioRecoveryModal,
   TransactionDetails: TransactionDetailsModal,

packages/web/src/pages/upload-page/UploadPageNew.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-import { UploadType, uploadActions } from '@audius/common'
+import {
+  UploadType,
+  uploadActions,
+  uploadConfirmationModalUIActions
+} from '@audius/common'
 import { useDispatch } from 'react-redux'
 
 import Header from 'components/header/desktop/Header'
@@ -13,6 +17,8 @@ import { EditPage } from './pages/EditPage'
 import { UploadFormState } from './types'
 
 const { uploadTracks } = uploadActions
+const { requestOpen: openUploadConfirmationModal } =
+  uploadConfirmationModalUIActions
 
 const messages = {
   selectPageTitle: 'Upload Your Music',
@@ -99,7 +105,11 @@ export const UploadPageNew = () => {
             formState={formState}
             onContinue={(formState: UploadFormState) => {
               setFormState(formState)
-              setPhase(Phase.FINISH)
+              const hasPublicTracks =
+                formState.tracks?.some(
+                  (track) => !track.metadata.is_unlisted
+                ) ?? true
+              openUploadConfirmation(hasPublicTracks)
             }}
           />
         )
@@ -123,6 +133,20 @@ export const UploadPageNew = () => {
       }
   }
 
+  const openUploadConfirmation = useCallback(
+    (hasPublicTracks: boolean) => {
+      dispatch(
+        openUploadConfirmationModal({
+          hasPublicTracks,
+          confirmCallback: () => {
+            setPhase(Phase.FINISH)
+          }
+        })
+      )
+    },
+    [dispatch]
+  )
+
   const handleUpload = useCallback(() => {
     if (!formState.tracks) return
     const { tracks } = formState

packages/web/src/store/sagas.ts

@@ -9,6 +9,7 @@ import {
   remoteConfigSagas,
   deletePlaylistConfirmationModalUISagas as deletePlaylistConfirmationModalSagas,
   duplicateAddConfirmationModalUISagas as duplicateAddConfirmationModalSagas,
+  uploadConfirmationModalUISagas as uploadConfirmationModalSagas,
   publishPlaylistConfirmationModalUISagas as publishPlaylistConfirmationModalSagas,
   mobileOverflowMenuUISagas as overflowMenuSagas,
   shareModalUISagas as shareModalSagas,
@@ -198,6 +199,7 @@ export default function* rootSaga() {
     stemUploadSagas(),
     themeSagas(),
     tokenDashboardSagas(),
+    uploadConfirmationModalSagas(),
     userListModalSagas(),
     vipDiscordModalSagas(),
     commonReachabilitySagas(),