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