YPP disabled: UI adjustments

Lezek123 · Nov 5, 2024 · e057ced · e057ced
1 parent d946843
commit e057ced
Show file tree

Hide file tree

Showing 22 changed files with 300 additions and 128 deletions.
diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -38,7 +38,7 @@ joystream:
 
 features:
   ypp:
-    enabled: false # Whether the YPP is currently enabled
+    suspended: true # Whether the YPP is currently suspended
     yppDelayThreshold: 300 # When the YPP sync backlog exceeds the threshold, Atlas will consider the YPP sync delayed.
     landingPageOgTitle: 'Gleev Creator Rewards Program' # Open graph title for YPP landing page - used in open graph meta tags in HTML
     landingPageOgDescription: 'Connect and monetize your content with Web3 native features on Gleev, the video streaming dApp built on Joystream blockchain.' # Open graph description for YPP landing page - used in open graph meta tags in HTML

diff --git a/packages/atlas/src/components/_inputs/OptionCardGroup/OptionCardGroup.tsx b/packages/atlas/src/components/_inputs/OptionCardGroup/OptionCardGroup.tsx
@@ -15,7 +15,13 @@ type Checkbox = {
 type Radio = {
   selectedValue?: string | number | boolean | null
   onChange?: (value: string | number | boolean) => void
-  options: Array<{ label: string; caption?: string; value: string | number | boolean; icon?: ReactNode }>
+  options: Array<{
+    label: string
+    caption?: string
+    value: string | number | boolean
+    icon?: ReactNode
+    disabled?: boolean
+  }>
 }
 
 export type OptionCardGroupProps = {

diff --git a/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx b/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx
@@ -60,13 +60,17 @@ export const viewerNavItems = [
         },
       ]
     : []),
