More web+mobile UI for $AUDIO matching challenges

packages/common/src/utils/challenges.ts

@@ -120,19 +120,23 @@ export const challengeRewardsConfig: Record<
   },
   s: {
     id: 's',
-    title: 'Audio Matching Seller',
-    description: (_) => 'CA$H',
-    fullDescription: () => 'Make dough',
-    progressLabel: 'Not Earned',
-    panelButtonText: 'Get $$'
+    title: 'Sell to Earn',
+    description: (_) =>
+      'Receive 1 additional $AUDIO for each dollar earned from sales.',
+    fullDescription: () =>
+      'Receive 1 additional $AUDIO for each dollar earned from sales.',
+    progressLabel: 'No Recent Activity',
+    panelButtonText: 'View Details'
   },
   b: {
     id: 'b',
-    title: 'Audio Matching Buyer',
-    description: (_) => 'CA$H',
-    fullDescription: () => 'Make dough',
-    progressLabel: 'Not Earned',
-    panelButtonText: 'Get $$'
+    title: 'Buy to Earn',
+    description: (_) =>
+      'Receive 1 additional $AUDIO for each dollar earned from purchases.',
+    fullDescription: () =>
+      'Receive 1 additional $AUDIO for each dollar earned from purchases.',
+    progressLabel: 'No Recent Activity',
+    panelButtonText: 'View Details'
   },
   'trending-playlist': {
     id: 'trending-playlist',
@@ -218,3 +222,7 @@ export const makeOptimisticChallengeSortComparator = (
     return 0
   }
 }
+
+export const isAudioMatchingChallenge = (challenge: ChallengeRewardID) => {
+  return challenge === 's' || challenge === 'b'
+}

packages/mobile/src/screens/audio-screen/ChallengeRewards.tsx

@@ -12,14 +12,15 @@ import {
   audioRewardsPageActions,
   audioRewardsPageSelectors,
   modalsActions,
-  makeOptimisticChallengeSortComparator
+  makeOptimisticChallengeSortComparator,
+  FeatureFlags
 } from '@audius/common'
 import { useFocusEffect } from '@react-navigation/native'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import LoadingSpinner from 'app/components/loading-spinner'
-import { useRemoteVar } from 'app/hooks/useRemoteConfig'
+import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
 import { getChallengeConfig } from 'app/utils/challenges'
 
@@ -41,7 +42,9 @@ const validRewardIds: Set<ChallengeRewardID> = new Set([
   'profile-completion',
   'referred',
   'send-first-tip',
-  'first-playlist'
+  'first-playlist',
+  'b', // $AUDIO matching buyer
+  's' // $AUDIO matching seller
 ])
 
 /** Pulls rewards from remoteconfig */
