frontend/containers/EventTypeCard/index.tsx (view raw)
1import {Box, Paper, Typography} from '@mui/material';
2import {useTranslation} from 'next-i18next';
3import BasicAction from './BasicAction';
4import PlusAction from './PlusAction';
5import {Module, useModuleQuery} from '../../generated/graphql';
6
7type Props = {
8 type: 'basic' | 'plus';
9};
10
11const EventTypeCard = (props: Props) => {
12 const {type} = props;
13 const {t} = useTranslation();
14 const {data} = useModuleQuery({variables: {locale: 'en'}});
15 const modulesSettings = data?.module.data?.attributes;
16
17 return (
18 <Box
19 component={Paper}
20 p={2}
21 width={1}
22 display="flex"
23 flexDirection="column"
24 justifyContent="space-between"
25 >
26 <Typography color="primary" variant="h5">
27 {t(`event.creation.${type}.title`)}
28 </Typography>
29 <Typography color="textSecondary">
30 {t(`event.creation.${type}.subtitle`)}
31 </Typography>
32 {type === 'basic' && (
33 <Box display="flex" alignItems="baseline" pt={3.75} pb={2}>
34 <Typography fontSize={64} lineHeight={1}>
35 0
36 </Typography>
37 <Typography fontSize={24} lineHeight={1}>
38 €
39 </Typography>
40 </Box>
41 )}
42 {type === 'plus' && (
43 <Box py={2}>
44 <Typography fontSize={14} lineHeight={1}>
45 {t`event.creation.plus.fromPrice`}
46 </Typography>
47 <Box display="flex" alignItems="baseline">
48 <Typography fontSize={64} lineHeight={1}>
49 {modulesSettings?.caroster_plus_price}
50 </Typography>
51 <Typography fontSize={24} lineHeight={1}>
52 €
53 </Typography>
54 </Box>
55 </Box>
56 )}
57 <Typography color="textSecondary" pb={3}>
58 {t(`event.creation.${type}.description`)}
59 </Typography>
60 {type === 'basic' && <BasicAction />}
61 {type === 'plus' && <PlusAction />}
62 </Box>
63 );
64};
65
66export default EventTypeCard;