refactor: add useEnqueueSnackbar with data-test attr

packages/web/src/pages/ProfileSettings/index.tsx

@@ -1,29 +1,29 @@
-import * as React from 'react';
 import { useMutation } from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import { useSnackbar } from 'notistack';
-import { yupResolver } from '@hookform/resolvers/yup';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import * as React from 'react';
 import * as yup from 'yup';
 
-import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Form from 'components/Form';
-import TextField from 'components/TextField';
 import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import TextField from 'components/TextField';
 import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
-import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 type TMutationInput = {
   fullName: string;
   email: string;
   password?: string;
-}
+};
 
 const validationSchema = yup
   .object({
@@ -43,8 +43,9 @@ const StyledForm = styled(Form)`
 `;
 
 function ProfileSettings() {
-  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false);
-  const { enqueueSnackbar } = useSnackbar();
+  const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] =
+    React.useState(false);
+  const enqueueSnackbar = useEnqueueSnackbar();
   const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
   const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
@@ -55,7 +56,7 @@ function ProfileSettings() {
     const mutationInput: TMutationInput = {
       fullName,
       email,
-    }
+    };
 
     if (password) {
       mutationInput.password = password;
@@ -80,7 +81,6 @@ function ProfileSettings() {
     });
   };
 
-
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -90,7 +90,11 @@ function ProfileSettings() {
 
         <Grid item xs={12} justifyContent="flex-end">
           <StyledForm
-            defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
+            defaultValues={{
+              ...currentUser,
+              password: '',
+              confirmPassword: '',
+            }}
             onSubmit={handleProfileSettingsUpdate}
             resolver={yupResolver(validationSchema)}
             mode="onChange"
@@ -109,7 +113,7 @@ function ProfileSettings() {
                   fullWidth
                   name="fullName"
                   label={formatMessage('profileSettings.fullName')}
-                  margin='dense'
+                  margin="dense"
                   error={touchedFields.fullName && !!errors?.fullName}
                   helperText={errors?.fullName?.message || ' '}
                 />
@@ -118,7 +122,7 @@ function ProfileSettings() {
                   fullWidth
                   name="email"
                   label={formatMessage('profileSettings.email')}
-                  margin='dense'
+                  margin="dense"
                   error={touchedFields.email && !!errors?.email}
                   helperText={errors?.email?.message || ' '}
                 />
@@ -127,7 +131,7 @@ function ProfileSettings() {
                   fullWidth
                   name="password"
                   label={formatMessage('profileSettings.newPassword')}
-                  margin='dense'
+                  margin="dense"
                   type="password"
                   error={touchedFields.password && !!errors?.password}
                   helperText={
@@ -139,7 +143,7 @@ function ProfileSettings() {
                   fullWidth
                   name="confirmPassword"
                   label={formatMessage('profileSettings.confirmNewPassword')}
-                  margin='dense'
+                  margin="dense"
                   type="password"
                   error={
                     touchedFields.confirmPassword && !!errors?.confirmPassword
@@ -163,9 +167,11 @@ function ProfileSettings() {
           />
         </Grid>
 
-        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
           <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('profileSettings.deleteMyAccount')}</AlertTitle>
+            <AlertTitle sx={{ fontWeight: 700 }}>
+              {formatMessage('profileSettings.deleteMyAccount')}
+            </AlertTitle>
 
             <Typography variant="body1" gutterBottom>
               {formatMessage('profileSettings.deleteAccountSubtitle')}