diff --git a/packages/common/src/utils/challenges.ts b/packages/common/src/utils/challenges.ts index 2b08bac8707..d3e0802e035 100644 --- a/packages/common/src/utils/challenges.ts +++ b/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' +} diff --git a/packages/mobile/src/assets/images/emojis/cart.png b/packages/mobile/src/assets/images/emojis/cart.png new file mode 100644 index 00000000000..a6759de89ad Binary files /dev/null and b/packages/mobile/src/assets/images/emojis/cart.png differ diff --git a/packages/mobile/src/screens/audio-screen/ChallengeRewards.tsx b/packages/mobile/src/screens/audio-screen/ChallengeRewards.tsx index 252330d01b7..58672b3c995 100644 --- a/packages/mobile/src/screens/audio-screen/ChallengeRewards.tsx +++ 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 = 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) { diff --git a/packages/mobile/src/utils/challenges.tsx b/packages/mobile/src/utils/challenges.tsx index 7df54967d2e..3aef77cd08e 100644 --- a/packages/mobile/src/utils/challenges.tsx +++ b/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 = } }, b: { - icon: BarChart, + icon: Cart, buttonInfo: { - renderIcon: (color) => , + renderIcon: (color) => , iconPosition: 'right' } }, s: { - icon: BarChart, + icon: Cart, buttonInfo: { - renderIcon: (color) => , + renderIcon: (color) => , iconPosition: 'right' } } diff --git a/packages/web/src/assets/fonts/emojis/cart.png b/packages/web/src/assets/fonts/emojis/cart.png new file mode 100644 index 00000000000..a6759de89ad Binary files /dev/null and b/packages/web/src/assets/fonts/emojis/cart.png differ diff --git a/packages/web/src/assets/styles/emoji.css b/packages/web/src/assets/styles/emoji.css index 9a362cb0be7..386789c8e4b 100644 --- a/packages/web/src/assets/styles/emoji.css +++ b/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'); +} diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx index 1aa10459e5e..b4d21b52357 100644 --- a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx +++ b/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 = ({
- {shouldShowCompleted && ( - - )} + {needsDisbursement && }

{progressLabelFilled}

{shouldShowProgressBar && ( { const progressReward = (
-

Reward

-

{formatNumberCommas(challenge?.totalAmount ?? '')}

-

$AUDIO

+ Reward + + {isAudioMatchingChallenge(modalType) + ? formatNumberCommas(challenge?.amount ?? '') + : formatNumberCommas(challenge?.totalAmount ?? '')} + + + {messages.audio + + (isAudioMatchingChallenge(modalType) + ? messages.everyDollarSpent + : '')} +
) diff --git a/packages/web/src/pages/audio-rewards-page/config.tsx b/packages/web/src/pages/audio-rewards-page/config.tsx index a0ff3cf4c43..96a4b15d613 100644 --- a/packages/web/src/pages/audio-rewards-page/config.tsx +++ b/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 = { leftIcon: null, rightIcon: , link: () => EXPLORE_PAGE + }, + s: { + label: 'View Premium Tracks', + leftIcon: null, + rightIcon: , + link: () => EXPLORE_PREMIUM_TRACKS_PAGE + }, + b: { + label: 'View Premium Tracks', + leftIcon: null, + rightIcon: , + link: () => EXPLORE_PREMIUM_TRACKS_PAGE } } @@ -151,7 +166,7 @@ const webChallengesConfig: Record = { } }, s: { - icon: , + icon: , modalButtonInfo: { incomplete: linkButtonMap.firstPlaylist, inProgress: linkButtonMap.firstPlaylist, @@ -159,7 +174,7 @@ const webChallengesConfig: Record = { } }, b: { - icon: , + icon: , modalButtonInfo: { incomplete: linkButtonMap.firstPlaylist, inProgress: linkButtonMap.firstPlaylist,