[C-4583] Allow hidden tracks to be added to public playlists in UI

packages/mobile/src/components/add-to-collection-drawer/AddToCollectionDrawer.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useMemo, useState } from 'react'
 
+import { useFeatureFlag } from '@audius/common/hooks'
 import type { Collection } from '@audius/common/models'
 import { CreatePlaylistSource } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import type { CommonState } from '@audius/common/store'
 import {
   accountSelectors,
@@ -71,6 +73,9 @@ export const AddToCollectionDrawer = () => {
   const trackTitle = useSelector(getTrackTitle)
   const isTrackUnlisted = useSelector(getTrackIsUnlisted)
   const [filter, setFilter] = useState('')
+  const { isEnabled: isHiddenPaidScheduledEnabled } = useFeatureFlag(
+    FeatureFlags.HIDDEN_PAID_SCHEDULED
+  )
 
   const messages = getMessages(collectionType)
 
@@ -131,7 +136,11 @@ export const AddToCollectionDrawer = () => {
             if (!trackId) return
 
             // Don't add if the track is hidden, but collection is public
-            if (isTrackUnlisted && !item.is_private) {
+            if (
+              !isHiddenPaidScheduledEnabled &&
+              !isTrackUnlisted &&
+              !item.is_private
+            ) {
               toast({ content: messages.hiddenAdd })
               return
             }
@@ -162,6 +171,7 @@ export const AddToCollectionDrawer = () => {
       collectionType,
       isTrackUnlisted,
       messages,
+      isHiddenPaidScheduledEnabled,
       onClose,
       toast,
       dispatch

packages/web/src/components/add-to-collection/desktop/AddToCollectionModal.tsx

@@ -5,6 +5,7 @@ import {
   SquareSizes,
   Collection
 } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import {
   accountSelectors,
   cacheCollectionsActions,
@@ -22,6 +23,7 @@ import DynamicImage from 'components/dynamic-image/DynamicImage'
 import SearchBar from 'components/search-bar/SearchBar'
 import { Tooltip } from 'components/tooltip'
 import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt'
+import { useFlag } from 'hooks/useRemoteConfig'
 import { collectionPage } from 'utils/route'
 
 import styles from './AddToCollectionModal.module.css'
@@ -55,6 +57,9 @@ const AddToCollectionModal = () => {
   const isAlbumType = collectionType === 'album'
   const account = useSelector(getAccountWithNameSortedPlaylistsAndAlbums)
   const [searchValue, setSearchValue] = useState('')
+  const { isEnabled: isHiddenPaidScheduledEnabled } = useFlag(
+    FeatureFlags.HIDDEN_PAID_SCHEDULED
+  )
 
   const messages = getMessages(collectionType)
 
@@ -168,7 +173,11 @@ const AddToCollectionModal = () => {
               <div key={`${collection.playlist_id}`}>
                 <CollectionItem
                   collectionType={collectionType}
-                  disabled={isTrackUnlisted && !collection.is_private}
+                  disabled={
+                    !isHiddenPaidScheduledEnabled &&
+                    isTrackUnlisted &&
+                    !collection.is_private
+                  }
                   collection={collection}
                   handleClick={
                     isTrackUnlisted && !collection.is_private