💇 Remove YPP requirements (Joystream#5008)

* Adjust logic layer

* Adjust UI layer

Author: WRadoslaw

packages/atlas/src/hooks/useSegmentAnalytics.ts

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from 'react'
 
 import { useSegmentAnalyticsContext } from '@/providers/segmentAnalytics/useSegmentAnalyticsContext'
-import { YppRequirementsErrorCode } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types'
 
 export type videoPlaybackParams = {
   videoId: string
@@ -350,17 +349,6 @@ export const useSegmentAnalytics = () => {
     [analytics]
   )
 
-  const trackYppReqsNotMet = useCallback(
-    (
-      errors: YppRequirementsErrorCode[],
-      utmSource: string | null | undefined,
-      utmCampaign: string | null | undefined
-    ) => {
-      analytics.track('YPP Sign Up Failed - Reqs Not Met', { errors, utmSource, utmCampaign })
-    },
-    [analytics]
-  )
-
   const trackLogout = useCallback(() => {
     analytics.reset()
   }, [analytics])
@@ -432,7 +420,6 @@ export const useSegmentAnalytics = () => {
     trackVideoUpload,
     trackWithdrawnFunds,
     trackYppOptIn,
-    trackYppReqsNotMet,
     trackYppSignInButtonClick,
   }
 }

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

@@ -146,7 +146,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     trackPageView,
     trackYppOptIn,
     identifyUser,
-    trackYppReqsNotMet,
     trackClickAuthModalSignUpButton,
     trackClickAuthModalSignInButton,
   } = useSegmentAnalytics()
@@ -155,10 +154,9 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
 
   const { displaySnackbar } = useSnackbar()
 
-  const { handleAuthorizeClick, ytRequirementsErrors, setYtRequirementsErrors, alreadyRegisteredChannel } =
-    useYppGoogleAuth({
-      channelsLoaded,
-    })
+  const { handleAuthorizeClick, alreadyRegisteredChannel } = useYppGoogleAuth({
+    channelsLoaded,
+  })
 
   useEffect(() => {
     if (searchParams.get('utm_source')) {
@@ -175,18 +173,11 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
   }, [trackPageView, yppModalOpenName])
 
   const handleClose = useCallback(() => {
-    setYtRequirementsErrors([])
     setReferrerId(null)
     setYppModalOpenName(null)
     setSelectedChannelId(null)
     setShouldContinueYppFlowAfterLogin(false)
-  }, [
-    setYppModalOpenName,
-    setReferrerId,
-    setSelectedChannelId,
-    setShouldContinueYppFlowAfterLogin,
-    setYtRequirementsErrors,
-  ])
+  }, [setYppModalOpenName, setReferrerId, setSelectedChannelId, setShouldContinueYppFlowAfterLogin])
 
   const handleGoBack = useCallback(() => {
     if (yppModalOpenName === 'ypp-sync-options') {
@@ -199,10 +190,9 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
 
   const handleSelectChannel = useCallback(
     (selectedChannelId: string) => {
-      setYtRequirementsErrors([])
       setSelectedChannelId(selectedChannelId)
     },
-    [setSelectedChannelId, setYtRequirementsErrors]
+    [setSelectedChannelId]
   )
 
   const createOrUpdateChannel = useCreateEditChannelSubmit()
@@ -350,13 +340,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     }
   }, [channel, detailsFormMethods, referrerId])
 
