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 eventStoreReady = useEventCreationStore(s => s.ready);
19  const {locale} = useLocale();
20  const {data: moduleData} = useModuleQuery({variables: {locale}});
21  const moduleConfig = moduleData?.module?.data?.attributes;
22
23  useEffect(() => {
24    if (eventStoreReady && !event.name) router.push('/new');
25  }, [event.name, eventStoreReady, router]);
26
27  return (
28    <Layout>
29      <Box display="flex" justifyContent="center">
30        <Typography
31          variant="h3"
32          align="center"
33          maxWidth={400}
34        >{t`event.creation.chooseType`}</Typography>
35      </Box>
36      <Box display="flex" gap={4} py={4} flexWrap={isMobile && 'wrap'}>
37        <EventTypeCard type="basic" />
38        {moduleConfig?.caroster_plus_payment_link && (
39          <EventTypeCard type="plus" moduleConfig={moduleConfig} />
40        )}
41      </Box>
42    </Layout>
43  );
44};
45
46export const getServerSideProps = pageUtils.getServerSideProps();
47
48export default NewEventType;