feat: confirm email container

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

@@ -45,7 +45,7 @@ const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
               {user.email}
             </Text>
           </Box>
-          <Button onClick={() => setStatusPageView('update-email')}>Edit</Button>
+          <Button onClick={() => setStatusPageView({ status: 'update-email' })}>Edit</Button>
         </Flex>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>
@@ -56,7 +56,7 @@ const UserAccountInfo: React.FC<UserAccountInfoPropsType> = ({ user }) => {
               **********
             </Text>
           </Box>
-          <Button onClick={() => setStatusPageView('update-password')}>Change</Button>
+          <Button onClick={() => setStatusPageView({ status: 'update-password' })}>Change</Button>
         </Flex>
       </Stack>
     </Box>

src/pages/profile/containers/ConfirmEmailContainer/ConfirmEmailContainer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { PinInput, PinInputField } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/button';
+import { Box, Flex, Heading, HStack, Text } from '@chakra-ui/layout';
+
+const ConfirmEmailContainer: React.FC<{ newEmail: string }> = ({ newEmail }) => {
+  return (
+    <Box
+      maxW='500px'
+      sx={{
+        '@media(max-width: 991px)': {
+          maxW: 'inherit',
+          textAlign: 'center',
+        },
+      }}
+    >
+      <Heading as='h1'>Confirmation</Heading>
+      <Box mt='3'>
+        <Text>
+          Enter the 4-digit code we send to <Text as='b'>{newEmail}</Text>
+        </Text>
+      </Box>
+      <Flex alignItems='center' mt='10'>
+        <Box textAlign='center' w='full'>
+          <Flex justifyContent='center'>
+            <HStack>
+              <PinInput size='lg'>
+                <PinInputField />
+                <PinInputField />
+                <PinInputField />
+                <PinInputField />
+              </PinInput>
+            </HStack>
+          </Flex>
+          <Button
+            p='0 50px'
+            colorScheme='blue'
+            mt='4'
+            type='submit'
+            size='md'
+            variant='outline'
+            loadingText='Validating...'
+          >
+            Verify
+          </Button>
+          <Box mt='1.5'>
+            <Text as='small' color='red'>
+              Expires in 1:59
+            </Text>
+            {/* <Button variant='link' size='sm' colorScheme='black' mt='3' textDecoration='underline'>
+              Resend code
+            </Button> */}
+          </Box>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ConfirmEmailContainer;

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

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

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

@@ -15,7 +15,7 @@ const UpdateEmailContainer: React.FC = () => {
           aria-label='Back'
           borderRadius='full'
           icon={<ChevronLeftIcon />}
-          onClick={() => setStatusPageView('default')}
+          onClick={() => setStatusPageView({ status: 'default' })}
           mr='5'
         />
         <Heading as='h1'>Edit email address</Heading>

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

@@ -3,8 +3,9 @@ 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 { ProfilePageViewContext } from 'contexts';
 import { useRootStore } from 'hooks/useRootStore';
-import React from 'react';
+import React, { useContext } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import UpdateEmailSchema from './UpdateEmailForm.validator';
 
@@ -16,6 +17,7 @@ type UpdateEmailInputType = {
  * Update email using form
  */
 const UpdateEmailForm: React.FC = () => {
+  const { setStatusPageView } = useContext(ProfilePageViewContext);
   const {
     userStore: { me },
   } = useRootStore();
@@ -29,6 +31,7 @@ const UpdateEmailForm: React.FC = () => {
 
   const onSubmit: SubmitHandler<UpdateEmailInputType> = async data => {
     console.log(data);
+    setStatusPageView({ status: 'confirm-email', data: { confirmEmailData: { newEmail: data.email } } });
   };
 
   return (

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordContainer.tsx

@@ -14,7 +14,7 @@ const UpdatePasswordContainer: React.FC = () => {
           aria-label='Back'
           borderRadius='full'
           icon={<ChevronLeftIcon />}
-          onClick={() => setStatusPageView('default')}
+          onClick={() => setStatusPageView({ status: 'default' })}
           mr='5'
         />
         <Heading as='h1'>Update password</Heading>

src/pages/profile/index.tsx

@@ -24,12 +24,13 @@ import UserAccountInfo from './components/UserAccountInfo';
 import UpdateUserContactsForm from './components/UpdateUserContactsForm';
 import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
 import UpdateEmailContainer from './containers/UpdateEmailContainer';
+import ConfirmEmailContainer from './containers/ConfirmEmailContainer';
 
 /**
  * Profile page
  */
 const ProfilePage: React.FC<IPageProps> = () => {
-  const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>('default');
+  const [statusPageView, setStatusPageView] = useState<ProfilePageStatusType>({ status: 'default' });
   const { colorMode } = useColorMode();
   const { userStore, authStore } = useRootStore();
   const history = useHistory();
@@ -45,8 +46,8 @@ const ProfilePage: React.FC<IPageProps> = () => {
   }
 
   return (
-    <ProfilePageViewContext.Provider value={{ statusPageView, setStatusPageView }}>
+    <ProfilePageViewContext.Provider value={{ statusPageView: statusPageView.status, setStatusPageView }}>
-      {statusPageView === 'default' && (
+      {statusPageView.status === 'default' && (
         <Box maxW='900px'>
           <Heading as='h1'>My account</Heading>
           <Flex
@@ -120,8 +121,11 @@ const ProfilePage: React.FC<IPageProps> = () => {
           </Box>
         </Box>
       )}
-      {statusPageView === 'update-password' && <UpdatePasswordContainer />}
+      {statusPageView.status === 'update-password' && <UpdatePasswordContainer />}
-      {statusPageView === 'update-email' && <UpdateEmailContainer />}
+      {statusPageView.status === 'update-email' && <UpdateEmailContainer />}
+      {statusPageView.status === 'confirm-email' && statusPageView.data?.confirmEmailData && (
+        <ConfirmEmailContainer newEmail={statusPageView.data.confirmEmailData.newEmail} />
+      )}
     </ProfilePageViewContext.Provider>
   );
 };

src/types/index.d.ts

@@ -7,8 +7,18 @@ export type LinkType = {
   icon: IconType;
 };
 
-export type ProfilePageStatusType = 'update-password' | 'update-email' | 'default';
+export type ProfilePageStatusType = {
+  status: 'update-password' | 'update-email' | 'confirm-email' | 'default';
+  data?: {
+    /**
+     * The field that is set when trying to change the mail address through form
+     */
+    confirmEmailData?: {
+      newEmail: string;
+    };
+  };
+};
 export type ProfilePageViewStatusContextType = {
-  statusPageView: ProfilePageStatusType;
+  statusPageView: ProfilePageStatusType['status'];
   setStatusPageView: React.Dispatch<React.SetStateAction<ProfilePageStatusType>>;
 };