-  useEffect(() => {
-    if (ytRequirementsErrors?.length) {
-      trackPageView('YPP Reqs Not Met')
-      trackYppReqsNotMet(ytRequirementsErrors, utmSource, utmCampaign)
-    }
-  }, [trackPageView, trackYppReqsNotMet, utmCampaign, utmSource, ytRequirementsErrors])
-
   const selectedChannel = useMemo(() => {
     if (!unSyncedChannels || !selectedChannelId) {
       return null
@@ -380,13 +363,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
             setSelectedChannelId(yppUnsyncedChannels[0].id)
           }
 
-          if (ytRequirementsErrors.length) {
-            return {
-              text: 'Close',
-              onClick: handleClose,
-            }
-          }
-
           if (yppUnsyncedChannels && yppUnsyncedChannels.length > 1) {
             return {
               text: 'Select channel',
@@ -406,13 +382,11 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
         }
 
         return {
-          headerIcon: ytRequirementsErrors.length ? <SvgAlertsError32 /> : undefined,
-          title: ytRequirementsErrors.length ? 'Authorization failed' : 'Requirements',
-          description: ytRequirementsErrors.length
-            ? 'Looks like the YouTube channel you selected does not meet all conditions to be enrolled in the program. You can select another one or try again at a later time.'
-            : 'Before you can apply to the program, make sure your YouTube channel meets the below conditions.',
+          title: 'Requirements',
+          description:
+            'Before you can apply to the program, make sure your YouTube channel meets the below conditions.',
           primaryButton: getPrimaryButton(),
-          component: <YppAuthorizationRequirementsStep requirmentsErrorCodes={ytRequirementsErrors} />,
+          component: <YppAuthorizationRequirementsStep />,
         }
       }
 
@@ -492,13 +466,11 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     handleSelectChannel,
     alreadyRegisteredChannel?.channelTitle,
     alreadyRegisteredChannel?.ownerMemberHandle,
-    ytRequirementsErrors,
     isLoading,
     yppCurrentChannel,
     yppUnsyncedChannels,
     navigate,
     setSelectedChannelId,
-    handleClose,
     setYppModalOpenName,
     trackClickAuthModalSignUpButton,
     utmSource,
@@ -510,7 +482,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
   const isLoadingModal = yppModalOpenName === 'ypp-fetching-data' || yppModalOpenName === 'ypp-speaking-to-backend'
 
   const secondaryButton: DialogButtonProps | undefined = useMemo(() => {
-    if (isLoadingModal || ytRequirementsErrors.length) return
+    if (isLoadingModal) return
 
     if (yppModalOpenName === 'ypp-requirements' && isLoggedIn) return
 
@@ -543,7 +515,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     }
   }, [
     isLoadingModal,
-    ytRequirementsErrors.length,
     yppModalOpenName,
     isLoggedIn,
     isSubmitting,
@@ -567,8 +538,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
         primaryButton={authorizationStep?.primaryButton}
         secondaryButton={secondaryButton}
         additionalActionsNode={
-          !isLoadingModal &&
-          !ytRequirementsErrors.length && (
+          !isLoadingModal && (
             <Button variant="tertiary" disabled={isSubmitting} onClick={handleClose}>
               Cancel
             </Button>

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx

@@ -1,83 +1,23 @@
-import { formatDuration } from 'date-fns'
 import { FC, PropsWithChildren } from 'react'
 
 import { SvgActionCheck, SvgActionClose } from '@/assets/icons'
 import { Banner } from '@/components/Banner'
-import { Text } from '@/components/Text'
 import { atlasConfig } from '@/config'
-import { pluralizeNoun } from '@/utils/misc'
 
 import { ListItem, Paragraph, StyledList, TickWrapper } from './YppAuthorizationRequirementsStep.styles'
-import { useGetYppChannelRequirements } from './useGetYppChannelRequirements'
 
-import { YppAuthorizationErrorCode, YppRequirementsErrorCode } from '../../YppAuthorizationModal.types'
-
-type YppAuthorizationRequirementsStepProps = {
-  requirmentsErrorCodes: YppRequirementsErrorCode[]
-}
-
-const convertHoursRequirementTime = (hours: number) => {
-  if (hours > 24 * 30) {
-    return formatDuration({ months: Math.round(hours / (24 * 30)) })
-  }
-  if (hours > 24) {
-    return formatDuration({ days: Math.round(hours / 24) })
-  }
-  return formatDuration({ hours: hours })
-}
-
-export const YppAuthorizationRequirementsStep: FC<YppAuthorizationRequirementsStepProps> = ({
-  requirmentsErrorCodes,
-}) => {
-  const requirements = useGetYppChannelRequirements()
-  const checkRequirmentError = (errorCode: YppAuthorizationErrorCode) =>
-    !requirmentsErrorCodes.some((error) => error === errorCode)
-  const hasAtLeastOneError = !!requirmentsErrorCodes.length
+export const YppAuthorizationRequirementsStep: FC = () => {
   return (
     <>
       <StyledList>
-        <SingleRequirement fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_STATUS_SUSPENDED)}>
-          Original content, without reposts from other creators.
-        </SingleRequirement>
-        <SingleRequirement fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_STATUS_SUSPENDED)}>
+        <SingleRequirement fulfilled>Original content, without reposts from other creators.</SingleRequirement>
+        <SingleRequirement fulfilled>
           Organic audience, without bots, purchased subscribers and fake comments.
         </SingleRequirement>
-        <SingleRequirement
-          fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_CREATION_DATE)}
-        >
-          Channel must be older than {convertHoursRequirementTime(requirements?.MINIMUM_CHANNEL_AGE_HOURS || 0)}.
-        </SingleRequirement>
-        <SingleRequirement
-          fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_SUBSCRIBERS)}
-        >
-          Has at least{' '}
-          <Text variant="t200" as="span" color="colorTextCaution">
-            {pluralizeNoun(requirements?.MINIMUM_SUBSCRIBERS_COUNT ?? 0, 'subscriber', true)}
-          </Text>
-          .
-        </SingleRequirement>
-        <SingleRequirement fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_VIDEOS)}>
-          Has at least{' '}
-          <Text variant="t200" as="span" color="colorTextCaution">
-            {pluralizeNoun(requirements?.MINIMUM_TOTAL_VIDEOS_COUNT ?? 0, 'video', true)}
-          </Text>
-          , all of which are older than {convertHoursRequirementTime(requirements?.MINIMUM_VIDEO_AGE_HOURS || 0)}.
-        </SingleRequirement>
-        <SingleRequirement
-          fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_NEW_VIDEOS_REQUIREMENT)}
-        >
-          Has at least{' '}
-          <Text variant="t200" as="span" color="colorTextCaution">
-            {pluralizeNoun(requirements?.MINIMUM_VIDEOS_PER_MONTH ?? 0, 'video', true)} per month
-          </Text>{' '}
-          posted over the last {pluralizeNoun(requirements?.MONTHS_TO_CONSIDER ?? 0, 'month', true)}.
-        </SingleRequirement>
-      </StyledList>
-      {!hasAtLeastOneError && (
         <Banner
           description={`${atlasConfig.general.appName} uses Google OAuth to get access to your public profile and account email address as part of sign up flow, and integrates with YouTube API to obtain details about your YouTube channel data, such as followers and video statistics.`}
         />
-      )}
+      </StyledList>
     </>
   )
 }

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/useGetYppChannelRequirements.ts

