[PAY-2034] Mobile cooldown schedule UI (#6418)

packages/common/src/hooks/purchaseContent/useChallengeCooldownSchedule.ts

@@ -49,7 +49,7 @@ const getAudioMatchingCooldownLabel = (now: Dayjs, created_at: Dayjs) => {
   } else if (diff === COOLDOWN_DAYS - 2) {
     return messages.tomorrow
   }
-  return created_at.local().add(COOLDOWN_DAYS, 'day').format('ddd M/D')
+  return created_at.local().add(COOLDOWN_DAYS, 'day').format('ddd (M/D)')
 }
 
 const formatAudioMatchingChallengeCooldownSchedule = (

packages/mobile/src/components/challenge-rewards-drawer/AudioMatchingChallengeDrawerContent.tsx

@@ -14,6 +14,7 @@ import { getChallengeConfig } from 'app/utils/challenges'
 import { ChallengeDescription } from './ChallengeDescription'
 import { ChallengeReward } from './ChallengeReward'
 import { ClaimError } from './ClaimError'
+import { CooldownSummaryTable } from './CooldownSummaryTable'
 import { useStyles } from './styles'
 
 const messages = {
@@ -132,6 +133,7 @@ export const AudioMatchingChallengeDrawerContent = ({
             </View>
           ) : null}
         </View>
+        <CooldownSummaryTable challengeId={challengeName} />
       </ScrollView>
       <View style={styles.stickyClaimRewardsContainer}>
         {claimableAmount > 0 && onClaim ? (

packages/mobile/src/components/challenge-rewards-drawer/CooldownSummaryTable.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import type { ChallengeRewardID } from '@audius/common'
+import { useAudioMatchingChallengeCooldownSchedule } from '@audius/common'
+
+import { SummaryTable } from '../summary-table'
+
+const messages = {
+  readyToClaim: 'Ready to Claim!',
+  upcomingRewards: 'Upcoming Rewards',
+  audio: '$AUDIO'
+}
+
+export const CooldownSummaryTable = ({
+  challengeId
+}: {
+  challengeId: ChallengeRewardID
+}) => {
+  const { cooldownChallenges, cooldownChallengesSummary } =
+    useAudioMatchingChallengeCooldownSchedule(challengeId)
+  return (
+    <SummaryTable
+      title={messages.upcomingRewards}
+      secondaryTitle={messages.audio}
+      summaryValueColor='neutral'
+      items={cooldownChallenges}
+      summaryItem={cooldownChallengesSummary}
+    />
+  )
+}

packages/mobile/src/components/premium-track-purchase-drawer/PurchaseSummaryTable.tsx

@@ -4,7 +4,7 @@ import { SummaryTable } from '../summary-table'
 import type { SummaryTableItem } from '../summary-table/SummaryTable'
 
 const messages = {
-  summary: 'Summary',
+  summary: 'Transaction Summary',
   payExtra: 'Pay Extra',
   premiumTrack: 'Premium Track',
   existingBalance: 'Existing Balance',

packages/mobile/src/components/summary-table/SummaryTable.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 
+import { removeNullable } from '@audius/common'
 import { View } from 'react-native'
 
 import { Text } from 'app/components/core'
@@ -24,9 +25,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   lastRow: {
     borderBottomWidth: 0
   },
-  title: {
-    letterSpacing: 1
-  },
   greyRow: {
     backgroundColor: palette.neutralLight10
   }
@@ -56,22 +54,21 @@ export const SummaryTable = ({
   summaryValueColor = 'secondary'
 }: SummaryTableProps) => {
   const styles = useStyles()
+  const nonNullItems = items.filter(removeNullable)
   return (
     <View style={styles.container}>
       <View style={[styles.row, styles.greyRow]}>
-        <Text weight='bold' textTransform='uppercase' style={styles.title}>
-          {title}
-        </Text>
-        <Text variant='body' fontSize='large'>
+        <Text weight='bold'>{title}</Text>
+        <Text variant='body' fontSize='large' weight='bold'>
           {secondaryTitle}
         </Text>
       </View>
-      {items.map(({ id, label, value }, index) => (
+      {nonNullItems.map(({ id, label, value }, index) => (
         <View
           key={id}
           style={[
             styles.row,
-            summaryItem === undefined && index === items.length - 1
+            summaryItem === undefined && index === nonNullItems.length - 1
               ? styles.lastRow
               : null
           ]}
@@ -81,7 +78,7 @@ export const SummaryTable = ({
         </View>
       ))}
       {summaryItem !== undefined ? (
-        <View style={[styles.row, styles.lastRow]}>
+        <View style={[styles.row, styles.lastRow, styles.greyRow]}>
           <Text
             variant='body'
             fontSize='medium'

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

@@ -50,10 +50,7 @@ const messages = {
   totalEarned: (amount: string) => `Total $AUDIO Earned: ${amount}`,
   claimAudio: (amount: string) => `Claim ${amount} $AUDIO`,
   upcomingRewards: 'Upcoming Rewards',
-  audio: '$AUDIO',
-  laterToday: 'Later Today',
-  readyToClaim: 'Ready to Claim!',
-  tomorrow: 'Tomorrow'
+  audio: '$AUDIO'
 }
 
 type AudioMatchingChallengeName =