[PAY-3850][PAY-3849] Add listen streak noti on web (#11379)

Author: faridsalau

packages/common/src/adapters/notification.ts

@@ -212,6 +212,7 @@ export const notificationFromSDK = (
         challengeId,
         entityType: Entity.User,
         amount: data.amount as StringWei,
+        listenStreak: data.listenStreak,
         ...formatBaseNotification(notification)
       }
     }

packages/common/src/store/notifications/types.ts

@@ -462,6 +462,7 @@ export type ChallengeRewardNotification = BaseNotification & {
   challengeId: ChallengeRewardID
   entityType: string
   amount: StringWei
+  listenStreak?: number
 }
 
 export type ClaimableRewardNotification = BaseNotification & {

packages/discovery-provider/ddl/functions/handle_user_challenges.sql

@@ -2,12 +2,12 @@ create or replace function handle_on_user_challenge() returns trigger as $$
 declare
   cooldown_days integer;
   existing_notification integer;
+  listen_streak_value integer;
 begin
     if (new.is_complete = true) then
         -- attempt to insert a new notification, ignoring conflicts
         select challenges.cooldown_days into cooldown_days from challenges where id = new.challenge_id;
 
-
         if (cooldown_days is null or cooldown_days = 0) then
             -- Check if there is an existing notification with the same fields in the last 15 minutes
 
@@ -27,6 +27,13 @@ begin
                 on conflict do nothing;
             end if;
 
+            if new.challenge_id = 'e' then
+                select listen_streak into listen_streak_value
+                from challenge_listen_streak
+                where user_id = new.user_id
+                limit 1;
+            end if;
+
             insert into notification
             (blocknumber, user_ids, timestamp, type, group_id, specifier, data)
             values
@@ -37,7 +44,21 @@ begin
                 'challenge_reward',
                 'challenge_reward:' || new.user_id || ':challenge:' || new.challenge_id || ':specifier:' || new.specifier,
                 new.user_id,
-                json_build_object('specifier', new.specifier, 'challenge_id', new.challenge_id, 'amount', new.amount::text || '00000000' ) -- convert amount
+                case 
+                    when new.challenge_id = 'e' then
+                        json_build_object(
+                            'specifier', new.specifier,
+                            'challenge_id', new.challenge_id,
+                            'amount', new.amount::text || '00000000',
+                            'listen_streak', coalesce(listen_streak_value, 0)
+                        )
+                    else
+                        json_build_object(
+                            'specifier', new.specifier,
+                            'challenge_id', new.challenge_id,
+                            'amount', new.amount::text || '00000000'
+                        )
+                end
             )
             on conflict do nothing;
         else

packages/discovery-provider/plugins/notifications/src/types/notifications.ts

@@ -126,6 +126,7 @@ export type ChallengeRewardNotification = {
   amount: number
   specifier: string
   challenge_id: ChallengeId
+  listen_streak?: number
 }
 
 export type ClaimableRewardNotification = {

packages/discovery-provider/src/api/v1/models/notifications.py

@@ -377,6 +377,7 @@ def format(self, value):
         "amount": fields.String(required=True),
         "specifier": fields.String(required=True),
         "challenge_id": fields.String(required=True),
+        "listen_streak": fields.Integer(required=False),
     },
 )
 challenge_reward_notification_action = ns.clone(

packages/discovery-provider/src/api/v1/utils/extend_notification.py

@@ -343,6 +343,7 @@ def extend_challenge_reward(action: NotificationAction):
             "amount": to_wei_string(data["amount"]),
             "specifier": data["specifier"],
             "challenge_id": data["challenge_id"],
+            "listen_streak": data.get("listen_streak"),
         },
     }
 

packages/discovery-provider/src/queries/get_notifications.py

@@ -319,6 +319,7 @@ class ChallengeRewardNotification(TypedDict):
     amount: int
     specifier: str
     challenge_id: str
+    listen_streak: Optional[int]
 
 
 class ClaimableRewardNotification(TypedDict):

packages/sdk/src/sdk/api/generated/full/models/ChallengeRewardNotificationActionData.ts

