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