Enhancement: Support email editing on My Account page

src/containers/Auth/Auth.tsx

@@ -175,7 +175,7 @@ export const Auth = ({
             saveHandler(item);
           }}
         >
-          {({ submitForm, values }) => (
+          {({ submitForm, values, setValues }) => (
             <div className={styles.CenterBox}>
               <Form className={styles.Form}>
                 {formFields.map((field, index) => {
@@ -218,10 +218,16 @@ export const Auth = ({
                       component={Button}
                       variant="contained"
                       color="primary"
-                      onClick={(token: string) => {
+                      onClick={async (token: string) => {
                         if (token) {
-                          setLoading(true);
-                          saveHandler({ ...values, captcha: token });
+                          // Set captcha value
+                          await setValues({ ...values, captcha: token });
+
+                          // Give React time to process the state update
+                          await new Promise((resolve) => setTimeout(resolve, 0));
+
+                          // Let Formik handle validation & submission
+                          submitForm();
                         }
                       }}
                       className={buttonClass}

src/containers/Auth/ResetPassword/ResetPasswordConfirmOTP.test.tsx

@@ -51,7 +51,7 @@
     const saveButton = screen.getByText('Save');
     await user.click(saveButton);
 
     await waitFor(() => {
       expect(screen.getByText('Login page')).toBeInTheDocument();
     });
   });
@@ -76,4 +76,22 @@
       expect(sendOptMock).toHaveBeenCalledWith('919967665667');
     });
   });
+
+  test('it should show validation error if phone number is empty in state', async () => {
+    const WrapperEmpty = (
+      <MemoryRouter initialEntries={[{ state: { phoneNumber: '' } }]}>
+        <Routes>
+          <Route path="/" element={<ResetPasswordConfirmOTP />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    render(WrapperEmpty);
+    const saveButton = screen.getByText('Save');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Input required').length).toBeGreaterThan(0);
+    });
+  });
 });

src/containers/Auth/ResetPassword/ResetPasswordConfirmOTP.tsx

@@ -66,6 +66,7 @@ export const ResetPasswordConfirmOTP = () => {
   ];
 
   const FormSchema = Yup.object().shape({
+    phoneNumber: Yup.string().required(t('Input required')),
     OTP: Yup.string().required(t('Input required')),
     password: yupPasswordValidation(t),
   });

src/containers/MyAccount/MyAccount.test.tsx

@@ -22,7 +22,7 @@ const mockedAxios = axios as any;
 const user = userEvent.setup();
 
 const wrapper = (
-  <MockedProvider mocks={mocks} addTypename={false}>
+  <MockedProvider mocks={mocks}>
     <MemoryRouter>
       <MyAccount />
     </MemoryRouter>
@@ -198,4 +198,40 @@ describe('<MyAccount />', () => {
     const saveButton = screen.getByText('Save');
     await user.click(saveButton);
   });
+
+  test('update profile (name and email) flow', async () => {
+    const { container } = render(wrapper);
+
+    await screen.findByTestId('MyAccount');
+
+    // change email
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+
+    // save button should appear
+    const saveButton = await screen.findByText('Save');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Password updated successfully!')).toBeInTheDocument();
+    });
+  });
+
+  test('update profile error flow', async () => {
+    const { container } = render(wrapper);
+
+    await screen.findByTestId('MyAccount');
+
+    // change email to one that triggers an error
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+
+    // save button should appear
+    const saveButton = await screen.findByText('Save');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Email already exists')).toBeInTheDocument();
+    });
+  });
 });

src/containers/MyAccount/MyAccount.tsx

