feat: update email form

src/interfaces/index.ts

@@ -53,7 +53,7 @@ export interface IUpdatedContactsResult extends IDataResult {
 }
 
 export interface IUserResult extends IDataResult {
-  data: IUser;
+  data: Omit<IUser, 'fullname'>;
 }
 
 export interface IPageProps extends RouteComponentProps {

src/pages/profile/components/UserAccountInfo/UserAccountInfo.tsx

@@ -9,6 +9,7 @@ type UserAccountInfoPropsType = {
 
 const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
   const { setStatusPageView } = useContext(ProfilePageViewContext);
+
   return (
     <Box borderRadius='md' borderWidth='1px' padding='20px'>
       <Heading as='h3' size='lg'>
@@ -44,7 +45,7 @@ const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
               {user.email}
             </Text>
           </Box>
-          <Button>Edit</Button>
+          <Button onClick={() => setStatusPageView('update-email')}>Edit</Button>
         </Flex>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailContainer.tsx

@@ -0,0 +1,31 @@
+import { IconButton } from '@chakra-ui/button';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+import { Box, Flex, Heading, Text } from '@chakra-ui/layout';
+import { ProfilePageViewContext } from 'contexts';
+import React, { useContext } from 'react';
+import UpdateEmailForm from './UpdateEmailForm';
+
+const UpdateEmailContainer: React.FC = () => {
+  const { setStatusPageView } = useContext(ProfilePageViewContext);
+
+  return (
+    <Box maxW='700px'>
+      <Flex alignItems='center'>
+        <IconButton
+          aria-label='Back'
+          borderRadius='full'
+          icon={<ChevronLeftIcon />}
+          onClick={() => setStatusPageView('default')}
+          mr='5'
+        />
+        <Heading as='h1'>Edit email address</Heading>
+      </Flex>
+      <Box mt='3'>
+        <Text>Type your new email address.</Text>
+      </Box>
+      <UpdateEmailForm />
+    </Box>
+  );
+};
+
+export default UpdateEmailContainer;

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@chakra-ui/button';
+import { FormControl, FormHelperText, FormLabel } from '@chakra-ui/form-control';
+import { Input } from '@chakra-ui/input';
+import { Box, Stack } from '@chakra-ui/layout';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useRootStore } from 'hooks/useRootStore';
+import React from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import UpdateEmailSchema from './UpdateEmailForm.validator';
+
+type UpdateEmailInputType = {
+  email: string;
+};
+
+/**
+ * Update email using form
+ */
+const UpdateEmailForm: React.FC = () => {
+  const {
+    userStore: { me },
+  } = useRootStore();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<UpdateEmailInputType>({
+    resolver: yupResolver(UpdateEmailSchema),
+  });
+
+  const onSubmit: SubmitHandler<UpdateEmailInputType> = async data => {
+    console.log(data);
+  };
+
+  return (
+    <Box>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack spacing='15px' mt='10'>
+          <FormControl id='email'>
+            <FormLabel>Current email</FormLabel>
+            <Input type='email' size='md' variant='filled' disabled value={me?.email} />
+          </FormControl>
+          <FormControl id='new_email' isRequired>
+            <FormLabel>New email</FormLabel>
+            <Input type='email' size='md' variant='filled' placeholder='example@email.com' {...register('email')} />
+            <FormHelperText color={errors.email ? 'red' : 'gray.500'}>
+              {errors.email ? errors.email.message : 'A confirmation 4-digit code will be sent to this address.'}
+            </FormHelperText>
+          </FormControl>
+        </Stack>
+        <Button colorScheme='blue' mt='4' type='submit' size='md' variant='outline' loadingText='Saving...'>
+          Send code
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default UpdateEmailForm;

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/UpdateEmailForm.validator.ts

@@ -0,0 +1,7 @@
+import yup from 'schema';
+
+const UpdateEmailSchema = yup.object().shape({
+  email: yup.string().required('Email address is required.').email('Please type your email correctly.'),
+});
+
+export default UpdateEmailSchema;

src/pages/profile/containers/UpdateEmailContainer/UpdateEmailForm/index.ts

@@ -0,0 +1,3 @@
+import UpdateEmailForm from './UpdateEmailForm';
+
+export default UpdateEmailForm;

src/pages/profile/containers/UpdateEmailContainer/index.ts

@@ -0,0 +1,3 @@
+import UpdateEmailContainer from './UpdateEmailContainer';
+
+export default UpdateEmailContainer;

src/pages/profile/index.tsx

@@ -23,6 +23,7 @@ import LoadingPage from './components/LoadingPage';
 import UserAccountInfo from './components/UserAccountInfo';
 import UpdateUserContactsForm from './components/UpdateUserContactsForm';
 import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
+import UpdateEmailContainer from './containers/UpdateEmailContainer';
 
 /**
  * Profile page
@@ -120,6 +121,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
         </Box>
       )}
       {statusPageView === 'update-password' && <UpdatePasswordContainer />}
+      {statusPageView === 'update-email' && <UpdateEmailContainer />}
     </ProfilePageViewContext.Provider>
   );
 };