[C-4079] Add rewards cooldown to web (#7967)

AudiusProject · Mar 29, 2024 · 5978ffe · 5978ffe
1 parent 592e664
commit 5978ffe
Show file tree

Hide file tree

Showing 5 changed files with 311 additions and 111 deletions.
diff --git a/packages/common/src/models/AudioRewards.ts b/packages/common/src/models/AudioRewards.ts
@@ -12,6 +12,7 @@ export type UserChallenge = {
   user_id: string
   amount: number
   disbursed_amount: number
+  cooldown_days: number
 }
 
 export type Specifier = string

diff --git a/packages/common/src/services/remote-config/feature-flags.ts b/packages/common/src/services/remote-config/feature-flags.ts
@@ -57,7 +57,8 @@ export enum FeatureFlags {
   EDIT_ALBUMS = 'edit_albums',
   COINFLOW_OFFRAMP_ENABLED = 'coinflow_offramp_enabled',
   TIKTOK_NATIVE_AUTH = 'tiktok_native_auth',
-  PREMIUM_ALBUMS_ENABLED = 'premium_albums_enabled'
+  PREMIUM_ALBUMS_ENABLED = 'premium_albums_enabled',
+  REWARDS_COOLDOWN = 'rewards_cooldown'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -130,5 +131,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.EDIT_ALBUMS]: false,
   [FeatureFlags.COINFLOW_OFFRAMP_ENABLED]: false,
   [FeatureFlags.TIKTOK_NATIVE_AUTH]: true,
-  [FeatureFlags.PREMIUM_ALBUMS_ENABLED]: false
+  [FeatureFlags.PREMIUM_ALBUMS_ENABLED]: false,
+  [FeatureFlags.REWARDS_COOLDOWN]: false
 }
