From f02c322ef7bd791d177595aa039ac6a6a9ac6843 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Thu, 5 Oct 2023 16:31:08 -0400 Subject: [PATCH] More UI for $AUDIO matching rewards --- packages/common/src/utils/challenges.ts | 28 +++++++++++------- .../mobile/src/assets/images/emojis/cart.png | Bin 0 -> 9345 bytes .../screens/audio-screen/ChallengeRewards.tsx | 18 ++++++++--- packages/mobile/src/utils/challenges.tsx | 9 +++--- packages/web/src/assets/fonts/emojis/cart.png | Bin 0 -> 9345 bytes packages/web/src/assets/styles/emoji.css | 3 ++ .../ChallengeRewardsTile.tsx | 13 +++++--- .../modals/ChallengeRewards.module.css | 9 +++++- .../components/modals/ChallengeRewards.tsx | 21 ++++++++++--- .../src/pages/audio-rewards-page/config.tsx | 21 +++++++++++-- 10 files changed, 92 insertions(+), 30 deletions(-) create mode 100644 packages/mobile/src/assets/images/emojis/cart.png create mode 100644 packages/web/src/assets/fonts/emojis/cart.png 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 0000000000000000000000000000000000000000..a6759de89ad7463eb255d06a52a7f50c7450375f GIT binary patch literal 9345 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a6759de89ad7463eb255d06a52a7f50c7450375f GIT binary patch literal 9345 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 literal 0 HcmV?d00001 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,