Feature/account page

app/api.ts

@@ -215,6 +215,7 @@ export const {
   useGetUserMutation,
   useAddUserMutation,
   useUpdateUserMutation,
+  useDeleteUserMutation,
   useAssignPartnerAccessMutation,
   useAddPartnerAccessMutation,
   useStartSessionMutation,

components/account/DeleteAccountModal.tsx

@@ -0,0 +1,84 @@
+import { LoadingButton } from '@mui/lab';
+import { Box, Button, Modal, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { useDeleteUserMutation } from '../../app/api';
+import { getAuth } from 'firebase/auth'
+
+const modalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: { xs: 'calc(100vw - 2rem)', sm: '90%' },
+  maxWidth: '700px',
+  maxHeight: '75vh',
+  borderRadius: '20px',
+  bgcolor: 'background.paper',
+} as const;
+
+const modalContentStyle = {
+  maxWidth: 800,
+  margin: 'auto',
+  paddingX: { xs: 2, sm: 4 },
+  paddingY: { xs: 4, sm: 6 },
+} as const;
+
+interface Props {
+  open: boolean;
+  onClose: () => void
+}
+
+const DeleteAccountModal = ({ open, onClose }: Props) => {
+  const [deleteUser, { isLoading }] = useDeleteUserMutation()
+
+  const onUserDelete = () => {
+    const auth = getAuth()
+    const currUser = auth.currentUser
+
+    if (currUser === null) {
+      return
+    }
+
+    deleteUser(currUser)
+  }
+
+  const t = useTranslations('Account.accountSettings');
+
+  return (
+    <Modal
+      {...{ open, onClose }}
+      aria-labelledby='modal-title'
+      aria-describedby='modal-description'
+    >
+      <Box sx={modalStyle}>
+        <Box sx={modalContentStyle}>
+          <Typography id='modal-title' component='h2' variant='h2'>
+            {t('actions.button.delAcc')} ?
+          </Typography>
+          <Typography id='modal-description' fontStyle='italic'>
+            {t('actions.desc')}
+          </Typography>
+          <div style={{ display: 'inline-flex', width: '100%', flexWrap: 'wrap', marginTop: '20px', gap: 8 }}>
+            <LoadingButton
+              color='error'
+              loading={isLoading}
+              onClick={() => onUserDelete()}
+              variant='outlined'
+            >
+              {t('actions.button.delAcc')}
+            </LoadingButton>
+            <Button
+              color='secondary'
+              variant='contained'
+              onClick={onClose}
+            >
+              {t('actions.button.cancel')}
+            </Button>
+          </div>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default DeleteAccountModal;

components/account/EmailPref.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useState } from 'react';
+import { Typography, Container, CardContent, Card, Box } from '@mui/material'
+import { Checkbox, FormControl, FormControlLabel, } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { useTranslations } from 'next-intl'
+import { useUpdateUserMutation } from '../../app/api';
+import { useTypedSelector } from '../../hooks/store';
+import { ErrorDisplay } from '../../constants/common';
+
+const formCardStyle = {
+  width: { xs: '100%', sm: '70%', md: '45%' },
+  alignSelf: 'flex-start',
+} as const;
+
+const EmailPref = () => {
+  const [updateUser, { isLoading }] = useUpdateUserMutation()
+  const [error, setError] = useState<ErrorDisplay>();
+
+  const t = useTranslations('Account.accountSettings.emailPref');
+  const tA = useTranslations('Account.accountSettings');
+
+  const contactPermission = useTypedSelector(state => state.user.contactPermission)
+  const servicePermission = useTypedSelector(state => state.user.serviceEmailsPermission)
+
+  const onSubmit = useCallback(async (ev: React.FormEvent<HTMLFormElement>) => {
+    const formData = new FormData(ev.currentTarget)
+    ev.preventDefault()
+
+    const contactPermission = formData.get('contactPermission') === 'on'
+    const serviceEmailsPermission = formData.get('servicePermission') === 'on'
+    const payload = {
+      contactPermission, serviceEmailsPermission
+    }
+
+    try {
+      await updateUser(payload);
+    } catch (error) {
+      setError(tA.rich('updateError'));
+    }
+  }, [updateUser, tA])
+
+  return (
+    <Card sx={formCardStyle}>
+      <CardContent>
+        <form onSubmit={onSubmit}>
+          <Typography variant='h2' component='h2'>
+            {t('title')}
+          </Typography>
+          <Typography fontSize='1rem !important'>
+            {t('desc')}
+          </Typography>
+          <Box>
+            <FormControl sx={{ marginY: 3, display: 'flex', flexDirection: 'column', gap: 2, }} >
+              <FormControlLabel
+                label={t('checkbox.emailOnChange')}
+                control={
+                  <Checkbox
+                    name='contactPermission'
+                    aria-label={t('checkbox.emailOnChange')}
+                    defaultChecked={contactPermission}
+                  />
+                }
+              />
+              <FormControlLabel
+                label={t('checkbox.emailOnCourse')}
+                control={
+                  <Checkbox
+                    name='servicePermission'
+                    aria-label={t('checkbox.emailOnCourse')}
+                    defaultChecked={servicePermission}
+                  />
+                }
+              />
+              {error && (
+                <Typography color="error.main" mb={'1rem !important'}>
+                  {error}
+                </Typography>
+              )}
+            </FormControl>
+          </Box>
+          <LoadingButton
+            sx={{ mt: 2, mr: 1.5, }}
+            variant='contained'
+            fullWidth
+            loading={isLoading}
+            color='secondary'
+            type='submit'
+          >
+            {t('button.savePref')}
+          </LoadingButton>
+        </form>
+      </CardContent>
+    </Card >
+  )
+}
+
+export default EmailPref

components/account/ProfileDetails.tsx

@@ -0,0 +1,28 @@
+import { Typography, Card, CardContent, } from '@mui/material';
+import ProfileDetailsForm from '../forms/ProfileDetailsForm';
+import { useTranslations } from 'next-intl';
+
+const formCardStyle = {
+  width: { xs: '100%', sm: '70%', md: '45%' },
+  alignSelf: 'flex-start',
+} as const;
+
+const ProfileDetails = () => {
+  const t = useTranslations('Account.accountSettings');
+
+  return (
+    <Card sx={formCardStyle}>
+      <CardContent>
+        <Typography variant="h2" component="h2">
+          {t('profile.title')}
+        </Typography>
+        <Typography fontSize="1rem !important">
+          {t('profile.desc')}
+        </Typography>
+        <ProfileDetailsForm />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ProfileDetails

components/forms/LoginForm.tsx

@@ -2,7 +2,6 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { Box, TextField, Typography } from '@mui/material';
 import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
 import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/router';
 import * as React from 'react';
 import { useState } from 'react';
 import { useGetUserMutation } from '../../app/api';
@@ -30,17 +29,16 @@ const containerStyle = {
 const LoginForm = () => {
   const t = useTranslations('Auth.form');
   const tS = useTranslations('Shared');
-  const router = useRouter();
 
   const [loading, setLoading] = useState<boolean>(false);
   const [formError, setFormError] = useState<
     | string
-    | React.ReactNodeArray
+    | React.ReactNode
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>
   >();
   const [emailInput, setEmailInput] = useState<string>('');
   const [passwordInput, setPasswordInput] = useState<string>('');
-  const [getUser, { isLoading: getUserIsLoading }] = useGetUserMutation();
+  const [getUser] = useGetUserMutation();
   const dispatch: any = useAppDispatch();
 
   const submitHandler = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -91,7 +89,6 @@ const LoginForm = () => {
       })
       .catch((error) => {
         const errorCode = error.code;
-        const errorMessage = error.message;
 
         if (errorCode === 'auth/invalid-email') {
           setFormError(t('firebase.invalidEmail'));

components/forms/ProfileDetailsForm.tsx

@@ -0,0 +1,43 @@
+import { Box, TextField } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import * as React from 'react';
+import { useTypedSelector } from '../../hooks/store';
+
+const containerStyle = {
+  marginY: 3,
+} as const;
+
+const ProfileDetailsForm = () => {
+  const name = useTypedSelector(state => state.user.name)
+  const email = useTypedSelector(state => state.user.email)
+
+  const tA = useTranslations('Account.accountSettings.form');
+
+  return (
+    <Box sx={containerStyle}>
+      <form autoComplete="off" >
+        <TextField
+          id="name"
+          value={name}
+          disabled
+          label={tA('nameLabel')}
+          variant="standard"
+          fullWidth
+          required
+        />
+        <TextField
+          id="email"
+          value={email}
+          disabled
+          label={tA('emailLabel')}
+          variant="standard"
+          type="email"
+          fullWidth
+          required
+        />
+      </form>
+    </Box>
+  );
+};
+
+export default ProfileDetailsForm;

components/layout/UserMenu.tsx

@@ -1,20 +1,16 @@
 import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
 import Logout from '@mui/icons-material/Logout';
+import Settings from '@mui/icons-material/Settings';
 import Person from '@mui/icons-material/Person';
 import { Box, Button, Menu, MenuItem } from '@mui/material';
-import { getAuth, signOut } from 'firebase/auth';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import * as React from 'react';
-import { api } from '../../app/api';
-import { clearCoursesSlice } from '../../app/coursesSlice';
-import { clearPartnerAccessesSlice } from '../../app/partnerAccessSlice';
-import { clearPartnerAdminSlice } from '../../app/partnerAdminSlice';
-import { clearUserSlice } from '../../app/userSlice';
 import { HEADER_ACCOUNT_ICON_CLICKED, HEADER_APPLY_A_CODE_CLICKED } from '../../constants/events';
-import { useAppDispatch, useTypedSelector } from '../../hooks/store';
+import { useTypedSelector } from '../../hooks/store';
 import logEvent, { getEventUserData } from '../../utils/logEvent';
 import Link from '../common/Link';
+import useAuth from '../../hooks/useAuth';
 
 const menuItemStyle = {
   ':hover': { backgroundColor: 'transparent' },
@@ -38,9 +34,10 @@ const buttonStyle = {
 } as const;
 
 export default function UserMenu() {
+  const { onLogout } = useAuth()
+
   const router = useRouter();
   const t = useTranslations('Navigation');
-  const dispatch: any = useAppDispatch();
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
@@ -60,14 +57,7 @@ export default function UserMenu() {
 
   const logout = async () => {
     // clear all state
-    // sign out of firebase
-    const auth = getAuth();
-    await signOut(auth);
-    await dispatch(clearPartnerAccessesSlice());
-    await dispatch(clearPartnerAdminSlice());
-    await dispatch(clearCoursesSlice());
-    await dispatch(clearUserSlice());
-    await dispatch(api.util.resetApiState());
+    await onLogout()
 
     router.push('/auth/login');
   };
@@ -111,6 +101,16 @@ export default function UserMenu() {
             </Button>
           </MenuItem>
         )}
+        <MenuItem sx={menuItemStyle}>
+          <Button
+            component={Link}
+            href='/account/settings'
+            onClick={handleClose}
+            startIcon={<Settings />}
+          >
+            {t('accSettings')}
+          </Button>
+        </MenuItem>
         <MenuItem sx={menuItemStyle}>
           <Button id="logout-button" onClick={logout} startIcon={<Logout />}>
             {t('logout')}

constants/common.ts

@@ -1,6 +1,11 @@
+import { ReactElement, JSXElementConstructor, ReactNodeArray } from 'react'
+//
 // Always use BASE_URL const instead of NEXT_PUBLIC_BASE_URL
 // Dynamic vercel preview branches have random wildcard subdomains
 // so NEXT_PUBLIC_ENV doesn't work in staging/preview
+
+export type ErrorDisplay = string | ReactElement<any, string | JSXElementConstructor<any>> | ReactNodeArray | null
 export const VERCEL_PREVIEW_URL = `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`;
 export const BASE_URL =
   process.env.NEXT_PUBLIC_ENV === 'staging' ? VERCEL_PREVIEW_URL : process.env.NEXT_PUBLIC_BASE_URL;
+

cypress.env.example.json

@@ -8,6 +8,7 @@
   "badoo_partner_admin_password": "",
   "super_admin_email": "",
   "super_admin_password": "",
+  "public_name": "",
   "public_email": "",
   "public_password": "",
   "api_url": ""