@@ -38,6 +38,12 @@ export interface ChallengeRewardNotificationActionData {
      * @memberof ChallengeRewardNotificationActionData
      */
     challengeId: string;
+    /**
+     * 
+     * @type {number}
+     * @memberof ChallengeRewardNotificationActionData
+     */
+    listenStreak?: number;
 }
 
 /**
@@ -65,6 +71,7 @@ export function ChallengeRewardNotificationActionDataFromJSONTyped(json: any, ig
         'amount': json['amount'],
         'specifier': json['specifier'],
         'challengeId': json['challenge_id'],
+        'listenStreak': !exists(json, 'listen_streak') ? undefined : json['listen_streak'],
     };
 }
 
@@ -80,6 +87,7 @@ export function ChallengeRewardNotificationActionDataToJSON(value?: ChallengeRew
         'amount': value.amount,
         'specifier': value.specifier,
         'challenge_id': value.challengeId,
+        'listen_streak': value.listenStreak,
     };
 }
 

packages/web/src/components/notification/Notification/ChallengeRewardNotification.tsx

@@ -1,6 +1,11 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
-import { Name, BNAudio, ChallengeRewardID } from '@audius/common/models'
+import {
+  BNAudio,
+  ChallengeName,
+  ChallengeRewardID,
+  Name
+} from '@audius/common/models'
 import { ChallengeRewardNotification as ChallengeRewardNotificationType } from '@audius/common/store'
 import {
   formatNumberCommas,
@@ -24,14 +29,22 @@ import { IconRewards } from './components/icons'
 
 const { REWARDS_PAGE } = route
 
+const formatNumber = (amount: BNAudio) => {
+  return formatNumberCommas(Number(amount.toString()))
+}
+
 const messages = {
   amountEarned: (amount: BNAudio) =>
-    `You've earned ${formatNumberCommas(Number(amount.toString()))} $AUDIO`,
+    `You've earned ${formatNumber(amount)} $AUDIO`,
   referredText:
     ' for being referred! Invite your friends to join to earn more!',
   challengeCompleteText: ' for completing this challenge!',
   twitterShareText:
-    'I earned $AUDIO for completing challenges on @audius #Audius #AudioRewards'
+    'I earned $AUDIO for completing challenges on @audius #Audius #AudioRewards',
+  streakMilestone: (amountEarned: number, listenStreak: number) =>
+    `You've earned ${amountEarned} $AUDIO for hitting Day ${listenStreak} of your listening streak! You'll now earn an additional $AUDIO reward for every day you keep your streak going!`,
+  streakMaintenance: (amountEarned: number) =>
+    `You've earned ${amountEarned} $AUDIO for maintaining your listening streak! Keep your streak going to continue earning daily rewards!`
 }
 
 type ChallengeRewardNotificationProps = {
@@ -50,7 +63,7 @@ export const ChallengeRewardNotification = (
   props: ChallengeRewardNotificationProps
 ) => {
   const { notification } = props
-  const { challengeId, timeLabel, isViewed, type } = notification
+  const { challengeId, timeLabel, isViewed, type, listenStreak } = notification
   const dispatch = useDispatch()
   const record = useRecord()
   const mappedChallengeRewardsConfigKey =
@@ -65,17 +78,35 @@ export const ChallengeRewardNotification = (
     )
   }, [dispatch, record, type])
 
+  const notificationTitle = useMemo(() => {
+    if (challengeId === ChallengeName.ListenStreakEndless) {
+      return `${title}: Day ${listenStreak}`
+    }
+    return title
+  }, [challengeId, listenStreak, title])
+
+  const amountEarnedText = useMemo(() => {
+    switch (challengeId) {
+      case ChallengeName.ListenStreakEndless: {
+        const amountEarned = Number(formatNumber(amount))
+        if (amountEarned > 1) {
+          return messages.streakMilestone(amountEarned, listenStreak ?? 0)
+        }
+        return messages.streakMaintenance(amountEarned)
+      }
+      case 'referred':
+        return messages.amountEarned(amount) + messages.referredText
+      default:
+        return messages.amountEarned(amount) + messages.challengeCompleteText
+    }
+  }, [challengeId, amount, listenStreak])
+
   return (
     <NotificationTile notification={notification} onClick={handleClick}>
       <NotificationHeader icon={<IconRewards>{icon}</IconRewards>}>
-        <NotificationTitle>{title}</NotificationTitle>
+        <NotificationTitle>{notificationTitle}</NotificationTitle>
       </NotificationHeader>
-      <NotificationBody>
-        {messages.amountEarned(amount)}
-        {challengeId === 'referred'
-          ? messages.referredText
-          : messages.challengeCompleteText}
-      </NotificationBody>
+      <NotificationBody>{amountEarnedText}</NotificationBody>
       <TwitterShareButton
         type='static'
         url={env.AUDIUS_URL}

packages/web/src/pages/rewards-page/config.tsx

@@ -140,7 +140,7 @@ const webChallengesConfig: Record<ChallengeRewardID, WebChallengeInfo> = {
     }
   },
   [ChallengeName.ListenStreakEndless]: {
-    icon: <i className='emoji large headphone' />,
+    icon: <i className='emoji large fire' />,
     modalButtonInfo: {
       incomplete: linkButtonMap.trendingTracks,
       inProgress: linkButtonMap.trendingTracks,