feat: onboarding & profile edition (#507)

* feat: wip onboarding

* fix: generate graphql front

* wip: onboarding

* feat: login/register and edit profile

* fix: unused import

* fix: test

* Use DEBUG_MODE instead of STAGE and mute typescript depth exceed errors

* Fix seeds

* Fix onboarding when coming from google

* Fix

* Fix lint

* Fix ci

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/auth/CreateWorkspace.tsx

@@ -1,14 +1,19 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
+import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { ImageInput } from '@/ui/components/inputs/ImageInput';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { GET_CURRENT_USER } from '@/users/services';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledContentContainer = styled.div`
   width: 100%;
@@ -29,10 +34,38 @@ const StyledButtonContainer = styled.div`
 
 export function CreateWorkspace() {
   const navigate = useNavigate();
+  const onboardingStatus = useOnboardingStatus();
+
+  const [workspaceName, setWorkspaceName] = useState('');
+
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
 
   const handleCreate = useCallback(async () => {
-    navigate('/auth/create/profile');
-  }, [navigate]);
+    try {
+      if (!workspaceName) {
+        throw new Error('Workspace name is required');
+      }
+
+      const { data, errors } = await updateWorkspace({
+        variables: {
+          data: {
+            displayName: {
+              set: workspaceName,
+            },
+          },
+        },
+        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+      });
+
+      if (errors || !data?.updateWorkspace) {
+        throw errors;
+      }
+
+      navigate('/auth/create/profile');
+    } catch (error) {
+      console.error(error);
+    }
+  }, [navigate, updateWorkspace, workspaceName]);
 
   useHotkeys(
     'enter',
@@ -46,6 +79,12 @@ export function CreateWorkspace() {
     [handleCreate],
   );
 
+  useEffect(() => {
+    if (onboardingStatus !== OnboardingStatus.OngoingWorkspaceCreation) {
+      navigate('/auth/create/profile');
+    }
+  }, [onboardingStatus, navigate]);
+
   return (
     <>
       <Title>Create your workspace</Title>
@@ -63,11 +102,21 @@ export function CreateWorkspace() {
             title="Workspace name"
             description="The name of your organization"
           />
-          <TextInput value="" placeholder="Apple" fullWidth />
+          <TextInput
+            value={workspaceName}
+            placeholder="Apple"
+            onChange={setWorkspaceName}
+            fullWidth
+          />
         </StyledSectionContainer>
       </StyledContentContainer>
       <StyledButtonContainer>
-        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+        <MainButton
+          title="Continue"
+          onClick={handleCreate}
+          disabled={!workspaceName}
+          fullWidth
+        />
       </StyledButtonContainer>
     </>
   );