⛑️ YPP requirements rework (#5136)

* Revert "💇 Remove YPP requirements (#5008)"

This reverts commit 3a26a46.

* Rework hook

* Update modal step

* Linter

* Add templating for requirements

Author: WRadoslaw

packages/atlas/src/hooks/useSegmentAnalytics.ts

@@ -1,6 +1,7 @@
 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
@@ -349,6 +350,17 @@ 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])
@@ -420,6 +432,7 @@ export const useSegmentAnalytics = () => {
     trackVideoUpload,
     trackWithdrawnFunds,
     trackYppOptIn,
+    trackYppReqsNotMet,
     trackYppSignInButtonClick,
   }
 }

packages/atlas/src/utils/misc.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { formatNumber } from '@/utils/number'
 
 export class TimeoutError<T> extends Error {
@@ -91,3 +93,19 @@ export function convertUpperCamelToSentence(input?: string) {
     })
     .join(' ')
 }
+
+export function replaceTemplateWithRenderer(
+  template: string,
+  variables: string[],
+  render: (variable: string) => ReactNode
+) {
+  const splitArray = template.split('{}')
+  const result: ReactNode[] = []
+  splitArray.forEach((part, idx) => {
+    result.push(part)
+    if (variables[idx]) {
+      result.push(render(variables[idx]))
+    }
+  })
+  return result
+}

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

@@ -146,6 +146,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     trackPageView,
     trackYppOptIn,
     identifyUser,
+    trackYppReqsNotMet,
     trackClickAuthModalSignUpButton,
     trackClickAuthModalSignInButton,
   } = useSegmentAnalytics()
@@ -154,9 +155,10 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
 
   const { displaySnackbar } = useSnackbar()
 
-  const { handleAuthorizeClick, alreadyRegisteredChannel } = useYppGoogleAuth({
-    channelsLoaded,
-  })
+  const { handleAuthorizeClick, ytRequirementsErrors, setYtRequirementsErrors, alreadyRegisteredChannel } =
+    useYppGoogleAuth({
+      channelsLoaded,
+    })
 
   useEffect(() => {
     if (searchParams.get('utm_source')) {
@@ -173,11 +175,18 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
   }, [trackPageView, yppModalOpenName])
 
   const handleClose = useCallback(() => {
+    setYtRequirementsErrors([])
     setReferrerId(null)
     setYppModalOpenName(null)
     setSelectedChannelId(null)
     setShouldContinueYppFlowAfterLogin(false)
-  }, [setYppModalOpenName, setReferrerId, setSelectedChannelId, setShouldContinueYppFlowAfterLogin])
+  }, [
+    setYppModalOpenName,
+    setReferrerId,
+    setSelectedChannelId,
+    setShouldContinueYppFlowAfterLogin,
+    setYtRequirementsErrors,
+  ])
 
   const handleGoBack = useCallback(() => {
     if (yppModalOpenName === 'ypp-sync-options') {
@@ -190,9 +199,10 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
 
   const handleSelectChannel = useCallback(
     (selectedChannelId: string) => {
+      setYtRequirementsErrors([])
       setSelectedChannelId(selectedChannelId)
     },
-    [setSelectedChannelId]
+    [setSelectedChannelId, setYtRequirementsErrors]
   )
 
   const createOrUpdateChannel = useCreateEditChannelSubmit()
@@ -340,6 +350,13 @@ 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
@@ -364,6 +381,13 @@ 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',
@@ -383,11 +407,13 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
         }
 
         return {
-          title: 'Requirements',
-          description:
-            'Before you can apply to the program, make sure your YouTube channel meets the below conditions.',
+          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.',
           primaryButton: getPrimaryButton(),
-          component: <YppAuthorizationRequirementsStep />,
+          component: <YppAuthorizationRequirementsStep requirmentsErrorCodes={ytRequirementsErrors} />,
         }
       }
 
@@ -467,6 +493,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     handleSelectChannel,
     alreadyRegisteredChannel?.channelTitle,
     alreadyRegisteredChannel?.ownerMemberHandle,
+    ytRequirementsErrors,
     isLoading,
     yppCurrentChannel,
     yppUnsyncedChannels,
@@ -484,7 +511,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) return
+    if (isLoadingModal || ytRequirementsErrors.length) return
 
     if (yppModalOpenName === 'ypp-requirements' && isLoggedIn) return
 
