'use client'; import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { useModals } from '@mantine/modals'; import clsx from 'clsx'; import { GithubOnboarding } from '@gitroom/frontend/components/onboarding/github.onboarding'; import { SettingsPopup } from '@gitroom/frontend/components/layout/settings.component'; import { Button } from '@gitroom/react/form/button'; import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels'; import { isGeneral } from '@gitroom/react/helpers/is.general'; import { AddAccount } from '@gitroom/frontend/components/marketplace/seller'; export const Step: FC<{ step: number; title: string; currentStep: number; lastStep: number; }> = (props) => { const { step, title, currentStep, lastStep } = props; return (
{step === currentStep && currentStep !== lastStep && ( )} {(currentStep > step || currentStep == lastStep) && ( )} {step > currentStep && currentStep !== lastStep && ( )}
STEP {step}
currentStep && 'text-[#64748B]')} > {title}
); }; export const StepSpace: FC = () => { return (
); }; const SkipOnboarding: FC = () => { const router = useRouter(); const searchParams = useSearchParams(); const onSkip = useCallback(() => { const keys = Array.from(searchParams.keys()); const buildNewQuery = keys .reduce((all, current) => { if (current === 'onboarding') { return all; } const value = searchParams.get(current); all.push(`${current}=${value}`); return all; }, [] as string[]) .join('&'); router.push(`?${buildNewQuery}`); }, [searchParams]); return ( ); }; const Welcome: FC = () => { const [seller, setSeller] = useState(false); const [lastStep, setLastStep] = useState(isGeneral() ? 3 : 4); const [step, setStep] = useState(1); const ref = useRef(); const router = useRouter(); const nextStep = useCallback( (stepIt?: number) => () => { setStep(stepIt ? stepIt : step + 1); }, [step] ); const firstNext = useCallback(() => { // @ts-ignore ref?.current?.click(); nextStep(2)(); }, [nextStep]); const goToAnalytics = useCallback(() => { router.push('/analytics'); }, []); const goToLaunches = useCallback(() => { router.push('/launches'); }, []); const buyPosts = useCallback(() => { router.push('/marketplace/buyer'); }, []); const sellPosts = useCallback(() => { nextStep()(); setLastStep(isGeneral() ? 4 : 5); setSeller(true); }, [step]); const connectBankAccount = useCallback(() => { router.push('/marketplace/seller'); }, []); return (

Onboarding

{!isGeneral() && ( <> )} {seller && ( <> )}
{step === 1 && ( <>
)} {step === 2 && !isGeneral() && (
)} {step === 3 - (isGeneral() ? 1 : 0) && (
)} {step === 4 - (isGeneral() ? 1 : 0) && (
success
You are done, from here you can:
{!isGeneral() && ( )}
)} {step === 5 - (isGeneral() ? 1 : 0) && (
To sell posts you would have to:
)}
); }; export const Onboarding: FC = () => { const query = useSearchParams(); const modal = useModals(); const modalOpen = useRef(false); useEffect(() => { const onboarding = query.get('onboarding'); if (!onboarding) { modalOpen.current = false; modal.closeAll(); return; } modalOpen.current = true; modal.openModal({ title: '', withCloseButton: false, closeOnEscape: false, classNames: { modal: 'bg-transparent text-white', }, size: '100%', children: , }); }, [query]); return null; };