1import pageUtils from '../../lib/pageUtils';
 2import Layout from '../../layouts/EventCreation';
 3import {useTranslation} from 'next-i18next';
 4import {Box, Typography, useMediaQuery, useTheme} from '@mui/material';
 5import EventTypeCard from '../../containers/EventTypeCard';
 6import {useEffect} from 'react';
 7import {useRouter} from 'next/router';
 8import useEventCreationStore from '../../stores/useEventCreationStore';
 9import {useModuleQuery} from '../../generated/graphql';
10import useLocale from '../../hooks/useLocale';
11
12const NewEventType = () => {
13  const {t} = useTranslation();
14  const router = useRouter();
15  const theme = useTheme();
16  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
17  const event = useEventCreationStore(s => s.event);
18  const {locale} = useLocale();
19  const {data: moduleData} = useModuleQuery({variables: {locale}});
20  const moduleConfig = moduleData?.module?.data?.attributes;
21
22  useEffect(() => {
23    if (!event.name) router.push('/new');
24  }, [event.name, router]);
25
26  return (
27    <Layout>
28      <Box display="flex" justifyContent="center">
29        <Typography
30          variant="h3"
31          align="center"
32          maxWidth={400}
33        >{t`event.creation.chooseType`}</Typography>
34      </Box>
35      <Box display="flex" gap={4} py={4} flexWrap={isMobile && 'wrap'}>
36        <EventTypeCard type="basic" />
37        {moduleConfig?.caroster_plus_payment_link && (
38          <EventTypeCard type="plus" moduleConfig={moduleConfig} />
39        )}
40      </Box>
41    </Layout>
42  );
43};
44
45export const getServerSideProps = pageUtils.getServerSideProps();
46
47export default NewEventType;