😮‍💨 YPP dashboard remake (#6251)

* Initial setup * Actions changes * Fix descriptions and add tooltips * Review fixes v1 * Tooltip spacing * Initial segment analytics * Review fixes v2 * Ad missing analytics
Joystream · May 3, 2024 · 0522a25 · 0522a25
1 parent 37e9652
commit 0522a25
Show file tree

Hide file tree

Showing 9 changed files with 584 additions and 131 deletions.
diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -116,8 +116,8 @@ features:
         actionButtonText: Get referral link
         actionButtonAction: copyReferral
     widgets: # Widgets on Ypp landing page
-      - title: Program details
-        link: https://www.notion.so/joystream/YPP-programme-d492c2eb88ff4ace955b5f2902ec21fb
+      - title: Creators Wiki
+        link: https://www.notion.so/joystream/79e2c624887a4183afa6de8c3dbaf905?v=0b160770d22b4426aaf1f85a1a28f75e&pvs=4
         linkText: Go to Notion # Used only on YPP Dashboard - if empty defaults to "Go to {title}"
         label: Notion # Used for YPP Dashboard to inform user which vendor given feature uses - if empty defaults to title
         icon: info # Optional icon to be displayed. Possible icons: message, info, tokenStack
@@ -126,8 +126,8 @@ features:
         linkText: Go to Payments
         label: Studio
         icon: tokenStack
-      - title: Support
-        link: https://discord.com/channels/811216481340751934/1053294778529353788
+      - title: Community
+        link: https://discord.com/channels/811216481340751934/1224709788592767136
         linkText: Go to Discord
         label: Discord
         icon: message

diff --git a/packages/atlas/src/components/_navigation/SidenavBase/SidenavBase.styles.ts b/packages/atlas/src/components/_navigation/SidenavBase/SidenavBase.styles.ts
@@ -2,11 +2,11 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
-import { SvgLogoGithubMonochrome } from '@/assets/icons'
+import { SvgActionMoney, SvgLogoGithubMonochrome } from '@/assets/icons'
 import { SvgJoystreamLogoFull } from '@/assets/logos'
 import { TextButton } from '@/components/_buttons/Button'
 import { HamburgerButton } from '@/components/_buttons/HamburgerButton'
-import { cVar, media, sizes, transitions, zIndex } from '@/styles'
+import { cVar, media, sizes, square, transitions, zIndex } from '@/styles'
 
 type ExpandableElementProps = {
   expanded?: boolean
@@ -167,3 +167,7 @@ export const ScrollContainer = styled.div<ScrollContainerProps>`
   overflow-x: hidden;
   flex-grow: 10;
 `
+
+export const StyledSvgActionMoney = styled(SvgActionMoney)`
+  ${square(24)}
+`
diff --git a/packages/atlas/src/components/_navigation/SidenavStudio/SidenavStudio.tsx b/packages/atlas/src/components/_navigation/SidenavStudio/SidenavStudio.tsx
@@ -8,12 +8,11 @@ import {
   SvgSidebarToken,
   SvgSidebarUpload,
   SvgSidebarVideos,
-  SvgSidebarYpp,
 } from '@/assets/icons'
 import { AppLogo } from '@/components/AppLogo'
 import { Button } from '@/components/_buttons/Button'
 import { NavItemType } from '@/components/_navigation/NavItem'
-import { SidenavBase } from '@/components/_navigation/SidenavBase'
+import { SidenavBase, StyledSvgActionMoney } from '@/components/_navigation/SidenavBase'
 import { atlasConfig } from '@/config'
 import { absoluteRoutes } from '@/config/routes'
 import { chanelUnseenDraftsSelector, useDraftStore } from '@/providers/drafts'
@@ -55,9 +54,9 @@ const studioNavbarItems: NavItemType[] = [
   ...(atlasConfig.features.ypp.googleConsoleClientId
     ? [
         {
-          icon: <SvgSidebarYpp />,
-          name: 'YPP',
-          expandedName: 'YouTube Partner Program',
+          icon: <StyledSvgActionMoney />,
+          name: 'Earn',
+          expandedName: 'Creator Rewards',
           to: absoluteRoutes.studio.yppDashboard(),
         },
       ]

diff --git a/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.styles.ts b/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.styles.ts
@@ -23,7 +23,7 @@ export const Pattern = styled.div`
     right: 0;
     width: 108px;
     height: 100%;
-    background: linear-gradient(180deg, rgb(15 17 20 / 0) 0%, ${cVar('colorCoreNeutral900')} 100%);
+    background: linear-gradient(90deg, rgb(15 17 20 / 0) 0%, ${cVar('colorBackgroundMuted')} 100%);
   }
 
   ${media.sm} {
@@ -39,13 +39,13 @@ export const Pattern = styled.div`
       right: unset;
       width: 100%;
       height: 56px;
-      background: linear-gradient(180deg, rgb(15 17 20 / 0) 0%, ${cVar('colorCoreNeutral800')} 100%);
+      background: linear-gradient(180deg, rgb(15 17 20 / 0) 0%, ${cVar('colorBackgroundMuted')} 100%);
     }
   }
 `
 
 export const Wrapper = styled.div<{ variant: Variant }>`
-  background-color: ${({ variant }) => cVar(variant === 'full' ? 'colorBackgroundMuted' : 'colorBackground')};
+  background-color: ${cVar('colorBackground')};
   width: 100%;
   display: grid;
   position: relative;
@@ -121,4 +121,8 @@ export const ContenBox = styled(LayoutGrid)`
   ${media.sm} {
     padding: ${sizes(6)};
   }
+
+  ${media.md} {
+    padding: ${sizes(8)};
+  }
 `
diff --git a/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.tsx b/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.tsx
@@ -10,47 +10,34 @@ import { ContenBox, Pattern, Wrapper } from './BenefitCard.styles'
 
 export type BenefitCardProps = {
   title: string
-  description?: string
-  dollarAmount?: number
-  amountTooltip?: string
-  isRangeAmount?: boolean
+  description?: ReactNode
+  rewardNode?: ReactNode
+  rewardTooltip?: ReactNode
   className?: string
   actionNode?: ReactNode
 }
 
 export const BenefitCard: FC<BenefitCardProps> = ({
   title,
   description,
-  dollarAmount,
+  rewardNode,
   className,
   actionNode,
-  isRangeAmount,
-  amountTooltip,
+  rewardTooltip,
 }) => {
   const smMatch = useMediaMatch('sm')
   const lgMatch = useMediaMatch('lg')
 
-  const rewardContent =
-    typeof dollarAmount === 'number' ? (
-      <FlexBox justifyContent={lgMatch ? 'end' : 'unset'} alignItems="center">
-        {isRangeAmount ? (
-          <FlexBox width="fit-content" flow="column" alignItems={smMatch ? 'center' : 'start'}>
-            <Text variant="h400" as="h1">
-              Up to +{dollarAmount} USD
-            </Text>
-            <Text variant="t200" as="p" color="colorText">
-              Depending on tier
-            </Text>
-          </FlexBox>
-        ) : (
-          <Text variant="h400" as="h1">
-            {dollarAmount > 0 ? `+${dollarAmount} USD` : 'Not paid'}
-          </Text>
-        )}
-
-        {amountTooltip && <Information text={amountTooltip} placement="top-start" />}
-      </FlexBox>
-    ) : null
+  const rewardContent = (
+    <FlexBox justifyContent={lgMatch ? 'end' : 'unset'} alignItems="center">
+      <Text variant="h400" as="span">
+        {rewardNode}
+      </Text>
+      {rewardTooltip && (
+        <Information interactive appendTo={document.body} customContent={rewardTooltip} placement="top-start" />
+      )}
+    </FlexBox>
+  )
 
   return (
     <Wrapper variant="full" className={className}>
@@ -66,16 +53,10 @@ export const BenefitCard: FC<BenefitCardProps> = ({
         </FlexGridItem>
         {lgMatch ? (
           <>
-            {typeof dollarAmount === 'number' && (
-              <FlexGridItem colSpan={{ lg: 2 }} alignItems="center">
-                {rewardContent}
-              </FlexGridItem>
-            )}
-            <FlexGridItem
-              colSpan={{ lg: typeof dollarAmount === 'number' ? 2 : 4 }}
-              alignItems="center"
-              justifyContent="end"
-            >
+            <FlexGridItem colSpan={{ lg: 2 }} alignItems="center">
+              {rewardContent}
+            </FlexGridItem>
+            <FlexGridItem colSpan={{ lg: 2 }} alignItems="center" justifyContent="end">
               {actionNode}
             </FlexGridItem>
           </>

diff --git a/packages/atlas/src/components/_ypp/ReferralLinkButton/ReferralLinkButton.tsx b/packages/atlas/src/components/_ypp/ReferralLinkButton/ReferralLinkButton.tsx
@@ -4,7 +4,7 @@ import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useUser } from '@/providers/user/user.hooks'
 import { StyledCopyButton } from '@/views/studio/YppDashboard/tabs/YppDashboardTabs.styles'
 
-export const ReferralLinkButton = (props: Omit<ButtonProps, 'to' | 'onClick'>) => {
+export const ReferralLinkButton = (props: { onClick?: () => void } & Omit<ButtonProps, 'to'>) => {
   const { trackReferralLinkGenerated } = useSegmentAnalytics()
   const { channelId } = useUser()
   const smMatch = useMediaMatch('sm')
@@ -15,7 +15,7 @@ export const ReferralLinkButton = (props: Omit<ButtonProps, 'to' | 'onClick'>) =
       fullWidth={!smMatch}
       textToCopy={`${window.location.origin}/ypp?referrerId=${channelId}`}
       copySuccessText="Referral link copied!"
-      onClick={() => trackReferralLinkGenerated(channelId)}
+      onClick={props.onClick ? props.onClick : () => trackReferralLinkGenerated(channelId)}
     >
       Copy referral link
     </StyledCopyButton>

diff --git a/packages/atlas/src/hooks/useSegmentAnalytics.ts b/packages/atlas/src/hooks/useSegmentAnalytics.ts
@@ -516,6 +516,95 @@ export const useSegmentAnalytics = () => {
     [analytics]
   )
 
+  const trackRewardsReferralLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Backlink Generated', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackRewardsOriginalCreatorsLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Original appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackRewardsBrandingLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Branding appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackJoinDiscordLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Join Discord clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackTwitterPostLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Post on X clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+  const trackRoundtableEventsClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Roundtable Events Clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackShareNftLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Share NFT clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackShareTokenLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Share Token clicked', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
+  const trackAmbassadorLinkClicked = useCallback(
+    (channelId: string, channelTier: string) => {
+      analytics.track('Rewards - Ambassador appl', {
+        channelId,
+        channelTier,
+      })
+    },
+    [analytics]
+  )
+
   const runNextQueueEvent = useCallback(async () => {
     const queueEvent = playbackEventsQueue.current.shift()
     if (!queueEvent) {
@@ -598,5 +687,14 @@ export const useSegmentAnalytics = () => {
     trackYppOptIn,
     trackYppReqsNotMet,
     trackYppSignInButtonClick,
+    trackAmbassadorLinkClicked,
+    trackJoinDiscordLinkClicked,
+    trackRewardsOriginalCreatorsLinkClicked,
+    trackShareTokenLinkClicked,
+    trackShareNftLinkClicked,
+    trackTwitterPostLinkClicked,
+    trackRewardsBrandingLinkClicked,
+    trackRewardsReferralLinkClicked,
+    trackRoundtableEventsClicked,
   }
 }
diff --git a/packages/atlas/src/views/studio/YppDashboard/YppDashboard.tsx b/packages/atlas/src/views/studio/YppDashboard/YppDashboard.tsx
@@ -20,7 +20,7 @@ const TABS = ['Dashboard', 'Referrals', 'Settings'] as const
 type Tab = typeof TABS[number]
 
 export const YppDashboard: FC = () => {
-  const headTags = useHeadTags('YouTube Partner Program')
+  const headTags = useHeadTags('Creator Rewards')
   const mdMatch = useMediaMatch('md')
   const xsMatch = useMediaMatch('xs')
   const [searchParams] = useSearchParams()