Don't show oneshot expiry if ineligible (#11351)

Author: dharit-tan

packages/common/src/utils/challenges.ts

@@ -15,6 +15,7 @@ export type ChallengeRewardsInfo = {
   title: string
   description: (amount: OptimisticUserChallenge | undefined) => string
   fullDescription?: (amount: OptimisticUserChallenge | undefined) => string
+  optionalDescription?: string
   progressLabel?: string
   remainingLabel?: string
   completedLabel?: string
@@ -313,8 +314,9 @@ export const challengeRewardsConfig: Record<
     description: () =>
       `We're thrilled to reward our talented artist community for driving Audius' growth and success!`,
     fullDescription: () =>
-      `We're thrilled to reward our talented artist community for driving Audius' growth and success! \n\nClaim your tokens before they expire on 05/13/25!`,
-
+      `We're thrilled to reward our talented artist community for driving Audius' growth and success!`,
+    optionalDescription:
+      '\n\nClaim your tokens before they expire on 05/13/25!',
     panelButtonText: '',
     id: ChallengeName.OneShot,
     remainingLabel: 'Ineligible',

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

@@ -14,8 +14,13 @@ type DescriptionContent =
   | {
       description?: never
       renderDescription: () => ReactNode
+      optionalDescription?: never
+    }
+  | {
+      description: ReactNode
+      renderDescription?: never
+      optionalDescription?: ReactNode
     }
-  | { description: ReactNode; renderDescription?: never }
 
 type ChallengeDescriptionProps = {
   /** Indicates if the challenge has a cooldown period */
@@ -29,6 +34,7 @@ type ChallengeDescriptionProps = {
 export const ChallengeDescription = ({
   description,
   renderDescription,
+  optionalDescription,
   isCooldownChallenge = true
 }: ChallengeDescriptionProps) => {
   const styles = useStyles()
@@ -40,6 +46,7 @@ export const ChallengeDescription = ({
         <Flex gap='m' mb='l'>
           <Text variant='body' size='l'>
             {description}
+            {optionalDescription}
           </Text>
           {isCooldownChallenge ? (
             <Text variant='body' color='subdued'>

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

@@ -51,6 +51,8 @@ const messages = {
 type ChallengeRewardsDrawerContentProps = {
   /** The description of the challenge */
   description: string
+  /** The optional description of the challenge */
+  optionalDescription?: string
   /** The current progress the user has made */
   currentStep: number
   /** The number of steps the user has to complete in total */
@@ -90,6 +92,7 @@ type ChallengeRewardsDrawerContentProps = {
  */
 export const ChallengeRewardsDrawerContent = ({
   description,
+  optionalDescription,
   amount,
   currentStep,
   stepCount = 1,
@@ -157,17 +160,11 @@ export const ChallengeRewardsDrawerContent = ({
   return (
     <>
       <ScrollView style={styles.content}>
-        {isVerifiedChallenge ? (
-          <ChallengeDescription
-            description={description}
-            isCooldownChallenge={isCooldownChallenge}
-          />
-        ) : (
-          <ChallengeDescription
-            description={description}
-            isCooldownChallenge={isCooldownChallenge}
-          />
-        )}
+        <ChallengeDescription
+          description={description}
+          optionalDescription={isClaimable ? optionalDescription : undefined}
+          isCooldownChallenge={isCooldownChallenge}
+        />
         <Flex alignItems='center' gap='3xl' w='100%'>
           <Flex row alignItems='center' gap='xl'>
             <ChallengeReward amount={amount} subtext={messages.audio} />

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

@@ -237,6 +237,7 @@ export const ChallengeRewardsDrawerProvider = () => {
               ? config.fullDescription(challenge)
               : config.description(challenge)
           }
+          optionalDescription={config.optionalDescription}
           progressLabel={config.progressLabel ?? 'Completed'}
           completedLabel={config.completedLabel}
           amount={progressRewardAmount}

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

@@ -288,6 +288,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
   const currentStepCount = challenge?.current_step_count || 0
   const {
     fullDescription,
+    optionalDescription,
     progressLabel,
     completedLabel,
     isVerifiedChallenge
@@ -343,6 +344,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
       ) : null}
       <Text variant='body' style={{ whiteSpace: 'pre-line' }}>
         {fullDescription?.(challenge)}
+        {challenge?.claimableAmount ? optionalDescription : null}
       </Text>
       {isCooldownChallenge ? (
         <Text variant='body' color='subdued'>