diff --git a/packages/web/src/common/store/pages/audio-rewards/store.test.ts b/packages/web/src/common/store/pages/audio-rewards/store.test.ts
@@ -479,7 +479,8 @@ describe.skip('Rewards Page Sagas', () => {
         challenge_type: 'numeric',
         specifier: '1',
         user_id: '1',
-        disbursed_amount: 7
+        disbursed_amount: 7,
+        cooldown_days: 0
       },
       {
         challenge_id: 'referrals',
@@ -492,7 +493,8 @@ describe.skip('Rewards Page Sagas', () => {
         challenge_type: 'numeric',
         specifier: '1',
         user_id: '1',
-        disbursed_amount: 5
+        disbursed_amount: 5,
+        cooldown_days: 0
       },
       {
         challenge_id: 'track-upload',
@@ -505,7 +507,8 @@ describe.skip('Rewards Page Sagas', () => {
         challenge_type: 'numeric',
         specifier: '1',
         user_id: '1',
-        disbursed_amount: 3
+        disbursed_amount: 3,
+        cooldown_days: 0
       }
     ]
     const fetchUserChallengesProvisions: StaticProvider[] = [
@@ -614,7 +617,8 @@ describe.skip('Rewards Page Sagas', () => {
         challenge_type: 'numeric',
         specifier: '1',
         user_id: '1',
-        disbursed_amount: 7
+        disbursed_amount: 7,
+        cooldown_days: 0
       }
     ]
 
@@ -667,7 +671,8 @@ describe.skip('Rewards Page Sagas', () => {
         challenge_type: 'numeric',
         specifier: '1',
         user_id: '1',
-        disbursed_amount: 2
+        disbursed_amount: 2,
+        cooldown_days: 0
       }
     ]
 

diff --git a/...ages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/...ages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useContext, useMemo } from 'react'
 
+import { useFeatureFlag } from '@audius/common/hooks'
+import { FeatureFlags } from '@audius/common/services'
 import {
   accountSelectors,
   challengesSelectors,
@@ -49,6 +51,7 @@ import PurpleBox from '../../PurpleBox'
 import ModalDrawer from '../ModalDrawer'
 
 import { AudioMatchingRewardsModalContent } from './AudioMatchingRewardsModalContent'
+import { CooldownRewardsModalContent } from './CooldownRewardsModalContent'
 import { ProgressDescription } from './ProgressDescription'
 import { ProgressReward } from './ProgressReward'
 import styles from './styles.module.css'
@@ -291,22 +294,21 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
           challenge?.state === 'completed' || challenge?.state === 'disbursed'
       })}
     >
-      {challenge?.state === 'incomplete' && (
+      {challenge?.state === 'incomplete' ? (
         <h3 className={styles.incomplete}>Incomplete</h3>
-      )}
-      {(challenge?.state === 'completed' ||
-        challenge?.state === 'disbursed') && (
+      ) : null}
+      {challenge?.state === 'completed' || challenge?.state === 'disbursed' ? (
         <h3 className={styles.complete}>Complete</h3>
-      )}
-      {challenge?.state === 'in_progress' && progressLabel && (
+      ) : null}
+      {challenge?.state === 'in_progress' && progressLabel ? (
         <h3 className={styles.inProgress}>
           {fillString(
             progressLabel,
             formatNumberCommas(currentStepCount.toString()),
             formatNumberCommas(challenge?.max_steps?.toString() ?? '')
           )}
         </h3>
-      )}
+      ) : null}
     </div>
   )
 
@@ -380,113 +382,133 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
     claimStatus === ClaimStatus.ERROR ? (
       <div className={styles.claimError}>{getErrorMessage(aaoErrorCode)}</div>
     ) : null
-
-  return isAudioMatchingChallenge(modalType) ? (
-    <AudioMatchingRewardsModalContent
-      errorContent={errorContent}
-      onNavigateAway={dismissModal}
-      onClaimRewardClicked={onClaimRewardClicked}
-      claimInProgress={claimInProgress}
-      challenge={challenge}
-      challengeName={modalType}
-    />
-  ) : (
-    <div className={wm(styles.container)}>
-      {isMobile ? (
-        <>
-          {progressDescription}
-          <div className={wm(styles.progressCard)}>
-            <div className={wm(styles.progressInfo)}>
+  const { isEnabled: isRewardsCooldownEnabled } = useFeatureFlag(
+    FeatureFlags.REWARDS_COOLDOWN
+  )
+  if (isRewardsCooldownEnabled && challenge && challenge.cooldown_days > 0) {
+    return (
+      <CooldownRewardsModalContent
+        errorContent={errorContent}
+        onNavigateAway={dismissModal}
+        onClaimRewardClicked={onClaimRewardClicked}
+        claimInProgress={claimInProgress}
+        challenge={challenge}
+        challengeName={modalType}
+        onClickProgress={goToRoute}
+        progressIcon={buttonInfo?.rightIcon}
+        progressLabel={buttonInfo?.label}
+      />
+    )
+  } else if (!isRewardsCooldownEnabled && isAudioMatchingChallenge(modalType)) {
+    return (
+      <AudioMatchingRewardsModalContent
+        errorContent={errorContent}
+        onNavigateAway={dismissModal}
+        onClaimRewardClicked={onClaimRewardClicked}
+        claimInProgress={claimInProgress}
+        challenge={challenge}
+        challengeName={modalType}
+      />
+    )
+  } else {
+    return (
+      <div className={wm(styles.container)}>
+        {isMobile ? (
+          <>
+            {progressDescription}
+            <div className={wm(styles.progressCard)}>
+              <div className={wm(styles.progressInfo)}>
+                {progressReward}
+                {showProgressBar ? (
+                  <div className={wm(styles.progressBarSection)}>
+                    <h3>Progress</h3>
+                    <ProgressBar
+                      className={wm(styles.progressBar)}
+                      value={currentStepCount}
+                      max={challenge?.max_steps}
+                    />
+                  </div>
+                ) : null}
+              </div>
+              {progressStatusLabel}
+            </div>
+            {modalType === 'profile-completion' ? <ProfileChecks /> : null}
+          </>
+        ) : (
+          <div className={styles.progressCard}>
+            <div className={styles.progressInfo}>
+              {progressDescription}
               {progressReward}
-              {showProgressBar ? (
-                <div className={wm(styles.progressBarSection)}>
-                  <h3>Progress</h3>
-                  <ProgressBar
-                    className={wm(styles.progressBar)}
-                    value={currentStepCount}
-                    max={challenge?.max_steps}
-                  />
-                </div>
-              ) : null}
             </div>
+            {showProgressBar ? (
+              <div className={wm(styles.progressBarSection)}>
+                {modalType === 'profile-completion' ? <ProfileChecks /> : null}
+                <ProgressBar
+                  className={wm(styles.progressBar)}
+                  value={currentStepCount}
+                  max={challenge?.max_steps}
+                />
+              </div>
+            ) : null}
             {progressStatusLabel}
           </div>
-          {modalType === 'profile-completion' && <ProfileChecks />}
-        </>
-      ) : (
-        <div className={styles.progressCard}>
-          <div className={styles.progressInfo}>
-            {progressDescription}
-            {progressReward}
-          </div>
-          {showProgressBar && (
-            <div className={wm(styles.progressBarSection)}>
-              {modalType === 'profile-completion' && <ProfileChecks />}
-              <ProgressBar
-                className={wm(styles.progressBar)}
-                value={currentStepCount}
-                max={challenge?.max_steps}
-              />
-            </div>
-          )}
-          {progressStatusLabel}
-        </div>
-      )}
+        )}
 
-      {userHandle && (modalType === 'referrals' || modalType === 'ref-v') && (
-        <div className={wm(styles.buttonContainer)}>
-          <TwitterShareButton modalType={modalType} inviteLink={inviteLink} />
-          <div className={styles.buttonSpacer} />
-          <InviteLink inviteLink={inviteLink} />
-        </div>
-      )}
-      {modalType === 'mobile-install' && (
-        <div className={wm(styles.qrContainer)}>
-          <img className={styles.qr} src={QRCode} alt='QR Code' />
-          <div className={styles.qrTextContainer}>
-            <h2 className={styles.qrText}>{messages.qrText}</h2>
-            <h3 className={styles.qrSubtext}>{messages.qrSubtext}</h3>
+        {userHandle && (modalType === 'referrals' || modalType === 'ref-v') ? (
+          <div className={wm(styles.buttonContainer)}>
+            <TwitterShareButton modalType={modalType} inviteLink={inviteLink} />
+            <div className={styles.buttonSpacer} />
+            <InviteLink inviteLink={inviteLink} />
           </div>
-        </div>
-      )}
-      {buttonLink && challenge?.state !== 'completed' && (
-        <Button
-          variant='primary'
-          fullWidth={isMobile}
-          onClick={goToRoute}
-          iconLeft={buttonInfo?.leftIcon}
-          iconRight={buttonInfo?.rightIcon}
-        >
-          {buttonInfo?.label}
-        </Button>
-      )}
-      <div className={wm(styles.claimRewardWrapper)}>
-        {audioToClaim > 0 ? (
-          <>
-            <div className={styles.claimRewardAmountLabel}>
-              {`${audioToClaim} ${messages.claimAmountLabel}`}
-            </div>
-            <Button
-              variant='primary'
-              isLoading={claimInProgress}
-              iconRight={IconCheck}
-              onClick={onClaimRewardClicked}
-            >
-              {messages.claimYourReward}
-            </Button>
-          </>
         ) : null}
-        {audioClaimedSoFar > 0 && challenge?.state !== 'disbursed' ? (
-          <div className={styles.claimRewardClaimedAmountLabel}>
-            {`(${formatNumberCommas(audioClaimedSoFar)} ${
-              messages.claimedSoFar
-            })`}
+        {modalType === 'mobile-install' ? (
+          <div className={wm(styles.qrContainer)}>
+            <img className={styles.qr} src={QRCode} alt='QR Code' />
+            <div className={styles.qrTextContainer}>
+              <h2 className={styles.qrText}>{messages.qrText}</h2>
+              <h3 className={styles.qrSubtext}>{messages.qrSubtext}</h3>
+            </div>
           </div>
         ) : null}
+        {buttonLink && challenge?.state !== 'completed' ? (
+          <Button
+            variant='primary'
+            fullWidth={isMobile}
+            onClick={goToRoute}
+            iconLeft={buttonInfo?.leftIcon}
+            iconRight={buttonInfo?.rightIcon}
+          >
+            {buttonInfo?.label}
+          </Button>
+        ) : null}
+        <div className={wm(styles.claimRewardWrapper)}>
+          {audioToClaim > 0 ? (
+            <>
+              <div className={styles.claimRewardAmountLabel}>
+                {`${audioToClaim} ${messages.claimAmountLabel}`}
+              </div>
+              <Button
+                variant='primary'
+                isLoading={claimInProgress}
+                iconRight={IconCheck}
+                onClick={onClaimRewardClicked}
+              >
+                {messages.claimYourReward}
+              </Button>
+            </>
+          ) : null}
+          {audioClaimedSoFar > 0 && challenge?.state !== 'disbursed' ? (
+            <div className={styles.claimRewardClaimedAmountLabel}>
+              {`(${formatNumberCommas(audioClaimedSoFar)} ${
+                messages.claimedSoFar
+              })`}
+            </div>
+          ) : null}
+        </div>
+        {errorContent}
       </div>
-      {errorContent}
-    </div>
-  )
+    )
+  }
 }
 
 export const ChallengeRewardsModal = () => {