[PE-6024] Use real remix eventData in remix contest section (#11916)

Author: dharit-tan

packages/common/src/api/tan-query/events/useRemixContest.ts

@@ -1,4 +1,5 @@
 import { EventEntityTypeEnum, EventEventTypeEnum } from '@audius/sdk'
+import type { OverrideProperties } from 'type-fest'
 
 import { Event } from '~/models/Event'
 import { ID } from '~/models/Identifiers'
@@ -8,13 +9,25 @@ import { SelectableQueryOptions } from '../types'
 import { useEvent } from './useEvent'
 import { useEventIdsByEntityId } from './useEventsByEntityId'
 
+type RemixContestData = {
+  description: string
+  prizeInfo: string
+}
+
+type RemixContestEvent = OverrideProperties<
+  Event,
+  {
+    eventData: RemixContestData
+  }
+>
+
 /**
  * Hook to fetch the remix contest event for a given entity ID.
  * Returns the first active RemixContest event found, or null if none exists.
  */
 export const useRemixContest = (
   entityId: ID | null | undefined,
-  options?: SelectableQueryOptions<Event>
+  options?: SelectableQueryOptions<Event, RemixContestEvent>
 ) => {
   const eventsQuery = useEventIdsByEntityId(
     {
@@ -27,7 +40,10 @@ export const useRemixContest = (
 
   const remixContestId = eventsQuery.data?.[0]
 
-  const { data: remixContest } = useEvent(remixContestId, options)
+  const { data: remixContest } = useEvent<RemixContestEvent>(
+    remixContestId,
+    options
+  )
 
   return {
     ...eventsQuery,

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -26,7 +26,6 @@ import type {
   Track,
   User
 } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import type { CommonState } from '@audius/common/store'
 import {
   accountSelectors,
@@ -59,7 +58,6 @@ import {
   Divider,
   Flex,
   IconCalendarMonth,
-  IconCloudUpload,
   IconPause,
   IconPlay,
   IconRepeatOff,
@@ -87,7 +85,6 @@ import { OfflineStatusRow } from 'app/components/offline-downloads'
 import { TrackDogEar } from 'app/components/track/TrackDogEar'
 import UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { make, track as trackEvent } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
@@ -236,11 +233,8 @@ export const TrackScreenDetailsTile = ({
     track?.genre === Genre.PODCASTS || track?.genre === Genre.AUDIOBOOKS
   const aiAttributionUserId = track?.ai_attribution_user_id
   const isUSDCPurchaseGated = isContentUSDCPurchaseGated(streamConditions)
-  const { isEnabled: isRemixContestEnabled } = useFeatureFlag(
-    FeatureFlags.REMIX_CONTEST
-  )
   const { data: remixContest } = useRemixContest(trackId)
-  const isRemixContest = isRemixContestEnabled && remixContest
+  const isRemixContest = !!remixContest
 
   const isPlayingPreview = isPreviewing && isPlaying
   const isPlayingFullAccess = isPlaying && !isPreviewing
@@ -446,9 +440,7 @@ export const TrackScreenDetailsTile = ({
     const addToAlbumAction =
       isOwner && !ddexApp ? OverflowAction.ADD_TO_ALBUM : null
     const overflowActions = [
-      isOwner && isRemixContestEnabled && !isRemix
-        ? OverflowAction.HOST_REMIX_CONTEST
-        : null,
+      isOwner && !isRemix ? OverflowAction.HOST_REMIX_CONTEST : null,
       addToAlbumAction,
       !isUnlisted || isOwner ? OverflowAction.ADD_TO_PLAYLIST : null,
       isOwner
@@ -502,46 +494,6 @@ export const TrackScreenDetailsTile = ({
     publish
   ])
 
-  const handlePressSubmitRemix = useCallback(() => {
-    if (!track?.track_id) return
-    navigation.push('Upload', {
-      initialMetadata: {
-        is_remix: true,
-        remix_of: {
-          tracks: [{ parent_track_id: track.track_id }]
-        }
-      }
-    })
-  }, [navigation, track])
-
-  const renderRemixContestSection = () => {
-    if (!isRemixContest) return null
-    const isContestOver = dayjs(remixContest?.endDate).isBefore(dayjs())
-    return (
-      <Flex gap='m'>
-        <Flex row gap='xs' alignItems='center'>
-          <Text variant='label' color='accent'>
-            {isContestOver ? messages.contestEnded : messages.contestDeadline}
-          </Text>
-          <Text size='s' strength='strong'>
-            {messages.deadline(remixContest?.endDate)}
-          </Text>
-        </Flex>
-        {!isOwner ? (
-          <Flex flex={1}>
-            <Button
-              variant='secondary'
-              size='small'
-              iconLeft={IconCloudUpload}
-              onPress={handlePressSubmitRemix}
-            >
-              {messages.uploadRemixButtonText}
-            </Button>
-          </Flex>
-        ) : null}
-      </Flex>
-    )
-  }
   const renderBottomContent = () => {
     return hasDownloadableAssets ? (
       <>
@@ -705,7 +657,6 @@ export const TrackScreenDetailsTile = ({
         <TrackDescription description={description} scrollRef={scrollViewRef} />
         <TrackMetadataList trackId={trackId} />
         {renderTags()}
-        {renderRemixContestSection()}
         <OfflineStatusRow contentId={trackId} isCollection={false} />
         {renderBottomContent()}
       </Flex>

packages/web/src/components/track/GiantTrackTile.tsx

@@ -7,7 +7,6 @@ import {
   useStems,
   useTrack
 } from '@audius/common/api'
-import { useFeatureFlag } from '@audius/common/hooks'
 import {
   isContentUSDCPurchaseGated,
   ID,
@@ -16,19 +15,12 @@ import {
   AccessConditions,
   FavoriteSource
 } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
 import {
   PurchaseableContentType,
   useEarlyReleaseConfirmationModal,
   usePublishConfirmationModal
 } from '@audius/common/store'
-import {
-  Genre,
-  Nullable,
-  dayjs,
-  formatReleaseDate,
-  route
-} from '@audius/common/utils'
+import { Genre, Nullable, dayjs, formatReleaseDate } from '@audius/common/utils'
 import {
   Text,
   Box,
@@ -41,7 +33,6 @@ import {
   Button,
   MusicBadge,
   Paper,
-  IconCloudUpload,
   PlainButton,
   IconCaretDown,
   IconCaretUp,
@@ -66,8 +57,6 @@ import Toast from 'components/toast/Toast'
 import Tooltip from 'components/tooltip/Tooltip'
 import { ComponentPlacement } from 'components/types'
 import { UserGeneratedText } from 'components/user-generated-text'
-import { useNavigateToPage } from 'hooks/useNavigateToPage'
-import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
 
 import { AiTrackSection } from './AiTrackSection'
 import { CardTitle } from './CardTitle'
@@ -80,8 +69,6 @@ import { TrackDogEar } from './TrackDogEar'
 import { TrackMetadataList } from './TrackMetadataList'
 import { TrackStats } from './TrackStats'
 
-const { UPLOAD_PAGE } = route
-
 const DownloadSection = lazy(() =>
   import('./DownloadSection').then((module) => ({
     default: module.DownloadSection
@@ -215,7 +202,6 @@ export const GiantTrackTile = ({
   ddexApp,
   scrollToCommentSection
 }: GiantTrackTileProps) => {
-  const navigate = useNavigateToPage()
   const [artworkLoading, setArtworkLoading] = useState(false)
   const onArtworkLoad = useCallback(
     () => setArtworkLoading(false),
@@ -226,12 +212,9 @@ export const GiantTrackTile = ({
     source: FavoriteSource.TRACK_PAGE
   })
 
-  const { isEnabled: isRemixContestEnabled } = useFeatureFlag(
-    FeatureFlags.REMIX_CONTEST
-  )
   const { data: remixContest, isLoading: isEventsLoading } =
     useRemixContest(trackId)
-  const isRemixContest = isRemixContestEnabled && !!remixContest
+  const isRemixContest = !!remixContest
 
   const isLongFormContent =
     genre === Genre.PODCASTS || genre === Genre.AUDIOBOOKS
@@ -468,45 +451,6 @@ export const GiantTrackTile = ({
     )
   }
 
-  const goToUploadWithRemix = useRequiresAccountCallback(() => {
-    if (!trackId) return
-
-    const state = {
-      initialMetadata: {
-        is_remix: true,
-        remix_of: {
-          tracks: [{ parent_track_id: trackId }]
-        }
-      }
-    }
-    navigate(UPLOAD_PAGE, state)
-  }, [trackId, navigate])
-
-  const renderSubmitRemixContestSection = useCallback(() => {
-    if (!isRemixContest) return null
-    const isContestOver = dayjs(remixContest.endDate).isBefore(dayjs())
-    return (
-      <Flex row gap='m'>
-        <Flex gap='xs' alignItems='center'>
-          <Text variant='label' color='accent'>
-            {isContestOver ? messages.contestEnded : messages.contestDeadline}
-          </Text>
-          <Text>{messages.deadline(remixContest.endDate)}</Text>
-        </Flex>
-        {!isOwner ? (
-          <Button
-            variant='secondary'
-            size='small'
-            onClick={goToUploadWithRemix}
-            iconLeft={IconCloudUpload}
-          >
-            {messages.uploadRemixButtonText}
-          </Button>
-        ) : null}
-      </Flex>
-    )
-  }, [isRemixContest, remixContest, isOwner, goToUploadWithRemix])
-
   const isLoading = loading || artworkLoading || isEventsLoading
 
   const overflowMenuExtraItems = []
@@ -538,7 +482,7 @@ export const GiantTrackTile = ({
       includeEmbed: !(isUnlisted || isStreamGated),
       includeArtistPick: true,
       includeAddToAlbum: isOwner && !ddexApp,
-      includeRemixContest: isRemixContestEnabled,
+      includeRemixContest: true,
       extraMenuItems: overflowMenuExtraItems
     }
   }
@@ -756,7 +700,6 @@ export const GiantTrackTile = ({
         ) : null}
 
         {renderTags()}
-        {renderSubmitRemixContestSection()}
         {hasDownloadableAssets ? (
           <Box w='100%'>
             <Suspense>

packages/web/src/pages/track-page/components/desktop/RemixContestDetailsTab.tsx

@@ -3,13 +3,18 @@ import { ID } from '@audius/common/models'
 import { dayjs } from '@audius/common/utils'
 import { Flex, Text } from '@audius/harmony'
 
+import { UserGeneratedText } from 'components/user-generated-text'
+
 const messages = {
   due: 'Submission Due:',
   deadline: (deadline?: string) => {
     if (!deadline) return ''
     const date = dayjs(deadline)
     return `${date.format('ddd. MMM D, YYYY')} at ${date.format('h:mm A')}`
-  }
+  },
+  ended: 'Contest Ended',
+  fallbackDescription:
+    'Enter my remix contest before the deadline for your chance to win!'
 }
 
 type RemixContestDetailsTabProps = {
@@ -23,21 +28,23 @@ export const RemixContestDetailsTab = ({
   trackId
 }: RemixContestDetailsTabProps) => {
   const { data: remixContest } = useRemixContest(trackId)
+  const isContestEnded = dayjs(remixContest?.endDate).isBefore(dayjs())
+
   return (
     <Flex column gap='l' p='xl'>
       <Flex row gap='s'>
         <Text variant='title' size='l' color='accent'>
           {messages.due}
         </Text>
         <Text variant='body' size='l' strength='strong'>
-          {messages.deadline(remixContest?.endDate)}
+          {isContestEnded
+            ? messages.ended
+            : messages.deadline(remixContest?.endDate)}
         </Text>
       </Flex>
-      <Text variant='body' size='l'>
-        {
-          "Join our exciting remix contest! Showcase your creativity by reimagining your favorite tracks. Submit your remixes for a chance to win amazing prizes and gain recognition in the music community. Don't miss out on this opportunity to shine!"
-        }
-      </Text>
+      <UserGeneratedText variant='body' size='l'>
+        {remixContest?.eventData?.description ?? messages.fallbackDescription}
+      </UserGeneratedText>
     </Flex>
   )
 }

packages/web/src/pages/track-page/components/desktop/RemixContestPrizesTab.tsx

@@ -1,5 +1,8 @@
+import { useRemixContest } from '@audius/common/api'
 import { ID } from '@audius/common/models'
-import { Text, Flex } from '@audius/harmony'
+import { Flex } from '@audius/harmony'
+
+import { UserGeneratedText } from 'components/user-generated-text'
 
 type RemixContestPrizesTabProps = {
   trackId: ID
@@ -11,26 +14,13 @@ type RemixContestPrizesTabProps = {
 export const RemixContestPrizesTab = ({
   trackId
 }: RemixContestPrizesTabProps) => {
+  const { data: remixContest } = useRemixContest(trackId)
+
   return (
     <Flex column gap='l' p='xl'>
-      <Text variant='body' size='l'>
-        {'Best Remix Award - $500'}
-      </Text>
-      <Text variant='body' size='l'>
-        {'Audience Choice Award - $300'}
-      </Text>
-      <Text variant='body' size='l'>
-        {'Most Creative Remix - $200'}
-      </Text>
-      <Text variant='body' size='l'>
-        {'Best Use of Original Material - $250'}
-      </Text>
-      <Text variant='body' size='l'>
-        {'Rising Star Award - $150'}
-      </Text>
-      <Text variant='body' size='l'>
-        {'Honorable Mention - $100'}
-      </Text>
+      <UserGeneratedText variant='body' size='l'>
+        {remixContest?.eventData?.prizeInfo}
+      </UserGeneratedText>
     </Flex>
   )
 }