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';
 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;