feat(profile): add capability to update user's full name

packages/backend/src/graphql/mutations/update-user.ts

@@ -4,6 +4,7 @@ type Params = {
   input: {
     email: string;
     password: string;
+    fullName: string;
   };
 };
 
@@ -15,6 +16,7 @@ const updateUser = async (
   const user = await context.currentUser.$query().patchAndFetch({
     email: params.input.email,
     password: params.input.password,
+    fullName: params.input.fullName,
   });
 
   return user;

packages/backend/src/graphql/schema.graphql

@@ -351,6 +351,7 @@ input CreateUserInput {
 input UpdateUserInput {
   email: String
   password: String
+  fullName: String
 }
 
 input ForgotPasswordInput {

packages/web/src/graphql/mutations/update-user.ts

@@ -5,6 +5,7 @@ export const UPDATE_USER = gql`
     updateUser(input: $input) {
       id
       email
+      fullName
       updatedAt
     }
   }

packages/web/src/locales/en.json

@@ -83,8 +83,11 @@
   "execution.noDataTitle": "No data",
   "execution.noDataMessage": "We successfully ran the execution, but there was no new data to process.",
   "profileSettings.title": "My Profile",
+  "profileSettings.fullName": "Full name",
+  "profileSettings.updateFullName": "Update full name",
   "profileSettings.email": "Email",
   "profileSettings.updateEmail": "Update email",
+  "profileSettings.updatedFullName": "Your full name has been updated.",
   "profileSettings.newPassword": "New password",
   "profileSettings.confirmNewPassword": "Confirm new password",
   "profileSettings.updatedEmail": "Your email has been updated.",

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

@@ -19,6 +19,12 @@ import { UPDATE_USER } from 'graphql/mutations/update-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
 
+const fullNameValidationSchema = yup
+  .object({
+    fullName: yup.string().required(),
+  })
+  .required();
+
 const emailValidationSchema = yup
   .object({
     email: yup.string().email().required(),
@@ -49,6 +55,22 @@ function ProfileSettings() {
   const formatMessage = useFormatMessage();
   const [updateUser] = useMutation(UPDATE_USER);
 
+  const handleFullNameUpdate = async (data: any) => {
+    const fullName = data.fullName;
+
+    await updateUser({
+      variables: {
+        input: {
+          fullName,
+        },
+      },
+    });
+
+    enqueueSnackbar(formatMessage('profileSettings.updatedFullName'), {
+      variant: 'success',
+    });
+  };
+
   const handleEmailUpdate = async (data: any) => {
     const email = data.email;
 
@@ -100,6 +122,42 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end">
+        <StyledForm
+            defaultValues={{ ...currentUser }}
+            onSubmit={handleFullNameUpdate}
+            resolver={yupResolver(fullNameValidationSchema)}
+            mode="onChange"
+            sx={{ mb: 2 }}
+            render={({
+              formState: {
+                errors,
+                touchedFields,
+                isDirty,
+                isValid,
+                isSubmitting,
+              },
+            }) => (
+              <>
+                <TextField
+                  fullWidth
+                  name="fullName"
+                  label={formatMessage('profileSettings.fullName')}
+                  margin="normal"
+                  error={touchedFields.fullName && !!errors?.fullName}
+                  helperText={errors?.fullName?.message || ' '}
+                />
+
+                <Button
+                  variant="contained"
+                  type="submit"
+                  disabled={!isDirty || !isValid || isSubmitting}
+                >
+                  {formatMessage('profileSettings.updateFullName')}
+                </Button>
+              </>
+            )}
+          />
+          
           <StyledForm
             defaultValues={{ ...currentUser}}
             onSubmit={handleEmailUpdate}