|
@@ -11,6 +11,7 @@ import { SvgAlertsError32 } from '@/assets/icons'
|
|
|
import appScreenshot from '@/assets/images/ypp-authorization/app-screenshot.webp'
|
|
|
import { Text } from '@/components/Text'
|
|
|
import { Button } from '@/components/_buttons/Button'
|
|
|
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
|
|
|
import { Loader } from '@/components/_loaders/Loader'
|
|
|
import { DialogModal } from '@/components/_overlays/DialogModal'
|
|
|
import { atlasConfig } from '@/config'
|
|
@@ -35,6 +36,7 @@ import {
|
|
|
DescriptionText,
|
|
|
HeaderIconsWrapper,
|
|
|
Img,
|
|
|
+ RequirementsButtonSkeleton,
|
|
|
StyledSvgAppLogoShort,
|
|
|
} from './YppAuthorizationModal.styles'
|
|
|
import { YppAuthorizationErrorCode, YppAuthorizationStepsType } from './YppAuthorizationModal.types'
|
|
@@ -75,12 +77,14 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
const navigate = useNavigate()
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
const { decrementOverlaysOpenCount } = useOverlayManager()
|
|
|
- const { refetchYppSyncedChannels } = useGetYppSyncedChannels()
|
|
|
+ const {
|
|
|
+ unsyncedChannels: yppUnsyncedChannels,
|
|
|
+ currentChannel: yppCurrentChannel,
|
|
|
+ isLoading,
|
|
|
+ } = useGetYppSyncedChannels()
|
|
|
const contentRef = useRef<HTMLDivElement | null>(null)
|
|
|
const channelsLoaded = !!unSyncedChannels
|
|
|
- const hasMoreThanOneChannel = unSyncedChannels && unSyncedChannels.length > 1
|
|
|
const [finalFormData, setFinalFormData] = useState<FinalFormData | null>(null)
|
|
|
- const [isFetchingData, setIsFetchingData] = useState(false)
|
|
|
const selectedChannelId = useYppStore((store) => store.selectedChannelId)
|
|
|
const referrerId = useYppStore((store) => store.referrerId)
|
|
|
const setSelectedChannelId = useYppStore((store) => store.actions.setSelectedChannelId)
|
|
@@ -148,13 +152,9 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
onChangeStep('ypp-sync')
|
|
|
}
|
|
|
if (currentStep === 'details' || currentStep === 'channel-already-registered') {
|
|
|
- onChangeStep('requirements')
|
|
|
- }
|
|
|
- if (currentStep === 'requirements' && hasMoreThanOneChannel) {
|
|
|
- setYtRequirementsErrors([])
|
|
|
onChangeStep('select-channel')
|
|
|
}
|
|
|
- }, [currentStep, hasMoreThanOneChannel, onChangeStep, setYtRequirementsErrors])
|
|
|
+ }, [currentStep, onChangeStep])
|
|
|
|
|
|
const handleSelectChannel = useCallback(
|
|
|
(selectedChannelId: string) => {
|
|
@@ -326,66 +326,59 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
[fetchedChannelRequirements, ytRequirementsErrors]
|
|
|
)
|
|
|
|
|
|
- const verifyChannelRequirements = useCallback(async () => {
|
|
|
- const channels = activeMembership?.channels
|
|
|
-
|
|
|
- if (!channels?.length) {
|
|
|
- navigate(absoluteRoutes.studio.newChannel())
|
|
|
- return
|
|
|
- }
|
|
|
- setIsFetchingData(true)
|
|
|
- const { data } = await refetchYppSyncedChannels().finally(() => {
|
|
|
- setIsFetchingData(false)
|
|
|
- })
|
|
|
- if (data?.currentChannel) {
|
|
|
- navigate(absoluteRoutes.studio.ypp())
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (data?.unsyncedChannels?.length) {
|
|
|
- setSelectedChannelId(data?.unsyncedChannels[0].id)
|
|
|
- }
|
|
|
- if (data?.unsyncedChannels?.length && data?.unsyncedChannels.length > 1) {
|
|
|
- onChangeStep('select-channel')
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- handleAuthorizeClick(data?.unsyncedChannels?.[0].id)
|
|
|
- }, [
|
|
|
- activeMembership?.channels,
|
|
|
- handleAuthorizeClick,
|
|
|
- navigate,
|
|
|
- onChangeStep,
|
|
|
- refetchYppSyncedChannels,
|
|
|
- setSelectedChannelId,
|
|
|
- ])
|
|
|
-
|
|
|
const authorizationStep = useMemo(() => {
|
|
|
switch (currentStep) {
|
|
|
- case 'requirements':
|
|
|
+ case 'requirements': {
|
|
|
+ const getPrimaryButton = () => {
|
|
|
+ if (isLoading) {
|
|
|
+ return <RequirementsButtonSkeleton />
|
|
|
+ }
|
|
|
+
|
|
|
+ if (yppCurrentChannel) {
|
|
|
+ navigate(absoluteRoutes.studio.ypp())
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!activeMembership?.channels.length) {
|
|
|
+ return {
|
|
|
+ text: 'Create a new channel',
|
|
|
+ onClick: () => navigate(absoluteRoutes.studio.newChannel()),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (yppUnsyncedChannels?.length) {
|
|
|
+ setSelectedChannelId(yppUnsyncedChannels[0].id)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (yppUnsyncedChannels && yppUnsyncedChannels.length > 1) {
|
|
|
+ return {
|
|
|
+ text: 'Select channel',
|
|
|
+ onClick: () => onChangeStep('select-channel'),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <GoogleButton
|
|
|
+ onClick={() => {
|
|
|
+ setSelectedChannelId(yppUnsyncedChannels?.[0].id ?? '')
|
|
|
+ handleAuthorizeClick(yppUnsyncedChannels?.[0].id)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
title: 'Requirements',
|
|
|
description: `Before you can apply to the program, make sure your YouTube channel meets the below conditions.`,
|
|
|
- primaryButton: {
|
|
|
- text: isFetchingData
|
|
|
- ? 'Please wait...'
|
|
|
- : activeMembership?.channels.length
|
|
|
- ? 'Continue'
|
|
|
- : 'Create new channel',
|
|
|
- disabled: isFetchingData,
|
|
|
- onClick: () => verifyChannelRequirements(),
|
|
|
- },
|
|
|
+ primaryButton: getPrimaryButton(),
|
|
|
component: <YppAuthorizationRequirementsStep requirements={requirements} />,
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
case 'select-channel':
|
|
|
return {
|
|
|
title: 'Select channel',
|
|
|
description: `Select the ${APP_NAME} channel you want your YouTube channel to be connected with.`,
|
|
|
- primaryButton: {
|
|
|
- text: 'Authorize with YouTube',
|
|
|
- onClick: () => handleAuthorizeClick,
|
|
|
- disabled: !selectedChannel,
|
|
|
- },
|
|
|
+ primaryButton: <GoogleButton disabled={!selectedChannel} onClick={() => handleAuthorizeClick()} />,
|
|
|
component: (
|
|
|
<YppAuthorizationSelectChannelStep
|
|
|
channels={unSyncedChannels}
|
|
@@ -409,9 +402,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
title: 'Details',
|
|
|
description: 'Provide additional information to set up your program membership.',
|
|
|
primaryButton: {
|
|
|
- onClick: () => {
|
|
|
- handleSubmitDetailsForm()
|
|
|
- },
|
|
|
+ onClick: () => handleSubmitDetailsForm(),
|
|
|
text: 'Continue',
|
|
|
},
|
|
|
component: <YppAuthorizationDetailsFormStep />,
|
|
@@ -421,9 +412,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
title: 'YouTube Sync',
|
|
|
description: `With YouTube Sync enabled, ${APP_NAME} will import videos from your YouTube channel over to Joystream. This can be changed later.`,
|
|
|
primaryButton: {
|
|
|
- onClick: () => {
|
|
|
- handleSubmitDetailsForm()
|
|
|
- },
|
|
|
+ onClick: () => handleSubmitDetailsForm(),
|
|
|
text: 'Continue',
|
|
|
},
|
|
|
component: <YppAuthorizationSyncStep />,
|
|
@@ -460,10 +449,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
return {
|
|
|
headerIcon: <SvgAlertsError32 />,
|
|
|
title: 'Authorization failed',
|
|
|
- primaryButton: {
|
|
|
- text: 'Select another channel',
|
|
|
- onClick: () => handleAuthorizeClick,
|
|
|
- },
|
|
|
+ primaryButton: <GoogleButton onClick={() => handleAuthorizeClick()} />,
|
|
|
description: (
|
|
|
<>
|
|
|
The YouTube channel you selected is already enrolled in the YouTube Partner Program and is tied to the{' '}
|
|
@@ -480,10 +466,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
}
|
|
|
}, [
|
|
|
currentStep,
|
|
|
- isFetchingData,
|
|
|
- activeMembership?.channels.length,
|
|
|
- requirements,
|
|
|
- handleAuthorizeClick,
|
|
|
selectedChannel,
|
|
|
unSyncedChannels,
|
|
|
selectedChannelId,
|
|
@@ -493,12 +475,20 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
handleGoToDashboard,
|
|
|
alreadyRegisteredChannel?.channelTitle,
|
|
|
alreadyRegisteredChannel?.ownerMemberHandle,
|
|
|
- verifyChannelRequirements,
|
|
|
+ requirements,
|
|
|
+ isLoading,
|
|
|
+ yppCurrentChannel,
|
|
|
+ activeMembership?.channels.length,
|
|
|
+ yppUnsyncedChannels,
|
|
|
+ navigate,
|
|
|
+ setSelectedChannelId,
|
|
|
+ onChangeStep,
|
|
|
+ handleAuthorizeClick,
|
|
|
handleSubmitDetailsForm,
|
|
|
])
|
|
|
|
|
|
const secondaryButton = useMemo(() => {
|
|
|
- if (currentStep === 'select-channel' || (currentStep === 'requirements' && !hasMoreThanOneChannel)) return
|
|
|
+ if (currentStep === 'requirements' || currentStep === 'select-channel') return
|
|
|
if (currentStep === 'summary') {
|
|
|
return {
|
|
|
text: 'Close',
|
|
@@ -511,7 +501,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
|
|
|
disabled: isSubmitting,
|
|
|
onClick: handleGoBack,
|
|
|
}
|
|
|
- }, [currentStep, hasMoreThanOneChannel, handleGoBack, isSubmitting, handleClose])
|
|
|
+ }, [currentStep, handleGoBack, isSubmitting, handleClose])
|
|
|
|
|
|
return (
|
|
|
<FormProvider {...detailsFormMethods}>
|