@@ -70,6 +73,9 @@ const useStyles = makeStyles(({ spacing }) => ({
 export const ChallengeRewards = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
+  const { isEnabled: isAudioMatchingChallengesEnabled } = useFeatureFlag(
+    FeatureFlags.AUDIO_MATCHING_CHALLENGES
+  )
 
   const userChallengesLoading = useSelector(getUserChallengesLoading)
   const userChallenges = useSelector(getUserChallenges)
@@ -80,7 +86,11 @@ export const ChallengeRewards = () => {
 
   // The referred challenge only needs a tile if the user was referred
   const hideReferredTile = !userChallenges.referred?.is_complete
-  const rewardIds = useRewardIds({ referred: hideReferredTile })
+  const rewardIds = useRewardIds({
+    referred: hideReferredTile,
+    b: !isAudioMatchingChallengesEnabled,
+    s: !isAudioMatchingChallengesEnabled
+  })
 
   useEffect(() => {
     if (!userChallengesLoading && !haveChallengesLoaded) {

packages/mobile/src/utils/challenges.tsx

@@ -4,6 +4,7 @@ import type { ImageSourcePropType } from 'react-native'
 import { Platform } from 'react-native'
 
 import BallotBoxTick from 'app/assets/images/emojis/ballot-box-tick.png'
+import Cart from 'app/assets/images/emojis/cart.png'
 import BarChart from 'app/assets/images/emojis/chart-bar.png'
 import ChartIncreasing from 'app/assets/images/emojis/chart-increasing.png'
 import Gear from 'app/assets/images/emojis/gear.png'
@@ -175,16 +176,16 @@ const mobileChallengeConfig: Record<ChallengeRewardID, MobileChallengeConfig> =
       }
     },
     b: {
-      icon: BarChart,
+      icon: Cart,
       buttonInfo: {
-        renderIcon: (color) => <IconCheck fill={color} />,
+        renderIcon: (color) => <IconArrow fill={color} />,
         iconPosition: 'right'
       }
     },
     s: {
-      icon: BarChart,
+      icon: Cart,
       buttonInfo: {
-        renderIcon: (color) => <IconCheck fill={color} />,
+        renderIcon: (color) => <IconArrow fill={color} />,
         iconPosition: 'right'
       }
     }

packages/web/src/assets/styles/emoji.css

@@ -238,3 +238,6 @@
 .emoji.arrow-curve-up {
   background-image: url('../fonts/emojis/right-arrow-curving-up.png');
 }
+.emoji.cart {
+  background-image: url('../fonts/emojis/cart.png');
+}

packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx

@@ -11,7 +11,8 @@ import {
   audioRewardsPageActions,
   ChallengeRewardsModalType,
   audioRewardsPageSelectors,
-  makeChallengeSortComparator
+  makeChallengeSortComparator,
+  isAudioMatchingChallenge
 } from '@audius/common'
 import {
   ProgressBar,
@@ -87,6 +88,12 @@ const RewardPanel = ({
   let progressLabelFilled: string
   if (shouldShowCompleted) {
     progressLabelFilled = messages.completeLabel
+  } else if (isAudioMatchingChallenge(id)) {
+    if (needsDisbursement) {
+      progressLabelFilled = messages.readyToClaim
+    } else {
+      progressLabelFilled = progressLabel ?? ''
+    }
   } else if (challenge?.challenge_type === 'aggregate') {
     // Count down
     progressLabelFilled = fillString(
@@ -143,9 +150,7 @@ const RewardPanel = ({
       </div>
       <div className={wm(styles.rewardPanelBottom)}>
         <div className={wm(styles.rewardProgress)}>
-          {shouldShowCompleted && (
-            <IconCheck className={wm(styles.iconCheck)} />
-          )}
+          {needsDisbursement && <IconCheck className={wm(styles.iconCheck)} />}
           <p className={styles.rewardProgressLabel}>{progressLabelFilled}</p>
           {shouldShowProgressBar && (
             <ProgressBar

packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewards.module.css

@@ -97,9 +97,10 @@
 }
 
 .progressReward {
-  padding: 16px 32px;
+  padding: var(--unit-4) var(--unit-6);
   text-align: center;
   border-left: 1px solid var(--neutral-light-8);
+  max-width: 200px;
 }
 .progressReward.mobile {
   padding: 0 16px;
@@ -334,6 +335,12 @@
   text-align: center;
 }
 
+.rewardAmount {
+  background: var(--page-header-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 .verifiedChallenge {
   display: flex;
   align-items: center;

packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewards.tsx

@@ -11,7 +11,8 @@ import {
   audioRewardsPageSelectors,
   getAAOErrorEmojis,
   musicConfettiActions,
-  challengeRewardsConfig
+  challengeRewardsConfig,
+  isAudioMatchingChallenge
 } from '@audius/common'
 import {
   Button,
@@ -34,6 +35,7 @@ import Toast from 'components/toast/Toast'
 import { ToastContext } from 'components/toast/ToastContext'
 import Tooltip from 'components/tooltip/Tooltip'
 import { ComponentPlacement, MountPlacement } from 'components/types'
+import { Text } from 'components/typography'
 import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
 import { getChallengeConfig } from 'pages/audio-rewards-page/config'
 import { isMobile } from 'utils/clientUtil'
@@ -73,6 +75,8 @@ export const useRewardsModalType = (): [
 }
 const inviteLink = getCopyableLink('/signup?ref=%0')
 const messages = {
+  audio: '$AUDIO',
+  everyDollarSpent: ' Every Dollar Spent',
   copyLabel: 'Copy to Clipboard',
   copiedLabel: 'Copied to Clipboard',
   inviteLabel: 'Copy Invite to Clipboard',
@@ -249,9 +253,18 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
 
   const progressReward = (
     <div className={wm(styles.progressReward)}>
-      <h3>Reward</h3>
-      <h2>{formatNumberCommas(challenge?.totalAmount ?? '')}</h2>
-      <h4>$AUDIO</h4>
+      <Text variant='heading'>Reward</Text>
+      <Text variant='display' className={styles.rewardAmount}>
+        {isAudioMatchingChallenge(modalType)
+          ? formatNumberCommas(challenge?.amount ?? '')
+          : formatNumberCommas(challenge?.totalAmount ?? '')}
+      </Text>
+      <Text variant='heading'>
+        {messages.audio +
+          (isAudioMatchingChallenge(modalType)
+            ? messages.everyDollarSpent
+            : '')}
+      </Text>
     </div>
   )
 

packages/web/src/pages/audio-rewards-page/config.tsx

@@ -14,7 +14,8 @@ import {
   TRENDING_PAGE,
   UPLOAD_PAGE,
   EXPLORE_PAGE,
-  LIBRARY_PAGE
+  LIBRARY_PAGE,
+  EXPLORE_PREMIUM_TRACKS_PAGE
 } from 'utils/route'
 
 type LinkButtonType =
@@ -24,6 +25,8 @@ type LinkButtonType =
   | 'trendingTracks'
   | 'sendFirstTip'
   | 'firstPlaylist'
+  | 's'
+  | 'b'
 type LinkButtonInfo = {
   label: string
   leftIcon: ReactNode | null
@@ -77,6 +80,18 @@ const linkButtonMap: Record<LinkButtonType, LinkButtonInfo> = {
     leftIcon: null,
     rightIcon: <IconArrow />,
     link: () => EXPLORE_PAGE
+  },
+  s: {
+    label: 'View Premium Tracks',
+    leftIcon: null,
+    rightIcon: <IconArrow />,
+    link: () => EXPLORE_PREMIUM_TRACKS_PAGE
+  },
+  b: {
+    label: 'View Premium Tracks',
+    leftIcon: null,
+    rightIcon: <IconArrow />,
+    link: () => EXPLORE_PREMIUM_TRACKS_PAGE
   }
 }
 
@@ -151,15 +166,15 @@ const webChallengesConfig: Record<ChallengeRewardID, WebChallengeInfo> = {
     }
   },
   s: {
-    icon: <i className='emoji large treble-clef' />,
+    icon: <i className='emoji large cart' />,
     modalButtonInfo: {
       incomplete: linkButtonMap.firstPlaylist,
       inProgress: linkButtonMap.firstPlaylist,
       complete: linkButtonMap.firstPlaylist
     }
   },
   b: {
-    icon: <i className='emoji large treble-clef' />,
+    icon: <i className='emoji large cart' />,
     modalButtonInfo: {
       incomplete: linkButtonMap.firstPlaylist,
       inProgress: linkButtonMap.firstPlaylist,