🌍 YPP Dashboard 2.0 (#4929)

* Initial layout setup * Ypp status widget * Further work on YppDashboardTier.tsx * Configure tiers * Add tooltips * Add close button * Add copy logic * Redirect user on sign up click * Remap routes on studio to go into dashboard only * Add missing assets * Correct payments link * Adjust sync details information to follow BE data * Modify eslint config * Fix linter * Overall fixes * Css fixes * BenefitCard layout rework * Add off sync and tooltips
Joystream · Oct 4, 2023 · ee01a1d · ee01a1d
1 parent 60fa6a6
commit ee01a1d
Show file tree

Hide file tree

Showing 32 changed files with 1,041 additions and 634 deletions.
diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -119,11 +119,11 @@ features:
         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
-      - title: Payments
-        link: /studio/payments
-        linkText: Go to Payments
-        label: Studio
-        icon: tokenStack
+      #      - title: Payments
+      #        link: /studio/payments
+      #        linkText: Go to Payments
+      #        label: Studio
+      #        icon: tokenStack
       - title: Support
         link: https://discord.com/channels/811216481340751934/1053294778529353788
         linkText: Go to Discord

diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env
@@ -43,7 +43,7 @@ VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql
 VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql
 VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc
 VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register
-VITE_DEVELOPMENT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
+VITE_DEVELOPMENT_YPP_FAUCET_URL=https://50.19.175.219.nip.io/memberships
 
 # Experimental env URLs
 VITE_NEXT_ORION_AUTH_URL=

diff --git a/packages/atlas/src/components/CopyButton/CopyButton.tsx b/packages/atlas/src/components/CopyButton/CopyButton.tsx
@@ -0,0 +1,59 @@
+import styled from '@emotion/styled'
+import { useRef, useState } from 'react'
+
+import { Text } from '@/components/Text'
+import { Button, ButtonProps } from '@/components/_buttons/Button'
+import { Popover, PopoverImperativeHandle } from '@/components/_overlays/Popover'
+import { useClipboard } from '@/hooks/useClipboard'
+import { cVar, sizes } from '@/styles'
+
+export type CopyButtonProps = {
+  textToCopy: string
+  copySuccessText?: string
+  className?: string
+  onClick?: () => void
+} & Omit<ButtonProps, 'to' | 'onClick'>
+export const CopyButton = ({
+  textToCopy,
+  copySuccessText = 'Copied',
+  className,
+  onClick,
+  ...buttonProps
+}: CopyButtonProps) => {
+  const { copyToClipboard } = useClipboard()
+  const popoverRef = useRef<PopoverImperativeHandle>(null)
+  const [copyButtonClicked, setCopyButtonClicked] = useState(false)
+  const handleCopy = () => {
+    if (!textToCopy || copyButtonClicked) {
+      return
+    }
+    copyToClipboard(textToCopy)
+    setCopyButtonClicked(true)
+    onClick?.()
+    popoverRef.current?.show()
+    setTimeout(() => {
+      setCopyButtonClicked(false)
+      popoverRef.current?.hide()
+    }, 3_000)
+  }
+
+  return (
+    <span className={className}>
+      <Popover placement="top" ref={popoverRef} trigger={<div />}>
+        <PopoverContent>
+          <Text variant="t100" as="p">
+            {copySuccessText}
+          </Text>
+        </PopoverContent>
+      </Popover>
+
+      <Button {...buttonProps} onClick={handleCopy} />
+    </span>
+  )
+}
+
+const PopoverContent = styled.div`
+  background-color: ${cVar('colorBackgroundElevated')};
+  border-radius: ${cVar('radiusSmall')};
+  padding: ${sizes(2)};
+`
diff --git a/packages/atlas/src/components/FlexBox/FlexBox.ts b/packages/atlas/src/components/FlexBox/FlexBox.ts
@@ -5,7 +5,7 @@ import { sizes } from '@/styles'
 
 type FlexBoxProps = {
   gap?: number
-  flow?: 'row' | 'column'
+  flow?: 'row' | 'column' | 'column-reverse' | 'row-reverse'
   alignItems?: string
   justifyContent?: string
   equalChildren?: boolean

diff --git a/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx b/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
@@ -76,18 +76,16 @@ const Channel = ({ channel }: { channel: YppReferral['channel'] }) => {
   )
 }
 
-const Tier = ({ tier }: { tier: number }) => {
+const Tier = (_: { tier: number }) => {
   return (
     <TierWrapper>
-      {/* todo {TIERS[tier].icon}*/}
+      {/*{TIERS[tier].icon}*/}
       <TierDescription>
         <div style={{ display: 'grid' }}>
           <LeftAlignText variant="h300" as="span">
-            Tier {tier + 1}{' '}
+            Tier
           </LeftAlignText>
-          <Text variant="t100" as="p" color="colorText">
-            {/* todo {TIERS[tier].rules}*/}
-          </Text>
+          <Text variant="t100" as="p" color="colorText" />
         </div>
       </TierDescription>
     </TierWrapper>

diff --git a/packages/atlas/src/components/_buttons/Button/Button.styles.ts b/packages/atlas/src/components/_buttons/Button/Button.styles.ts
@@ -426,6 +426,10 @@ export const ButtonBase = styled('button', { shouldForwardProp: isPropValid })<B
   transition-property: background-color, box-shadow, color, fill;
   border-radius: ${({ rounded }) => (rounded ? '999px' : cVar('radiusSmall'))};
 
+  span {
+    white-space: nowrap;
+  }
+
   &:focus ${BorderWrapper} {
     visibility: visible;
   }

diff --git a/packages/atlas/src/components/_navigation/SidenavStudio/SidenavStudio.tsx b/packages/atlas/src/components/_navigation/SidenavStudio/SidenavStudio.tsx
@@ -58,7 +58,7 @@ const studioNavbarItems: NavItemType[] = [
           icon: <SvgSidebarYpp />,
           name: 'YPP',
           expandedName: 'YouTube Partner Program',
-          to: absoluteRoutes.studio.ypp(),
+          to: absoluteRoutes.studio.yppDashboard(),
           matchPattern: {
             path: absoluteRoutes.studio.ypp() + '/*',
           },

diff --git a/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.stories.tsx b/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.stories.tsx
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled'
-import { Meta, Story } from '@storybook/react'
-
-import { Text } from '@/components/Text'
+import { Meta, StoryFn } from '@storybook/react'
 
 import { BenefitCard, BenefitCardProps } from './BenefitCard'
 
@@ -14,44 +12,11 @@ export default {
   args: {
     title: 'Share Atlas video on YouTube',
     description: 'To share Atlas video you need to first upload your own video to the platform.',
-    steps: [
-      <>
-        Click{' '}
-        <Text as="span" variant="t200" color="colorTextStrong">
-          “Publish new video”
-        </Text>{' '}
-        button and proceed to video workspace
-      </>,
-      <>
-        While publishing your new video make sure that all assets like thumbnail, video file, title, description are the{' '}
-        <Text as="span" variant="t200" color="colorTextStrong">
-          same as used previously on YouTube
-        </Text>
-      </>,
-      <>
-        After completing the upload -{' '}
-        <Text as="span" variant="t200" color="colorTextStrong">
-          contact your collabolator on discord
-        </Text>
-      </>,
-      'Place the link in the video description',
-    ],
-    variant: 'full',
-    actionButton: {
-      text: 'Publish new video',
-    },
-    dollarAmount: {
-      type: 'number',
-      amount: 2.56,
-    },
-    joyAmount: {
-      type: 'number',
-      amount: 12356,
-    },
+    dollarAmount: 69,
   },
 } as Meta<BenefitCardProps>
 
-const Template: Story<BenefitCardProps> = (args) => (
+const Template: StoryFn<BenefitCardProps> = (args) => (
   <Wrapper>
     <BenefitCard {...args} /> <BenefitCard {...args} /> <BenefitCard {...args} /> <BenefitCard {...args} />{' '}
     <BenefitCard {...args} />

diff --git a/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.styles.ts b/packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.styles.ts
@@ -4,9 +4,9 @@ import pattern1 from '@/assets/illustrations/svgs/other-benefit-card-pattern-1.s
 import pattern2 from '@/assets/illustrations/svgs/other-benefit-card-pattern-2.svg'
 import pattern3 from '@/assets/illustrations/svgs/other-benefit-card-pattern-3.svg'
 import { JoyTokenIcon } from '@/components/JoyTokenIcon'
-import { Text } from '@/components/Text'
+import { LayoutGrid } from '@/components/LayoutGrid'
 import { Button } from '@/components/_buttons/Button'
-import { cVar, media, sizes, square } from '@/styles'
+import { cVar, media, sizes } from '@/styles'
 
 export type Variant = 'compact' | 'full'
 
@@ -46,9 +46,11 @@ export const Pattern = styled.div`
 
 export const Wrapper = styled.div<{ variant: Variant }>`
   background-color: ${({ variant }) => cVar(variant === 'full' ? 'colorBackgroundMuted' : 'colorBackground')};
-
+  width: 100%;
+  display: grid;
+  position: relative;
   ${media.sm} {
-    display: flex;
+    grid-template-columns: auto 1fr;
   }
 
   ${Pattern} {
@@ -93,12 +95,6 @@ export const Content = styled.div<{ isCompact: boolean }>`
   }
 `
 
-export const TitleWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  gap: ${sizes(6)};
-`
-
 export const StyledList = styled.ul`
   padding-left: 0;
   counter-reset: list-number;
@@ -108,62 +104,21 @@ export const StyledList = styled.ul`
   margin-bottom: 0;
 `
 
-export const ListElement = styled(Text)`
-  list-style: none;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: flex-start;
-  gap: inherit;
-
-  ::before {
-    ${square('20px')};
-
-    counter-increment: list-number;
-    content: counter(list-number);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font: ${cVar('typographyDesktopT100')};
-    background-color: ${cVar('colorBackgroundStrong')};
-    border-radius: 50%;
-    color: ${cVar('colorTextStrong')};
-  }
-`
-
 export const StyledButton = styled(Button)`
   ${media.sm} {
     align-self: flex-end;
     margin-top: auto;
   }
 `
 
-export const ActionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: ${sizes(4)};
-
-  ${media.sm} {
-    margin-top: 0;
-    text-align: right;
-  }
+export const StyledJoyTokenIcon = styled(JoyTokenIcon)`
+  margin-right: ${({ size }) => sizes(size === 16 ? 1 : 2)};
 `
 
-export const RewardWrapper = styled.div<{ isCompact: boolean }>`
-  display: ${({ isCompact }) => (isCompact ? 'flex' : 'block')};
-  text-align: ${({ isCompact }) => (!isCompact ? 'right' : 'left')};
+export const ContenBox = styled(LayoutGrid)`
+  padding: ${sizes(4)};
 
   ${media.sm} {
-    display: block;
-    text-align: right;
+    padding: ${sizes(6)};
   }
 `
-
-export const TokenRewardWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`
-
-export const StyledJoyTokenIcon = styled(JoyTokenIcon)`
-  margin-right: ${({ size }) => sizes(size === 16 ? 1 : 2)};
-`