@@ -1,5 +1,4 @@
 import { useApolloClient } from '@apollo/client'
-import { isArray } from 'lodash-es'
 import { useCallback, useEffect, useState } from 'react'
 import { useMutation } from 'react-query'
 import { useSearchParams } from 'react-router-dom'
@@ -26,7 +25,6 @@ import {
   ChannelVerificationErrorResponse,
   ChannelVerificationSuccessResponse,
   YppAuthorizationErrorCode,
-  YppRequirementsErrorCode,
 } from './YppAuthorizationModal.types'
 
 const GOOGLE_CONSOLE_CLIENT_ID = atlasConfig.features.ypp.googleConsoleClientId
@@ -54,8 +52,6 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
   const { isLoggedIn, isAuthenticating } = useAuth()
 
   const { setYtStateParam: setYppAuthState, setSelectedChannelId } = useYppStore((state) => state.actions)
-  const [ytRequirementsErrors, setYtRequirementsErrors] = useState<YppRequirementsErrorCode[]>([])
-
   const [alreadyRegisteredChannel, setAlreadyRegisteredChannel] = useState<AlreadyRegisteredChannel | null>(null)
   const { mutateAsync: authMutation } = useMutation('ypp-auth-post', (authorizationCode: string) =>
     axiosInstance.post<ChannelVerificationSuccessResponse>(`${atlasConfig.features.ypp.youtubeSyncApiUrl}/users`, {
@@ -195,15 +191,6 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
             return
           }
 
-          const isRequirementsError = isArray(errorMessages)
-          if (isRequirementsError) {
-            const errorCodes = isRequirementsError ? errorMessages?.map((message) => message.code) : undefined
-
-            errorCodes && setYtRequirementsErrors(errorCodes)
-            setYppModalOpenName('ypp-requirements')
-            return
-          }
-
           if (errorResponseData && 'code' in errorResponseData) {
             switch (errorResponseData.code) {
               case YppAuthorizationErrorCode.YOUTUBE_QUOTA_LIMIT_EXCEEDED:
@@ -221,11 +208,6 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
                   description: `You don't have a YouTube channel.`,
                   iconType: 'error',
                 })
-                setYtRequirementsErrors([
-                  YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_CREATION_DATE,
-                  YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_VIDEOS,
-                  YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_SUBSCRIBERS,
-                ])
                 setYppModalOpenName('ypp-requirements')
                 return
               case YppAuthorizationErrorCode.CHANNEL_ALREADY_REGISTERED: {
@@ -311,8 +293,6 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
 
   return {
     handleAuthorizeClick,
-    setYtRequirementsErrors,
-    ytRequirementsErrors,
     alreadyRegisteredChannel,
   }
 }