-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
1 parent
5a8dffb
commit 69e690f
Showing
8 changed files
with
259 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
136 changes: 136 additions & 0 deletions
136
...ges/mobile/src/components/challenge-rewards-drawer/FirstWeeklyCommentChallengeContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import React from 'react' | ||
|
|
||
| import { ChallengeName } from '@audius/common/models' | ||
| import { ClaimStatus } from '@audius/common/store' | ||
| import { | ||
| formatNumberCommas, | ||
| getChallengeStatusLabel | ||
| } from '@audius/common/utils' | ||
| import { Platform } from 'react-native' | ||
|
|
||
| import { | ||
| Flex, | ||
| IconArrowRight, | ||
| Button, | ||
| Text, | ||
| IconArrowRotate, | ||
| IconCheck | ||
| } from '@audius/harmony-native' | ||
| import { getChallengeConfig } from 'app/utils/challenges' | ||
|
|
||
| import { ChallengeRewardsLayout } from './ChallengeRewardsLayout' | ||
| import { ClaimError } from './ClaimError' | ||
| import type { ChallengeContentProps } from './types' | ||
|
|
||
| const messages = { | ||
| rewardMapping: '$AUDIO/Week', | ||
| totalClaimed: (amount: string) => `${amount} $AUDIO Claimed`, | ||
| claimAudio: (amount: string) => `Claim ${amount} $AUDIO`, | ||
| close: 'Close' | ||
| } | ||
|
|
||
| export const FirstWeeklyCommentChallengeContent = ({ | ||
| aaoErrorCode, | ||
| challenge, | ||
| challengeName, | ||
| claimStatus, | ||
| onClaim, | ||
| onClose | ||
| }: ChallengeContentProps) => { | ||
| const config = getChallengeConfig(ChallengeName.FirstWeeklyComment) | ||
| const claimInProgress = | ||
| claimStatus === ClaimStatus.CLAIMING || | ||
| claimStatus === ClaimStatus.WAITING_FOR_RETRY | ||
| const claimError = claimStatus === ClaimStatus.ERROR | ||
|
|
||
| const description = challenge ? config.description(challenge) : '' | ||
| const statusText = challenge | ||
| ? getChallengeStatusLabel(challenge, challengeName) | ||
| : '' | ||
|
|
||
| const statusLabel = ( | ||
| <Flex | ||
| w='100%' | ||
| ph='xl' | ||
| border='default' | ||
| borderRadius='s' | ||
| backgroundColor='surface1' | ||
| > | ||
| <Flex | ||
| row | ||
| w='100%' | ||
| alignItems='center' | ||
| justifyContent='center' | ||
| gap='s' | ||
| pv='l' | ||
| > | ||
| {challenge?.claimableAmount ? ( | ||
| <IconCheck size='s' color='subdued' /> | ||
| ) : challenge?.disbursed_amount && !challenge?.claimableAmount ? ( | ||
| <IconArrowRotate size='s' color='subdued' /> | ||
| ) : null} | ||
| <Text | ||
| variant='label' | ||
| size='l' | ||
| color='subdued' | ||
| // iOS has a bug where emojis are not vertically aligned with the text | ||
| style={{ lineHeight: Platform.OS === 'ios' ? 0 : undefined }} | ||
| > | ||
| {statusText} | ||
| </Text> | ||
| </Flex> | ||
| {challenge?.disbursed_amount ? ( | ||
| <Flex | ||
| w='100%' | ||
| row | ||
| justifyContent='center' | ||
| alignItems='center' | ||
| borderTop='default' | ||
| pv='l' | ||
| > | ||
| <Text variant='label' size='l' color='subdued'> | ||
| {messages.totalClaimed( | ||
| formatNumberCommas(challenge.disbursed_amount) | ||
| )} | ||
| </Text> | ||
| </Flex> | ||
| ) : null} | ||
| </Flex> | ||
| ) | ||
|
|
||
| const actions = | ||
| challenge?.claimableAmount && onClaim ? ( | ||
| <Button | ||
| disabled={claimInProgress} | ||
| variant='primary' | ||
| onPress={onClaim} | ||
| isLoading={claimInProgress} | ||
| iconRight={IconArrowRight} | ||
| fullWidth | ||
| > | ||
| {messages.claimAudio(formatNumberCommas(challenge.claimableAmount))} | ||
| </Button> | ||
| ) : ( | ||
| <Button variant='secondary' onPress={onClose} fullWidth> | ||
| {messages.close} | ||
| </Button> | ||
| ) | ||
|
|
||
| // Following the pattern from FirstWeeklyCommentChallengeModalContent | ||
| // where totalAmount is set to challenge.amount | ||
| const modifiedAmount = challenge?.amount ?? 0 | ||
|
|
||
| return ( | ||
| <ChallengeRewardsLayout | ||
| description={description} | ||
| amount={modifiedAmount} | ||
| rewardSubtext={messages.rewardMapping} | ||
| statusLabel={statusLabel} | ||
| actions={actions} | ||
| errorContent={ | ||
| claimError ? <ClaimError aaoErrorCode={aaoErrorCode} /> : null | ||
| } | ||
| isCooldownChallenge={false} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 105 additions & 6 deletions
111
...-page/components/modals/ChallengeRewardsModal/FirstWeeklyCommentChallengeModalContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,115 @@ | ||
| import { DefaultChallengeContent } from './DefaultChallengeContent' | ||
| import { | ||
| audioRewardsPageSelectors, | ||
| challengesSelectors, | ||
| ClaimStatus | ||
| } from '@audius/common/store' | ||
| import { | ||
| formatNumberCommas, | ||
| challengeRewardsConfig, | ||
| getChallengeStatusLabel | ||
| } from '@audius/common/utils' | ||
| import { Flex, IconArrowRotate, IconCheck, Text } from '@audius/harmony' | ||
| import { useSelector } from 'react-redux' | ||
|
|
||
| import { useIsMobile } from 'hooks/useIsMobile' | ||
|
|
||
| import { ChallengeRewardsLayout } from './ChallengeRewardsLayout' | ||
| import { ClaimButton } from './ClaimButton' | ||
| import { type DefaultChallengeProps } from './types' | ||
|
|
||
| export const FirstWeeklyCommentChallengeModalContent = ( | ||
| props: DefaultChallengeProps | ||
| ) => { | ||
| const { challenge } = props | ||
| const { getOptimisticUserChallenges } = challengesSelectors | ||
| const { getUndisbursedUserChallenges, getClaimStatus } = | ||
| audioRewardsPageSelectors | ||
|
|
||
| const messages = { | ||
| rewardSubtext: '$AUDIO/Week', | ||
| totalClaimed: (amount: string) => `${amount} $AUDIO Claimed` | ||
| } | ||
|
|
||
| export const FirstWeeklyCommentChallengeModalContent = ({ | ||
| challenge, | ||
| challengeName, | ||
| onNavigateAway, | ||
| errorContent | ||
| }: DefaultChallengeProps) => { | ||
| const isMobile = useIsMobile() | ||
| const userChallenge = useSelector(getOptimisticUserChallenges)[challengeName] | ||
| const undisbursedUserChallenges = useSelector(getUndisbursedUserChallenges) | ||
| const claimStatus = useSelector(getClaimStatus) | ||
| const claimInProgress = | ||
| claimStatus === ClaimStatus.CLAIMING || | ||
| claimStatus === ClaimStatus.WAITING_FOR_RETRY | ||
|
|
||
| // Following the pattern from mobile implementation | ||
| const modifiedChallenge = challenge | ||
| ? { | ||
| ...challenge, | ||
| totalAmount: challenge?.amount ?? 0 | ||
| } | ||
| : undefined | ||
|
|
||
| return <DefaultChallengeContent {...props} challenge={modifiedChallenge} /> | ||
| const { fullDescription } = challengeRewardsConfig[challengeName] | ||
|
|
||
| const progressStatusLabel = userChallenge ? ( | ||
| <Flex | ||
| ph='xl' | ||
| backgroundColor='surface1' | ||
| border='default' | ||
| borderRadius='s' | ||
| column={isMobile} | ||
| > | ||
| <Flex | ||
| pv='l' | ||
| gap='s' | ||
| w='100%' | ||
| justifyContent={isMobile ? 'center' : 'flex-start'} | ||
| alignItems='center' | ||
| > | ||
| {userChallenge?.claimableAmount ? ( | ||
| <IconCheck size='s' color='subdued' /> | ||
| ) : userChallenge?.disbursed_amount && | ||
| !userChallenge?.claimableAmount ? ( | ||
| <IconArrowRotate size='s' color='subdued' /> | ||
| ) : null} | ||
| <Text variant='label' size='l' color='subdued'> | ||
| {getChallengeStatusLabel(userChallenge, challengeName)} | ||
| </Text> | ||
| </Flex> | ||
| {userChallenge.disbursed_amount ? ( | ||
| <Flex | ||
| pv='l' | ||
| w='100%' | ||
| justifyContent={isMobile ? 'center' : 'flex-end'} | ||
| alignItems='center' | ||
| borderTop={isMobile ? 'default' : undefined} | ||
| > | ||
| <Text variant='label' size='l' color='subdued'> | ||
| {messages.totalClaimed( | ||
| formatNumberCommas(userChallenge.disbursed_amount.toString()) | ||
| )} | ||
| </Text> | ||
| </Flex> | ||
| ) : null} | ||
| </Flex> | ||
| ) : null | ||
|
|
||
| return ( | ||
| <ChallengeRewardsLayout | ||
| description={ | ||
| <Text variant='body'>{fullDescription?.(modifiedChallenge)}</Text> | ||
| } | ||
| amount={modifiedChallenge?.totalAmount} | ||
| rewardSubtext={messages.rewardSubtext} | ||
| progressStatusLabel={progressStatusLabel} | ||
| actions={ | ||
| <ClaimButton | ||
| challenge={modifiedChallenge} | ||
| claimInProgress={claimInProgress} | ||
| undisbursedChallenges={undisbursedUserChallenges} | ||
| onClose={onNavigateAway} | ||
| /> | ||
| } | ||
| errorContent={errorContent} | ||
| /> | ||
| ) | ||
| } |