-  {
-    icon: <SvgSidebarReferrals />,
-    name: 'Referrals',
-    expandedName: 'Referrals program',
-    to: absoluteRoutes.viewer.referrals(),
-    bottomNav: true,
-  },
+  ...(!atlasConfig.features.ypp.suspended
+    ? [
+        {
+          icon: <SvgSidebarReferrals />,
+          name: 'Referrals',
+          expandedName: 'Referrals program',
+          to: absoluteRoutes.viewer.referrals(),
+          bottomNav: true,
+        },
+      ]
+    : []),
 ]
 export const SidenavViewer: FC = () => {
   const [expanded, setExpanded] = useState(false)

diff --git a/packages/atlas/src/components/_referrals/ReferralsBanner/ReferralsBanner.tsx b/packages/atlas/src/components/_referrals/ReferralsBanner/ReferralsBanner.tsx
@@ -11,6 +11,10 @@ export const ReferralsBanner = () => {
   const navigate = useNavigate()
   const referralReward = (getTierRewards('diamond')?.referral || 0) * referralMultiplier
 
+  if (atlasConfig.features.ypp.suspended) {
+    return null
+  }
+
   return (
     <StyledBanner
       title={`Earn up to $${referralReward} for referring a channel`}

diff --git a/packages/atlas/src/components/_ypp/YppDisabledModal/index.ts b/packages/atlas/src/components/_ypp/YppDisabledModal/index.ts
diff --git a/packages/atlas/src/components/_ypp/YppSuspendedBanner/YppSuspendedBanner.tsx b/packages/atlas/src/components/_ypp/YppSuspendedBanner/YppSuspendedBanner.tsx
@@ -0,0 +1,81 @@
+import { FC } from 'react'
+
+import { SvgAlertsWarning24 } from '@/assets/icons'
+import { Banner } from '@/components/Banner'
+import { Text } from '@/components/Text'
+import { TextButton } from '@/components/_buttons/Button'
+import { cVar } from '@/styles'
+
+import { List, ListItem, ListItemContent, ListItemMarker } from './YppSuspendedBannerStyles'
+
+export const YppSuspendedBanner: FC = () => (
+  <Banner
+    title="YouTube Partner Program temporarily suspended"
+    icon={<SvgAlertsWarning24 />}
+    borderColor={cVar('colorTextCaution')}
+    size="medium"
+    description={
+      <>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 6 }}>
+          Due to recent technical issues with the YouTube Sync service, the YouTube Partner Program (YPP) has been
+          temporarily suspended until further notice.
+        </Text>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 2 }}>
+          The issues we identified:
+          <List>
+            <ListItem>
+              <ListItemMarker />
+              <ListItemContent>
+                Some creators were inadvertently removed from YPP due to a bug in the YouTube Sync service (
+                <TextButton as="span" to="https://github.com/Joystream/youtube-synch/issues/337">
+                  GitHub issue
+                </TextButton>
+                )
+              </ListItemContent>
+            </ListItem>
+            <ListItem>
+              <ListItemMarker />
+              <ListItemContent>
+                Recently imposed YouTube rate limits have caused synchronization delays, leaving over 100,000 videos
+                stuck in the sync queue.
+              </ListItemContent>
+            </ListItem>
+          </List>
+        </Text>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 6 }}>
+          We're actively working to resolve these issues and will provide updates as soon as possible.
+        </Text>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 6 }}>
+          To minimize disruption, we have implemented the following temporary measures:
+          <List>
+            <ListItem>
+              <ListItemMarker />
+              <ListItemContent>We disabled new YPP signups.</ListItemContent>
+            </ListItem>
+            <ListItem>
+              <ListItemMarker />
+              <ListItemContent>We paused all creator payouts and rewards.</ListItemContent>
+            </ListItem>
+            <ListItem>
+              <ListItemMarker />
+              <ListItemContent>We limited content synchronization to selected channels.</ListItemContent>
+            </ListItem>
+          </List>
+        </Text>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 2 }}>
+          If you're currently enrolled in YPP, you can still disable YouTube sync or opt out of the program via the{' '}
+          <Text variant="t200" as="span" color="colorTextStrong">
+            Settings
+          </Text>{' '}
+          tab.
+        </Text>
+        <Text variant="t200" color="colorText" as="p" margin={{ bottom: 2 }}>
+          Please note that these actions are currently irreversible.
+        </Text>
+        <Text variant="t200" color="colorText" as="p">
+          We apologize for any inconvenience and appreciate your understanding.
+        </Text>
+      </>
+    }
+  />
+)
diff --git a/packages/atlas/src/components/_ypp/YppSuspendedBanner/YppSuspendedBannerStyles.ts b/packages/atlas/src/components/_ypp/YppSuspendedBanner/YppSuspendedBannerStyles.ts
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled'
+
+import { cVar, sizes } from '@/styles'
+
+export const List = styled.ul`
+  margin: ${sizes(2)} 0;
+  padding: 0 0 0 ${sizes(4)};
+  list-style-type: none;
+`
+export const ListItem = styled.li`
+  padding: 0;
+  margin: 0 0 ${sizes(2)} 0;
+  display: flex;
+  align-items: flex-start;
+`
+
+export const ListItemMarker = styled.div`
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  margin: ${sizes(1.5)} ${sizes(3)} 0 0;
+  background-color: ${cVar('colorText')};
+`
+
+export const ListItemContent = styled.div`
+  flex: 1;
+`
diff --git a/packages/atlas/src/components/_ypp/YppSuspendedBanner/index.ts b/packages/atlas/src/components/_ypp/YppSuspendedBanner/index.ts
@@ -0,0 +1 @@
+export * from './YppSuspendedBanner'
diff --git a/...ypp/YppDisabledModal/YppDisabledModal.tsx → ...p/YppSuspendedModal/YppSuspendedModal.tsx b/...ypp/YppDisabledModal/YppDisabledModal.tsx → ...p/YppSuspendedModal/YppSuspendedModal.tsx
@@ -3,29 +3,33 @@ import { FC } from 'react'
 import { Text } from '@/components/Text'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 
