[C-4284] Fix rewards in mobile web (#8291)

Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · May 1, 2024 · d32934f · d32934f
1 parent 45c4bc6
commit d32934f
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 12 deletions.
diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
@@ -27,6 +27,7 @@ import {
   dayjs
 } from '@audius/common/utils'
 import {
+  Box,
   Button,
   Divider,
   Flex,
@@ -45,6 +46,7 @@ import { useModalState, useSetVisibility } from 'common/hooks/useModalState'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { SummaryTableItem } from 'components/summary-table'
 import { useIsAudioMatchingChallengesEnabled } from 'hooks/useIsAudioMatchingChallengesEnabled'
+import { useIsMobile } from 'hooks/useIsMobile'
 import { useRemoteVar } from 'hooks/useRemoteConfig'
 import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
 import { make, track } from 'services/analytics'
@@ -250,6 +252,7 @@ const RewardPanel = ({
 }
 
 const ClaimAllPanel = () => {
+  const isMobile = useIsMobile()
   const wm = useWithMobileStyle(styles.mobile)
   const { cooldownChallenges, cooldownAmount, claimableAmount, isEmpty } =
     useChallengeCooldownSchedule({ multiple: true })
@@ -262,6 +265,77 @@ const ClaimAllPanel = () => {
     setClaimAllRewardsVisibility(true)
   }, [setClaimAllRewardsVisibility])
 
+  if (isMobile) {
+    return (
+      <Paper
+        shadow='flat'
+        border='strong'
+        p='xl'
+        alignItems='center'
+        alignSelf='stretch'
+        justifyContent='space-between'
+        m='s'
+      >
+        <Flex direction='column' alignItems='start' w='100%'>
+          <Flex gap='s' alignItems='center'>
+            <IconTokenGold
+              height={24}
+              width={24}
+              aria-label={messages.goldAudioToken}
+            />
+            {isEmpty ? null : (
+              <Text color='accent' variant='title' size='l'>
+                {claimableAmount > 0
+                  ? messages.totalReadyToClaim
+                  : messages.totalUpcomingRewards}
+              </Text>
+            )}
+          </Flex>
+          {cooldownAmount > 0 ? (
+            <Box
+              mt='m'
+              backgroundColor='default'
+              pv='2xs'
+              ph='s'
+              borderRadius='l'
+            >
+              <Text color='accent' variant='body' size='s' strength='strong'>
+                {cooldownAmount} {messages.pending}
+              </Text>
+            </Box>
+          ) : null}
+          <Box mt='l' mb='xl'>
+            <Text variant='body' textAlign='left' size='s'>
+              {claimableAmount > 0
+                ? `${claimableAmount} ${messages.available} ${messages.now}`
+                : messages.availableMessage(
+                    formatCooldownChallenges(cooldownChallenges)
+                  )}
+            </Text>
+          </Box>
+          {claimableAmount > 0 ? (
+            <Button
+              onClick={onClickClaimAllRewards}
+              iconRight={IconArrow}
+              fullWidth
+            >
+              {messages.claimAllRewards}
+            </Button>
+          ) : cooldownAmount > 0 ? (
+            <PlainButton
+              size='large'
+              onClick={onClickMoreInfo}
+              iconRight={IconArrow}
+              fullWidth
+            >
+              {messages.moreInfo}
+            </PlainButton>
+          ) : null}
+        </Flex>
+      </Paper>
+    )
+  }
+
   return (
     <Paper
       shadow='flat'

diff --git a/...rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx b/...rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
@@ -159,6 +159,20 @@ export const AudioMatchingRewardsModalContent = ({
     }
   }, [])
 
+  const renderCooldownSummaryTable = () => {
+    if (isCooldownChallengesEmpty) return null
+    return (
+      <SummaryTable
+        title={messages.upcomingRewards}
+        items={formatCooldownChallenges(cooldownChallenges).map(formatLabel)}
+        summaryItem={summary}
+        secondaryTitle={messages.audio}
+        summaryLabelColor='accent'
+        summaryValueColor='default'
+      />
+    )
+  }
+
   return (
     <div className={wm(cn(styles.container, styles.audioMatchingContainer))}>
       {isMobile ? (
@@ -168,6 +182,7 @@ export const AudioMatchingRewardsModalContent = ({
             <div className={wm(styles.progressInfo)}>{progressReward}</div>
             {progressStatusLabel}
           </div>
+          {renderCooldownSummaryTable()}
         </>
       ) : (
         <>
@@ -178,18 +193,7 @@ export const AudioMatchingRewardsModalContent = ({
             </div>
             {progressStatusLabel}
           </div>
-          {!isCooldownChallengesEmpty ? (
-            <SummaryTable
-              title={messages.upcomingRewards}
-              items={formatCooldownChallenges(cooldownChallenges).map(
-                formatLabel
-              )}
-              summaryItem={summary}
-              secondaryTitle={messages.audio}
-              summaryLabelColor='accent'
-              summaryValueColor='default'
-            />
-          ) : null}
+          {renderCooldownSummaryTable()}
         </>
       )}
       {challenge?.claimableAmount && challenge.claimableAmount > 0 ? (

diff --git a/...ages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/...ages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -545,6 +545,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
               {renderProgressStatusLabel()}
             </div>
             {modalType === 'profile-completion' ? <ProfileChecks /> : null}
+            {renderCooldownSummaryTable()}
           </>
         ) : (
           <>