@@ -50,14 +50,20 @@ export const MyAccount = () => {
   // set the mutation to update the logged in user password
   const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER, {
     onCompleted: (data) => {
-      if (data.updateCurrentUser.errors) {
-        if (data.updateCurrentUser.errors[0].message === 'incorrect_code') {
+      if (data.updateCurrentUser.errors && data.updateCurrentUser.errors.length > 0) {
+        const error = data.updateCurrentUser.errors[0];
+        if (error.message === 'incorrect_code') {
           setToastMessageInfo({ severity: 'error', message: t('Please enter a valid OTP') });
-        } else {
+        } else if (error.message === 'Too many attempts') {
           setToastMessageInfo({
             severity: 'error',
             message: t('Too many attempts, please retry after sometime.'),
           });
+        } else {
+          setToastMessageInfo({
+            severity: 'error',
+            message: t(error.message),
+          });
         }
       } else {
         setShowOTPButton(true);
@@ -139,6 +145,11 @@ export const MyAccount = () => {
     password: yupPasswordValidation(t),
   });
 
+  const UserFormSchema = Yup.object().shape({
+    name: Yup.string().required(t('Name is required.')),
+    email: Yup.string().email(t('Email is invalid')).required(t('Email is required.')),
+  });
+
   const userformFields = [
     {
       component: Input,
@@ -156,24 +167,43 @@ export const MyAccount = () => {
       component: Input,
       name: 'email',
       label: t('Email'),
-      disabled: true,
+      disabled: false,
     },
   ];
 
   const userForm = (
-    <Formik initialValues={{ name: userName, phone: userPhone, email: userEmail }} onSubmit={() => { }}>
-      <Form>
-        {userformFields.map((field) => (
-          <div className={styles.UserField} key={field.name}>
-            {field.label && (
-              <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
-                {field.label}
-              </Typography>
-            )}
-            <Field key={field.name} {...field}></Field>
-          </div>
-        ))}
-      </Form>
+    <Formik
+      initialValues={{ name: userName, phone: userPhone, email: userEmail }}
+      enableReinitialize={true}
+      validationSchema={UserFormSchema}
+      onSubmit={(values) => {
+        setMessage(t('Password updated successfully!'));
+        updateCurrentUser({
+          variables: { input: { name: values.name, email: values.email } },
+        });
+      }}
+    >
+      {({ dirty, submitForm }) => (
+        <Form>
+          {userformFields.map((field) => (
+            <div className={styles.UserField} key={field.name}>
+              {field.label && (
+                <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
+                  {field.label}
+                </Typography>
+              )}
+              <Field key={field.name} {...field}></Field>
+            </div>
+          ))}
+          {dirty && (
+            <div className={styles.Buttons}>
+              <Button variant="contained" color="primary" onClick={submitForm} className={styles.Button}>
+                {t('Save')}
+              </Button>
+            </div>
+          )}
+        </Form>
+      )}
     </Formik>
   );
 

src/graphql/mutations/User.ts

@@ -39,6 +39,8 @@ export const UPDATE_CURRENT_USER = gql`
       user {
         id
         name
+        phone
+        email
       }
       errors {
         key

src/mocks/User.tsx

@@ -9,37 +9,45 @@ export const getCurrentUserQuery = {
   result: {
     data: {
       currentUser: {
+        __typename: 'UserWrapper',
         user: {
+          __typename: 'User',
           id: '1',
           name: 'John Doe',
           phone: '+919820198765',
-          roles: ['admin'],
+          roles: ['Admin'],
           email: '[email protected]',
           contact: {
+            __typename: 'Contact',
             id: '1',
             name: 'Glific user',
             phone: '9876543210',
           },
           accessRoles: [
             {
+              __typename: 'Role',
               id: '1',
               label: 'Admin',
             },
           ],
           groups: [
             {
+              __typename: 'Group',
               id: '1',
               label: 'Default Collection',
               description: '',
             },
           ],
           organization: {
+            __typename: 'Organization',
             id: '1',
             contact: {
+              __typename: 'Contact',
               phone: '917834811114',
             },
           },
           language: {
+            __typename: 'Language',
             id: '1',
             locale: 'en',
           },
@@ -58,6 +66,7 @@ export const getUsersQuery = {
     data: {
       users: [
         {
+          __typename: 'User',
           id: '1',
           name: 'John Doe',
         },
@@ -79,6 +88,7 @@ export const updateUserQuery = [
           user: {
             id: '2',
             name: 'Updated Name',
+            phone: '+919820198765',
             email: '[email protected]',
           },
         },
@@ -93,7 +103,7 @@ export const updateUserQuery = [
     result: {
       data: {
         updateCurrentUser: {
-          errors: [{ message: 'incorrect_code' }],
+          errors: [{ key: 'otp', message: 'incorrect_code' }],
           user: null,
         },
       },
@@ -107,7 +117,7 @@ export const updateUserQuery = [
     result: {
       data: {
         updateCurrentUser: {
-          errors: [{ message: 'Too many attempts' }],
+          errors: [{ key: 'otp', message: 'Too many attempts' }],
           user: null,
         },
       },
@@ -122,6 +132,44 @@ export const updateUserQuery = [
       data: {
         updateCurrentUser: {
           errors: null,
+          user: {
+            id: '1',
+            name: 'John Doe',
+            phone: '+919820198765',
+            email: '[email protected]',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_CURRENT_USER,
+      variables: { input: { name: 'John Doe', email: '[email protected]' } },
+    },
+    result: {
+      data: {
+        updateCurrentUser: {
+          errors: null,
+          user: {
+            id: '1',
+            name: 'John Doe',
+            phone: '+919820198765',
+            email: '[email protected]',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_CURRENT_USER,
+      variables: { input: { name: 'John Doe', email: '[email protected]' } },
+    },
+    result: {
+      data: {
+        updateCurrentUser: {
+          errors: [{ key: 'email', message: 'Email already exists' }],
           user: null,
         },
       },