-export type ConnectWithYtModalProps = {
+export type YppSuspendedModalProps = {
+  buttonText?: string
   show: boolean
   onClose: () => void
 }
 
-export const YppDisabledModal: FC<ConnectWithYtModalProps> = ({ show, onClose }) => {
-  // const smMatch = useMediaMatch('sm')
+export const YppSuspendedModal: FC<YppSuspendedModalProps> = ({
+  show,
+  onClose,
+  buttonText = 'Go back to home page',
+}) => {
   return (
     <DialogModal
       size="medium"
       show={show}
       dividers
       primaryButton={{
-        text: 'Continue',
+        text: buttonText,
         onClick: onClose,
       }}
     >
       <Text variant="h400" as="h2" margin={{ bottom: 4 }}>
-        YouTube Partner Program temporarily disabled
+        YouTube Partner Program temporarily suspended
       </Text>
       <Text variant="t200" as="p" color="colorText" margin={{ bottom: 4 }}>
-        Due to recent technical issues with the YouTube Synch service, YouTube Partner Program has been temporarily
-        disabled until further notice.
+        Due to recent technical issues with the YouTube Sync service, YouTube Partner Program (YPP) has been temporarily
+        suspended until further notice.
       </Text>
       <Text variant="t200" as="p" color="colorText" margin={{ bottom: 4 }}>
         You can still create a channel on Gleev, but it will not be connected with your YouTube channel and you will not

diff --git a/...ppDisabledModal/YppDisabledModalStyles.ts → ...SuspendedModal/YppSuspendedModalStyles.ts b/...ppDisabledModal/YppDisabledModalStyles.ts → ...SuspendedModal/YppSuspendedModalStyles.ts
diff --git a/packages/atlas/src/components/_ypp/YppSuspendedModal/index.ts b/packages/atlas/src/components/_ypp/YppSuspendedModal/index.ts
@@ -0,0 +1 @@
+export * from './YppSuspendedModal'
diff --git a/packages/atlas/src/config/configSchema.ts b/packages/atlas/src/config/configSchema.ts
@@ -37,7 +37,7 @@ export const configSchema = z.object({
   }),
   features: z.object({
     ypp: z.object({
-      enabled: z.boolean(),
+      suspended: z.boolean(),
       suspensionReasonsLink: z.string().nullable(),
       yppDelayThreshold: z.number().nullable(),
       googleConsoleClientId: z.string().nullable(),

diff --git a/packages/atlas/src/views/global/ReferralsView/ReferralsView.tsx b/packages/atlas/src/views/global/ReferralsView/ReferralsView.tsx
@@ -1,5 +1,9 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router'
 
+import { YppSuspendedModal } from '@/components/_ypp/YppSuspendedModal'
+import { atlasConfig } from '@/config'
+import { absoluteRoutes } from '@/config/routes'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { usePersonalDataStore } from '@/providers/personalData'
 import { StyledLimitedWidthWrapper } from '@/views/global/ReferralsView/ReferralsView.styles'
@@ -10,6 +14,7 @@ import { ReferralsVideo } from '@/views/global/ReferralsView/sections/ReferralsV
 import { TopReferrals } from '@/views/global/ReferralsView/sections/TopReferrals/TopReferrals'
 
 export const ReferralsView = () => {
+  const [showYppSuspendedModal, setShowYppSuspendedModal] = useState(true)
   const updateDismissedMessages = usePersonalDataStore((state) => state.actions.updateDismissedMessages)
   useEffect(() => {
     updateDismissedMessages('referrals-banner')
@@ -18,13 +23,24 @@ export const ReferralsView = () => {
   const mdMatch = useMediaMatch('md')
   const xsMatch = useMediaMatch('xs')
 
+  const navigate = useNavigate()
+
   return (
     <StyledLimitedWidthWrapper
       flow="column"
       justifyContent="center"
       alignItems="center"
       gap={mdMatch ? 24 : xsMatch ? 16 : 14}
     >
+      {atlasConfig.features.ypp.suspended && (
+        <YppSuspendedModal
+          show={showYppSuspendedModal}
+          onClose={() => {
+            setShowYppSuspendedModal(false)
+            navigate(absoluteRoutes.viewer.index())
+          }}
+        />
+      )}
       <ReferralsVideo />
       <ReferralTiers />
       {/*<ReferralLayers />*/}

diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx b/packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx
@@ -5,8 +5,9 @@ import { useNavigate } from 'react-router-dom'
 import { ParallaxProvider } from 'react-scroll-parallax'
 
 import { YppReferralBanner } from '@/components/_ypp/YppReferralBanner'
+import { YppSuspendedModal } from '@/components/_ypp/YppSuspendedModal'
 import { atlasConfig } from '@/config'
-import { QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
+import { absoluteRoutes } from '@/config/routes'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useUser } from '@/providers/user/user.hooks'
@@ -23,13 +24,7 @@ import { YppRewardSection } from './sections/YppRewardSection'
 import { YppSignupVideo } from './sections/YppSignupVideo'
 import { useGetYppSyncedChannels } from './useGetYppSyncedChannels'
 
-import { YppDisabledModal } from '../../../components/_ypp/YppDisabledModal'
-import { useRouterQuery } from '../../../hooks/useRouterQuery'
-
 export const YppLandingView: FC = () => {
-  const yppEnabled = atlasConfig.features.ypp.enabled
-  const queryReferrerId = useRouterQuery(QUERY_PARAMS.REFERRER_ID)
-  const [showYppDisabledModal, setShowYppDisabledModal] = useState(!!queryReferrerId)
   const headTags = useHeadTags('YouTube Partner Program')
   const yppModalOpenName = useYppStore((state) => state.yppModalOpenName)
   const setYppModalOpen = useYppStore((state) => state.actions.setYppModalOpenName)
@@ -41,6 +36,7 @@ export const YppLandingView: FC = () => {
   const viewerEarningsRef = useRef<HTMLDivElement | null>(null)
 
   const [wasSignInTriggered, setWasSignInTriggered] = useState(false)
+  const [showYppSuspendedModal, setShowYppSuspendedModal] = useState(true)
   const shouldContinueYppFlowAfterCreatingChannel = useYppStore(
     (store) => store.shouldContinueYppFlowAfterCreatingChannel
   )
@@ -112,22 +108,23 @@ export const YppLandingView: FC = () => {
     return 'have-channel'
   }
 
+  const yppSuspended = atlasConfig.features.ypp.suspended
+
   return (
     <Wrapper>
       {headTags}
-      <YppAuthorizationModal unSyncedChannels={unsyncedChannels} />
+      {!yppSuspended && <YppAuthorizationModal unSyncedChannels={unsyncedChannels} />}
       <ParallaxProvider>
-        {yppEnabled ? (
-          <YppReferralBanner />
-        ) : (
-          <YppDisabledModal
-            show={showYppDisabledModal}
+        {yppSuspended && (
+          <YppSuspendedModal
+            show={showYppSuspendedModal}
             onClose={() => {
-              navigate(absoluteRoutes.viewer.ypp())
-              setShowYppDisabledModal(false)
+              setShowYppSuspendedModal(false)
+              navigate(absoluteRoutes.viewer.index())
             }}
           />
         )}
+        {!yppSuspended && <YppReferralBanner />}
         <YppHero
           onSelectChannel={() => setYppModalOpen('ypp-select-channel')}
           onSignUpClick={handleYppSignUpClick}
@@ -137,12 +134,8 @@ export const YppLandingView: FC = () => {
           onViewerEarnings={handleViewerEarnings}
         />
         <CreatorOpportunities onSignUpClick={handleYppSignUpClick} />
-        {yppEnabled ? (
-          <>
-            <YppRewardSection />
-            <YppSignupVideo />
-          </>
-        ) : null}
+        <YppRewardSection />
+        <YppSignupVideo />
         <ViewerOpportunities sectionRef={viewerEarningsRef} />
         <JoystreamRoadmap />
         {/*<YppCardsSections />*/}