YPP disabled: Landing page

packages/atlas/atlas.config.yml

@@ -38,6 +38,7 @@ joystream:
 
 features:
   ypp:
+    enabled: false # Whether the YPP is currently enabled
     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

packages/atlas/src/components/_ypp/YppDisabledModal/YppDisabledModal.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react'
+
+import { Text } from '@/components/Text'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+
+export type ConnectWithYtModalProps = {
+  show: boolean
+  onClose: () => void
+}
+
+export const YppDisabledModal: FC<ConnectWithYtModalProps> = ({ show, onClose }) => {
+  // const smMatch = useMediaMatch('sm')
+  return (
+    <DialogModal
+      size="medium"
+      show={show}
+      dividers
+      primaryButton={{
+        text: 'Continue',
+        onClick: onClose,
+      }}
+    >
+      <Text variant="h400" as="h2" margin={{ bottom: 4 }}>
+        YouTube Partner Program temporarily disabled
+      </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.
+      </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
+        be eligable for any YPP rewards.
+      </Text>
+      <Text variant="t200" as="p" color="colorText">
+        We apologize for any inconvenience.
+      </Text>
+    </DialogModal>
+  )
+}

packages/atlas/src/components/_ypp/YppDisabledModal/index.ts

@@ -0,0 +1 @@
+export * from './YppDisabledModal'

packages/atlas/src/config/configSchema.ts