@@ -517,6 +544,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
     }
   }, [
     isLoadingModal,
+    ytRequirementsErrors.length,
     yppModalOpenName,
     isLoggedIn,
     isSubmitting,
@@ -540,7 +568,8 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({ unSynced
         primaryButton={authorizationStep?.primaryButton}
         secondaryButton={secondaryButton}
         additionalActionsNode={
-          !isLoadingModal && (
+          !isLoadingModal &&
+          !ytRequirementsErrors.length && (
             <Button variant="tertiary" disabled={isSubmitting} onClick={handleClose}>
               Cancel
             </Button>

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types.ts

@@ -36,16 +36,13 @@ export type ChannelVerificationSuccessResponse = {
 }
 
 export type ChannelRequirements = {
-  MINIMUM_SUBSCRIBERS_COUNT: number
-  MINIMUM_TOTAL_VIDEOS_COUNT: number
-  MINIMUM_VIDEO_AGE_HOURS: number
-  MINIMUM_CHANNEL_AGE_HOURS: number
-  MINIMUM_VIDEOS_PER_MONTH: number
-  MONTHS_TO_CONSIDER: number
+  requirements: {
+    errorCode: YppRequirementsErrorCode
+    template: string
+    variables: string[]
+  }[]
 }
 
-export type Requirements = Record<keyof ChannelRequirements, number | undefined>
-
 type ChannelRequirementsFailedError = {
   code: YppRequirementsErrorCode
   message: string

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

@@ -2,22 +2,65 @@ import { FC, PropsWithChildren } from 'react'
 
 import { SvgActionCheck, SvgActionClose } from '@/assets/icons'
 import { Banner } from '@/components/Banner'
+import { FlexBox } from '@/components/FlexBox'
+import { Text } from '@/components/Text'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { atlasConfig } from '@/config'
+import { replaceTemplateWithRenderer } from '@/utils/misc'
 
 import { ListItem, Paragraph, StyledList, TickWrapper } from './YppAuthorizationRequirementsStep.styles'
+import { useGetYppChannelRequirements } from './useGetYppChannelRequirements'
 
-export const YppAuthorizationRequirementsStep: FC = () => {
+import { YppAuthorizationErrorCode, YppRequirementsErrorCode } from '../../YppAuthorizationModal.types'
+
+type YppAuthorizationRequirementsStepProps = {
+  requirmentsErrorCodes: YppRequirementsErrorCode[]
+}
+
+export const YppAuthorizationRequirementsStep: FC<YppAuthorizationRequirementsStepProps> = ({
+  requirmentsErrorCodes,
+}) => {
+  const { requirements, isLoading } = useGetYppChannelRequirements()
+  const checkRequirmentError = (errorCode: YppAuthorizationErrorCode) =>
+    !requirmentsErrorCodes.some((error) => error === errorCode)
+  const hasAtLeastOneError = !!requirmentsErrorCodes.length
   return (
     <>
       <StyledList>
-        <SingleRequirement fulfilled>Original content, without reposts from other creators.</SingleRequirement>
-        <SingleRequirement fulfilled>
+        <SingleRequirement fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_STATUS_SUSPENDED)}>
+          Original content, without reposts from other creators.
+        </SingleRequirement>
+        <SingleRequirement fulfilled={checkRequirmentError(YppAuthorizationErrorCode.CHANNEL_STATUS_SUSPENDED)}>
           Organic audience, without bots, purchased subscribers and fake comments.
         </SingleRequirement>
+        {isLoading ? (
+          <>
+            <FlexBox alignItems="center" gap={2}>
+              <SkeletonLoader width={24} height={24} rounded />
+              <SkeletonLoader width={24 * 3} height={14} />
+            </FlexBox>
+            <FlexBox alignItems="center" gap={2}>
+              <SkeletonLoader width={24} height={24} rounded />
+              <SkeletonLoader width={24 * 3} height={14} />
+            </FlexBox>
+          </>
+        ) : requirements ? (
+          requirements.map((requirement, idx) => (
+            <SingleRequirement key={idx} fulfilled={checkRequirmentError(requirement.errorCode)}>
+              {replaceTemplateWithRenderer(requirement.template, requirement.variables, (variable) => (
+                <Text variant="t200" as="span" color="colorTextCaution">
+                  {variable}
+                </Text>
+              ))}
+            </SingleRequirement>
+          ))
+        ) : null}
+      </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

@@ -0,0 +1,21 @@
+import { useQuery } from 'react-query'
+
+import { axiosInstance } from '@/api/axios'
+import { atlasConfig } from '@/config'
+import { SentryLogger } from '@/utils/logs'
+
+import { ChannelRequirements } from '../../YppAuthorizationModal.types'
+
+export const useGetYppChannelRequirements = () => {
+  const { data, isLoading } = useQuery('ypp-requirements-fetch', () =>
+    axiosInstance
+      .get<ChannelRequirements>(`${atlasConfig.features.ypp.youtubeSyncApiUrl}/channels/induction/requirements`)
+      .then((res) => res.data)
+      .catch((error) => SentryLogger.error("Couldn't fetch requirements", 'YppAuthorizationModal.hooks', error))
+  )
+
+  return {
+    requirements: data?.requirements,
+    isLoading,
+  }
+}

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

@@ -1,4 +1,5 @@
 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'
@@ -25,6 +26,7 @@ import {
   ChannelVerificationErrorResponse,
   ChannelVerificationSuccessResponse,
   YppAuthorizationErrorCode,
+  YppRequirementsErrorCode,
 } from './YppAuthorizationModal.types'
 
 const GOOGLE_CONSOLE_CLIENT_ID = atlasConfig.features.ypp.googleConsoleClientId
@@ -51,6 +53,8 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
   const { isLoggedIn, isAuthenticating } = useAuth()
 
   const { 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`, {
@@ -194,6 +198,15 @@ 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:
@@ -211,6 +224,11 @@ 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: {
@@ -294,6 +312,8 @@ export const useYppGoogleAuth = ({ channelsLoaded }: { channelsLoaded: boolean }
 
   return {
     handleAuthorizeClick,
+    setYtRequirementsErrors,
+    ytRequirementsErrors,
     alreadyRegisteredChannel,
   }
 }