62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { useModals } from '@mantine/modals';
|
|
import { Button } from '@gitroom/react/form/button';
|
|
import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels';
|
|
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
|
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
|
import { ModalWrapperComponent } from '@gitroom/frontend/components/new-launch/modal.wrapper.component';
|
|
|
|
const Welcome: FC = () => {
|
|
const { isGeneral } = useVariables();
|
|
const [step, setStep] = useState(1);
|
|
const router = useRouter();
|
|
|
|
const goToLaunches = useCallback(() => {
|
|
router.push('/launches');
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative">
|
|
{step === 2 - (isGeneral ? 1 : 0) && (
|
|
<div>
|
|
<ConnectChannels />
|
|
<div className="flex justify-end gap-[8px]">
|
|
<Button onClick={goToLaunches}>Close</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
export const Onboarding: FC = () => {
|
|
const query = useSearchParams();
|
|
const modal = useModals();
|
|
const modalOpen = useRef(false);
|
|
const t = useT();
|
|
|
|
useEffect(() => {
|
|
const onboarding = query.get('onboarding');
|
|
if (!onboarding) {
|
|
modalOpen.current = false;
|
|
modal.closeAll();
|
|
return;
|
|
}
|
|
modalOpen.current = true;
|
|
modal.openModal({
|
|
title: '',
|
|
withCloseButton: false,
|
|
closeOnEscape: false,
|
|
size: '900px',
|
|
children: (
|
|
<ModalWrapperComponent title={t('onboarding', 'Onboarding')}>
|
|
<Welcome />
|
|
</ModalWrapperComponent>
|
|
),
|
|
});
|
|
}, [query]);
|
|
return null;
|
|
};
|