1import {useReducer, useState} from 'react';
  2import Container from '@mui/material/Container';
  3import Card from '@mui/material/Card';
  4import CardContent from '@mui/material/CardContent';
  5import CardActions from '@mui/material/CardActions';
  6import Button from '@mui/material/Button';
  7import {useTranslation} from 'next-i18next';
  8import ProfileField from './ProfileField';
  9import {
 10  UsersPermissionsUser,
 11  useUpdateMeMutation,
 12} from '../../generated/graphql';
 13import ManagingNotificationsField from './ManagingNotificationsField';
 14import StripeDashboardLink from './StripeDashboardLink';
 15import {Box, Divider} from '@mui/material';
 16import theme from '../../theme';
 17
 18interface Props {
 19  profile: UsersPermissionsUser;
 20  logout: () => void;
 21}
 22
 23const Profile = ({profile, logout}: Props) => {
 24  const {t} = useTranslation();
 25
 26  const [updateProfile] = useUpdateMeMutation();
 27  const [isEditing, setIsEditing] = useState(false);
 28  const [firstName, setFirstName] = useState(profile.firstName);
 29  const [lastName, setLastName] = useState(profile.lastName);
 30  const [email, setEmail] = useState(profile.email);
 31  const [newsletterConsent, toggleNewsletter] = useReducer(
 32    i => !i,
 33    profile.newsletterConsent
 34  );
 35  const [notificationEnabled, toggleNotification] = useReducer(
 36    i => !i,
 37    profile.notificationEnabled
 38  );
 39
 40  const isStrapiUser = profile.provider === 'local';
 41
 42  const onSave = async () => {
 43    try {
 44      await updateProfile({
 45        variables: {
 46          userUpdate: {
 47            firstName,
 48            lastName,
 49            email,
 50            newsletterConsent,
 51            notificationEnabled,
 52          },
 53        },
 54      });
 55      setIsEditing(false);
 56    } catch (error) {
 57      console.error(error);
 58    }
 59  };
 60
 61  return (
 62    <Container
 63      maxWidth="sm"
 64      sx={{
 65        margin: 0,
 66        ml: 4,
 67        [theme.breakpoints.down('sm')]: {
 68          ml: 0,
 69        },
 70      }}
 71    >
 72      <Card sx={{width: '480px', maxWidth: '100%'}}>
 73        <CardContent>
 74          <Box>
 75            <ProfileField
 76              name="firstName"
 77              value={firstName}
 78              label={t('profile.firstName')}
 79              defaultValue={t('profile.not_defined', {
 80                field: '$t(profile.firstName)',
 81              })}
 82              onChange={setFirstName}
 83              isEditing={isEditing}
 84            />
 85            <ProfileField
 86              name="lastName"
 87              value={lastName}
 88              label={t('profile.lastName')}
 89              defaultValue={t('profile.not_defined', {
 90                field: '$t(profile.lastName)',
 91              })}
 92              onChange={setLastName}
 93              isEditing={isEditing}
 94            />
 95            <ProfileField
 96              name="email"
 97              value={email}
 98              label={t('profile.email')}
 99              defaultValue={t('profile.not_defined', {
100                field: '$t(profile.email)',
101              })}
102              onChange={setEmail}
103              isEditing={isEditing}
104              disabled={!isStrapiUser}
105            />
106          </Box>
107        </CardContent>
108        <Divider />
109        <Box my={4}>
110          <ManagingNotificationsField
111            isEditing={isEditing}
112            notificationChecked={notificationEnabled}
113            newsletterChecked={newsletterConsent}
114            toggleNotification={toggleNotification}
115            toggleNewsletter={toggleNewsletter}
116          />
117          <StripeDashboardLink />
118        </Box>
119        <Divider />
120        <CardActions sx={{justifyContent: 'flex-end'}}>
121          {!isEditing && (
122            <>
123              <Button type="button" onClick={logout}>
124                {t('profile.actions.logout')}
125              </Button>
126              <Button
127                type="button"
128                color="primary"
129                onClick={() => setIsEditing(true)}
130                variant="contained"
131              >
132                {t('profile.actions.edit')}
133              </Button>
134            </>
135          )}
136          {isEditing && (
137            <Button
138              type="submit"
139              color="primary"
140              onClick={onSave}
141              variant="contained"
142            >
143              {t('profile.actions.save')}
144            </Button>
145          )}
146        </CardActions>
147      </Card>
148    </Container>
149  );
150};
151
152export default Profile;