frontend/containers/CarosterPlusOption/index.tsx (view raw)
1import Box from '@mui/material/Box';
2import Button from '@mui/material/Button';
3import Card from '@mui/material/Card';
4import Typography from '@mui/material/Typography';
5import Chip from '@mui/material/Chip';
6import Divider from '@mui/material/Divider';
7import Tooltip from '@mui/material/Tooltip';
8import ListItem from '@mui/material/ListItem';
9import ListItemIcon from '@mui/material//ListItemIcon';
10import ListItemText from '@mui/material/ListItemText';
11import ChevronRightIcon from '@mui/icons-material/ChevronRight';
12import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
13import {useTranslation} from 'next-i18next';
14import Markdown from '../../components/Markdown';
15import useLocale from '../../hooks/useLocale';
16import usePermissions from '../../hooks/usePermissions';
17import {Event as EventType, Module} from '../../generated/graphql';
18import useProfile from '../../hooks/useProfile';
19
20interface Props {
21 event: EventType;
22 modulesSettings: Module;
23}
24
25const CarosterPlusOption = ({event, modulesSettings}: Props) => {
26 const {t} = useTranslation();
27 const {profile} = useProfile();
28 const {
29 userPermissions: {canEditEventOptions},
30 } = usePermissions();
31 const {locale} = useLocale();
32
33 const {
34 caroster_plus_name,
35 caroster_plus_description,
36 caroster_plus_price,
37 caroster_plus_payment_link,
38 } = modulesSettings;
39
40 return (
41 <Card
42 sx={{
43 position: 'relative',
44 maxWidth: '100%',
45 width: '480px',
46 }}
47 >
48 <Box
49 display="flex"
50 justifyContent="space-between"
51 width="100%"
52 p={2}
53 py={1}
54 >
55 <Typography variant="h4" pt={1}>
56 {caroster_plus_name}
57 </Typography>
58 <Box pt={1}>
59 <Tooltip
60 title={t(
61 canEditEventOptions()
62 ? 'options.plus.activationOK'
63 : 'options.plus.activationForbiden'
64 )}
65 >
66 <Box>
67 <Button
68 href={`${caroster_plus_payment_link}?client_reference_id=${event.uuid}&locale=${locale}&prefilled_email=${profile?.email}`}
69 disabled={!canEditEventOptions()}
70 sx={{
71 backgroundColor: 'primary.light',
72 color: 'primary.main',
73 fontWeight: 'bold',
74 borderRadius: 8,
75 pl: 2,
76 pr: 1,
77 }}
78 >
79 {caroster_plus_price} {caroster_plus_price && 'EUR'}{' '}
80 <ChevronRightIcon />
81 </Button>
82 </Box>
83 </Tooltip>
84 </Box>
85 </Box>
86 <Box p={2}>
87 <Markdown
88 variant="caption"
89 sx={{
90 '& ul': {
91 pl: 2,
92 },
93 }}
94 >
95 {caroster_plus_description}
96 </Markdown>
97 </Box>
98 <Divider />
99 <ListItem
100 sx={{p: 2}}
101 secondaryAction={
102 <Chip label={t('options.plus.creator')} size="small" />
103 }
104 >
105 <ListItemIcon>
106 <AccountCircleOutlinedIcon />
107 </ListItemIcon>
108 <ListItemText primary={event.email} />
109 </ListItem>
110 </Card>
111 );
112};
113
114export default CarosterPlusOption;