@@ -37,6 +37,7 @@ export const configSchema = z.object({
   }),
   features: z.object({
     ypp: z.object({
+      enabled: z.boolean(),
       suspensionReasonsLink: z.string().nullable(),
       yppDelayThreshold: z.number().nullable(),
       googleConsoleClientId: z.string().nullable(),

packages/atlas/src/views/global/YppLandingView/YppLandingView.tsx

@@ -5,7 +5,8 @@ import { useNavigate } from 'react-router-dom'
 import { ParallaxProvider } from 'react-scroll-parallax'
 
 import { YppReferralBanner } from '@/components/_ypp/YppReferralBanner'
-import { absoluteRoutes } from '@/config/routes'
+import { atlasConfig } from '@/config'
+import { QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useUser } from '@/providers/user/user.hooks'
@@ -22,7 +23,13 @@ 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)
@@ -110,7 +117,17 @@ export const YppLandingView: FC = () => {
       {headTags}
       <YppAuthorizationModal unSyncedChannels={unsyncedChannels} />
       <ParallaxProvider>
-        <YppReferralBanner />
+        {yppEnabled ? (
+          <YppReferralBanner />
+        ) : (
+          <YppDisabledModal
+            show={showYppDisabledModal}
+            onClose={() => {
+              navigate(absoluteRoutes.viewer.ypp())
+              setShowYppDisabledModal(false)
+            }}
+          />
+        )}
         <YppHero
           onSelectChannel={() => setYppModalOpen('ypp-select-channel')}
           onSignUpClick={handleYppSignUpClick}
@@ -120,8 +137,12 @@ export const YppLandingView: FC = () => {
           onViewerEarnings={handleViewerEarnings}
         />
         <CreatorOpportunities onSignUpClick={handleYppSignUpClick} />
-        <YppRewardSection />
-        <YppSignupVideo />
+        {yppEnabled ? (
+          <>
+            <YppRewardSection />
+            <YppSignupVideo />
+          </>
+        ) : null}
         <ViewerOpportunities sectionRef={viewerEarningsRef} />
         <JoystreamRoadmap />
         {/*<YppCardsSections />*/}

packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx

@@ -24,12 +24,16 @@ import {
 } from '@/views/global/YppLandingView/YppLandingView.styles'
 import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
 
-const earningsOptions = [
-  {
-    title: 'YouTubers',
-    subtitle: 'Get sign up bonus and sync rewards with connecting YouTube channel.',
-    image: earning_yt,
-  },
+const earningsOptions = (yppEnabled: boolean) => [
+  ...(yppEnabled
+    ? [
+        {
+          title: 'YouTubers',
+          subtitle: 'Get sign up bonus and sync rewards with connecting YouTube channel.',
+          image: earning_yt,
+        },
+      ]
+    : []),
   {
     title: 'Creator Tokens',
     subtitle: `Mint your own token and sell it on open market to raise funding for your ${atlasConfig.general.appName} channel.`,
@@ -40,14 +44,19 @@ const earningsOptions = [
     subtitle: 'Mint your NFTs and earn from selling on marketplace and royalties with every future transaction.',
     image: earning_nfts,
   },
-  {
-    title: 'More earning',
-    subtitle: 'Earn with building out community and social promotions.',
-    image: earning_more,
-  },
+  ...(yppEnabled
+    ? [
+        {
+          title: 'More earning',
+          subtitle: 'Earn with building out community and social promotions.',
+          image: earning_more,
+        },
+      ]
+    : []),
 ]
 
 export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => void }) => {
+  const yppEnabled = atlasConfig.features.ypp.enabled
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
   const setAuthModalOpenName = useAuthStore((state) => state.actions.setAuthModalOpenName)
   const { trackRewardsCreateChannelButtonClick } = useSegmentAnalytics()
@@ -91,7 +100,7 @@ export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => v
             </Text>
           </HeaderGridItem>
           <EarningsBox colSpan={{ base: 12, xs: 10 }} colStart={{ base: 1, xs: 2 }}>
-            {earningsOptions.map(({ title, subtitle, image }, idx) => (
+            {earningsOptions(yppEnabled).map(({ title, subtitle, image }, idx) => (
               <FlexBox key={idx} gap={2} flow="column">
                 <ImageBox>
                   <Image alt={`${title} image`} src={image} width="610px" height="420px" />
@@ -116,9 +125,11 @@ export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => v
             colStart={{ base: 1 }}
           >
             <FlexBox width="100%" flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center" gap={4}>
-              <Button onClick={onSignUpClick} fullWidth={!xsMatch} size="large">
-                Sync from YouTube
-              </Button>
+              {yppEnabled ? (
+                <Button onClick={onSignUpClick} fullWidth={!xsMatch} size="large">
+                  Sync from YouTube
+                </Button>
+              ) : null}
               {!memberChannels?.length ? (
                 <Button
                   onClick={() => {
@@ -128,7 +139,7 @@ export const CreatorOpportunities = ({ onSignUpClick }: { onSignUpClick: () => v
                   }}
                   fullWidth={!xsMatch}
                   size="large"
-                  variant="secondary"
+                  variant={yppEnabled ? 'secondary' : 'primary'}
                 >
                   Create New Channel
                 </Button>

packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx

@@ -21,12 +21,16 @@ import {
 } from '@/views/global/YppLandingView/YppLandingView.styles'
 import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants'
 
-const viewerEarningsOptions = [
-  {
-    title: 'Earn with Referrals',
-    subtitle: 'Refer YouTube channels and earn when they sign up using your link.',
-    image: viewer_earnings_referrals,
-  },
+const viewerEarningsOptions = (yppEnabled: boolean) => [
+  ...(yppEnabled
+    ? [
+        {
+          title: 'Earn with Referrals',
+          subtitle: 'Refer YouTube channels and earn when they sign up using your link.',
+          image: viewer_earnings_referrals,
+        },
+      ]
+    : []),
   {
     title: 'Claim Channels Revenue Share',
     subtitle: `Buy creator tokens and claim part of channel's revenue.`,
@@ -49,6 +53,7 @@ const viewerEarningsOptions = [
 ]
 
 export const ViewerOpportunities = ({ sectionRef }: { sectionRef: MutableRefObject<HTMLDivElement | null> }) => {
+  const yppEnabled = atlasConfig.features.ypp.enabled
   const mdMatch = useMediaMatch('md')
   const smMatch = useMediaMatch('sm')
   const [titleVariant, subtitleVariant] = useSectionTextVariants()
@@ -87,7 +92,7 @@ export const ViewerOpportunities = ({ sectionRef }: { sectionRef: MutableRefObje
             </Text>
           </HeaderGridItem>
           <EarningsBox colSpan={{ base: 12, xs: 10 }} colStart={{ base: 1, xs: 2 }}>
-            {viewerEarningsOptions.map(({ title, subtitle, image }, idx) => (
+            {viewerEarningsOptions(yppEnabled).map(({ title, subtitle, image }, idx) => (
               <FlexBox key={idx} gap={2} flow="column">
                 <ImageBox>
                   <Image alt={`${title} image`} src={image} width="529px" height="360" />

packages/atlas/src/views/global/YppLandingView/sections/YppFooter.tsx

@@ -30,6 +30,7 @@ type YppFooterSectionProps = {
 }
 
 export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
+  const yppEnabled = atlasConfig.features.ypp.enabled
   const [titleVariant] = useSectionTextVariants()
   const smMatch = useMediaMatch('sm')
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
@@ -52,7 +53,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
                 Get started now
               </Text>
               <Text variant={titleVariant} as="h2" color="colorCoreBaseWhite" margin={{ top: 1 }}>
-                Pave the way to Web3 with your YouTube channel right away.
+                Pave the way to Web3 with your {yppEnabled ? 'YouTube ' : ''}channel right away.
               </Text>
 
               <FlexBox
@@ -63,9 +64,11 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
                 gap={4}
                 marginTop={8}
               >
-                <Button onClick={onSignUpClick} fullWidth={!smMatch} size="large">
-                  Sync from YouTube
-                </Button>
+                {yppEnabled ? (
+                  <Button onClick={onSignUpClick} fullWidth={!smMatch} size="large">
+                    Sync from YouTube
+                  </Button>
+                ) : null}
                 {!memberChannels?.length ? (
                   <Button
                     onClick={() => {
@@ -75,7 +78,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
                     }}
                     fullWidth={!smMatch}
                     size="large"
-                    variant="secondary"
+                    variant={yppEnabled ? 'secondary' : 'primary'}
                   >
                     Create New Channel
                   </Button>

packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx

@@ -73,6 +73,7 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
     ? channels?.map((channel) => <PaidChannelCard key={channel.id} channel={channel} />)
     : Array.from({ length: 30 }).map((_, idx) => <PaidChannelCard key={idx} loading />)
   const widgetContentTextVariant = mdMatch ? ('h700' as const) : ('h600' as const)
+  const yppEnabled = atlasConfig.features.ypp.enabled
 
   return (
     <HeroBackgroundContainer noBackground>
@@ -140,14 +141,16 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
                       </Button>
                     ) : (
                       <FlexBox gap={4} flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center">
-                        <Button
-                          onClick={onSignUpClick}
-                          fullWidth={!xsMatch}
-                          size={xxsMatch && !xsMatch ? 'large' : smMatch ? 'large' : 'medium'}
-                          id="rewards-sync-button"
-                        >
-                          Sync from YouTube
-                        </Button>
+                        {yppEnabled ? (
+                          <Button
+                            onClick={onSignUpClick}
+                            fullWidth={!xsMatch}
+                            size={xxsMatch && !xsMatch ? 'large' : smMatch ? 'large' : 'medium'}
+                            id="rewards-sync-button"
+                          >
+                            Sync from YouTube
+                          </Button>
+                        ) : null}
                         {!memberChannels?.length ? (
                           <Button
                             onClick={() => {
@@ -157,7 +160,7 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
                             }}
                             fullWidth={!xsMatch}
                             size={xxsMatch && !xsMatch ? 'large' : smMatch ? 'large' : 'medium'}
-                            variant="secondary"
+                            variant={yppEnabled ? 'secondary' : 'primary'}
                             id="rewards-new-channel-button"
                           >
                             Create New Channel
@@ -270,17 +273,19 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
           </GridItem>
         </LayoutGrid>
 
-        <ImagesContainer width="100%" justifyContent="center">
-          <FrontImage src={crt_dashboard} alt="Hero back" width="1152" height="824" />
-          {xsMatch && (
-            <>
-              <RightImage src={crt_card} alt="Hero back" width="1152" height="824" />
-              <LeftImage src={payments} alt="Hero back" width="1152" height="824" />
-            </>
-          )}
-        </ImagesContainer>
+        {yppEnabled ? (
+          <ImagesContainer width="100%" justifyContent="center">
+            <FrontImage src={crt_dashboard} alt="Hero back" width="1152" height="824" />
+            {xsMatch && (
+              <>
+                <RightImage src={crt_card} alt="Hero back" width="1152" height="824" />
+                <LeftImage src={payments} alt="Hero back" width="1152" height="824" />
+              </>
+            )}
+          </ImagesContainer>
+        ) : null}
       </StyledLimitedWidthContainerHero>
-      {items && items.length >= 7 && (
+      {yppEnabled && items && items.length >= 7 && (
         <StyledInfiniteCarousel
           headerGridItemProps={{ colStart: { base: 1, lg: 2 }, colSpan: { base: 12, lg: 10 } }}
           carouselHorizonthalOffset={-32}