Replace Terms & Conditions with Sign Up Link on Sign In #4502 (#4617)

* Replace Terms & Conditions with Sign Up Link on Sign In #4502

* terms replaced with signup link

* begin fix (incomplete / do not merge)

* Revert

* Introduce welcome page

* Update Twenty website

---------

Co-authored-by: Mamatha Yarramaneni <mamathayarramaneni@Mamathas-Macbook.local>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/App.tsx

@@ -57,8 +57,7 @@ export const App = () => {
       <DefaultLayout>
         <Routes>
           <Route path={AppPath.Verify} element={<VerifyEffect />} />
-          <Route path={AppPath.SignIn} element={<SignInUp />} />
+          <Route path={AppPath.SignInUp} element={<SignInUp />} />
-          <Route path={AppPath.SignUp} element={<SignInUp />} />
           <Route path={AppPath.Invite} element={<SignInUp />} />
           <Route path={AppPath.ResetPassword} element={<PasswordReset />} />
           <Route path={AppPath.CreateWorkspace} element={<CreateWorkspace />} />

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -57,8 +57,7 @@ export const PageChangeEffect = () => {
 
   useEffect(() => {
     const isMatchingOngoingUserCreationRoute =
-      isMatchingLocation(AppPath.SignUp) ||
+      isMatchingLocation(AppPath.SignInUp) ||
-      isMatchingLocation(AppPath.SignIn) ||
       isMatchingLocation(AppPath.Invite) ||
       isMatchingLocation(AppPath.Verify);
 
@@ -73,7 +72,7 @@ export const PageChangeEffect = () => {
       enqueueSnackBar('workspace does not exist', {
         variant: 'error',
       });
-      navigate(AppPath.SignUp);
+      navigate(AppPath.SignInUp);
     };
 
     if (
@@ -81,7 +80,7 @@ export const PageChangeEffect = () => {
       !isMatchingOngoingUserCreationRoute &&
       !isMatchingLocation(AppPath.ResetPassword)
     ) {
-      navigate(AppPath.SignIn);
+      navigate(AppPath.SignInUp);
     } else if (
       isDefined(onboardingStatus) &&
       onboardingStatus === OnboardingStatus.Incomplete &&
@@ -141,8 +140,6 @@ export const PageChangeEffect = () => {
           navigateToSignUp();
         },
       });
-    } else if (isMatchingLocation(AppPath.SignUp) && isSignUpDisabled) {
-      navigate(AppPath.SignIn);
     }
   }, [
     enqueueSnackBar,
@@ -185,11 +182,7 @@ export const PageChangeEffect = () => {
         break;
       }
 
-      case isMatchingLocation(AppPath.SignIn): {
+      case isMatchingLocation(AppPath.SignInUp): {
-        setHotkeyScope(PageHotkeyScope.SignInUp);
-        break;
-      }
-      case isMatchingLocation(AppPath.SignUp): {
         setHotkeyScope(PageHotkeyScope.SignInUp);
         break;
       }

packages/twenty-front/src/modules/apollo/hooks/__tests__/useApolloFactory.test.tsx

@@ -22,7 +22,7 @@ jest.mock('react-router-dom', () => {
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
     <MemoryRouter
-      initialEntries={['/sign-in', '/verify', '/opportunities']}
+      initialEntries={['/welcome', '/verify', '/opportunities']}
       initialIndex={2}
     >
       {children}
@@ -44,7 +44,7 @@ describe('useApolloFactory', () => {
     expect(res).toHaveProperty('query');
   });
 
-  it('should navigate to /sign-in on unauthenticated error', async () => {
+  it('should navigate to /welcome on unauthenticated error', async () => {
     const errors = [
       {
         extensions: {
@@ -90,7 +90,7 @@ describe('useApolloFactory', () => {
       expect((error as ApolloError).message).toBe('Error message not found.');
 
       expect(mockNavigate).toHaveBeenCalled();
-      expect(mockNavigate).toHaveBeenCalledWith('/sign-in');
+      expect(mockNavigate).toHaveBeenCalledWith('/welcome');
     }
   });
 });

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -41,12 +41,11 @@ export const useApolloFactory = () => {
         setTokenPair(null);
         if (
           !isMatchingLocation(AppPath.Verify) &&
-          !isMatchingLocation(AppPath.SignIn) &&
+          !isMatchingLocation(AppPath.SignInUp) &&
-          !isMatchingLocation(AppPath.SignUp) &&
           !isMatchingLocation(AppPath.Invite) &&
           !isMatchingLocation(AppPath.ResetPassword)
         ) {
-          navigate(AppPath.SignIn);
+          navigate(AppPath.SignInUp);
         }
       },
       extraLinks: [],

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -94,10 +94,17 @@ export const SignInUpForm = () => {
       return `Join ${workspace?.displayName ?? ''} team`;
     }
 
+    if (
+      signInUpStep === SignInUpStep.Init ||
+      signInUpStep === SignInUpStep.Email
+    ) {
+      return 'Welcome to Twenty';
+    }
+
     return signInUpMode === SignInUpMode.SignIn
       ? 'Sign in to Twenty'
       : 'Sign up to Twenty';
-  }, [signInUpMode, workspace?.displayName, isInviteMode]);
+  }, [signInUpMode, workspace?.displayName, isInviteMode, signInUpStep]);
 
   const theme = useTheme();
 
@@ -230,14 +237,14 @@ export const SignInUpForm = () => {
           />
         </StyledForm>
       </StyledContentContainer>
-      {signInUpStep === SignInUpStep.Password ? (
+      {signInUpStep === SignInUpStep.Password && (
         <ActionLink onClick={handleResetPassword(form.getValues('email'))}>
           Forgot your password?
         </ActionLink>
-      ) : (
+      )}
+      {signInUpStep === SignInUpStep.Init && (
         <FooterNote>
-          By using Twenty, you agree to the Terms of Service and Data Processing
+          By using Twenty, you agree to the Terms of Service and Privacy Policy.
-          Agreement.
         </FooterNote>
       )}
     </>

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -39,7 +39,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
   );
 
   const [signInUpMode, setSignInUpMode] = useState<SignInUpMode>(() => {
-    return isMatchingLocation(AppPath.SignIn)
+    return isMatchingLocation(AppPath.SignInUp)
       ? SignInUpMode.SignIn
       : SignInUpMode.SignUp;
   });
@@ -53,7 +53,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
   const continueWithEmail = useCallback(() => {
     setSignInUpStep(SignInUpStep.Email);
     setSignInUpMode(
-      isMatchingLocation(AppPath.SignIn)
+      isMatchingLocation(AppPath.SignInUp)
         ? SignInUpMode.SignIn
         : SignInUpMode.SignUp,
     );

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts

@@ -29,7 +29,7 @@ export const useSignInUpForm = () => {
   });
 
   useEffect(() => {
-    if (isSignInPrefilled) {
+    if (isSignInPrefilled === true) {
       form.setValue('email', 'tim@apple.dev');
       form.setValue('password', 'Applecar2025');
     }

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -33,7 +33,7 @@ export const SettingsNavigationDrawerItems = () => {
 
   const handleLogout = useCallback(() => {
     signOut();
-    navigate(AppPath.SignIn);
+    navigate(AppPath.SignInUp);
   }, [signOut, navigate]);
 
   const isCalendarEnabled = useIsFeatureEnabled('IS_CALENDAR_ENABLED');

packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -22,7 +22,7 @@ export const DeleteAccount = () => {
 
   const handleLogout = useCallback(() => {
     signOut();
-    navigate(AppPath.SignIn);
+    navigate(AppPath.SignInUp);
   }, [signOut, navigate]);
 
   const deleteAccount = async () => {

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -24,7 +24,7 @@ export const DeleteWorkspace = () => {
 
   const handleLogout = useCallback(() => {
     signOut();
-    navigate(AppPath.SignIn);
+    navigate(AppPath.SignInUp);
   }, [signOut, navigate]);
 
   const deleteWorkspace = async () => {

packages/twenty-front/src/modules/types/AppPath.ts

@@ -1,8 +1,7 @@
 export enum AppPath {
   // Not logged-in
   Verify = '/verify',
-  SignIn = '/sign-in',
+  SignInUp = '/welcome',
-  SignUp = '/sign-up',
   Invite = '/invite/:workspaceInviteHash',
   ResetPassword = '/reset-password/:passwordResetToken',
 

packages/twenty-front/src/pages/auth/PasswordReset.tsx

@@ -66,15 +66,6 @@ const StyledInputContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
-const StyledFooterContainer = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.sm};
-  text-align: center;
-  max-width: 280px;
-`;
-
 export const PasswordReset = () => {
   const { enqueueSnackBar } = useSnackBar();
 
@@ -107,7 +98,7 @@ export const PasswordReset = () => {
         variant: 'error',
       });
       if (!isLoggedIn) {
-        navigate(AppPath.SignIn);
+        navigate(AppPath.SignInUp);
       } else {
         navigate(AppPath.Index);
       }
@@ -253,10 +244,6 @@ export const PasswordReset = () => {
           </StyledForm>
         )}
       </StyledContentContainer>
-      <StyledFooterContainer>
-        By using Twenty, you agree to the Terms of Service and Data Processing
-        Agreement.
-      </StyledFooterContainer>
     </StyledMainContainer>
   );
 };

packages/twenty-front/src/pages/auth/VerifyEffect.tsx

@@ -20,7 +20,7 @@ export const VerifyEffect = () => {
   useEffect(() => {
     const getTokens = async () => {
       if (!loginToken) {
-        navigate(AppPath.SignIn);
+        navigate(AppPath.SignInUp);
       } else {
         await verify(loginToken);
 

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/SignInUp',
   component: SignInUp,
   decorators: [PageDecorator],
-  args: { routePath: AppPath.SignIn },
+  args: { routePath: AppPath.SignInUp },
   parameters: {
     msw: {
       handlers: [

packages/twenty-front/src/utils/__tests__/title-utils.test.ts

@@ -3,8 +3,9 @@ import { getPageTitleFromPath } from '../title-utils';
 describe('title-utils', () => {
   it('should return the correct title for a given path', () => {
     expect(getPageTitleFromPath('/verify')).toBe('Verify');
-    expect(getPageTitleFromPath('/sign-in')).toBe('Sign In');
+    expect(getPageTitleFromPath('/welcome')).toBe(
-    expect(getPageTitleFromPath('/sign-up')).toBe('Sign Up');
+      'Sign in or Create an account',
+    );
     expect(getPageTitleFromPath('/invite/:workspaceInviteHash')).toBe('Invite');
     expect(getPageTitleFromPath('/create/workspace')).toBe('Create Workspace');
     expect(getPageTitleFromPath('/create/profile')).toBe('Create Profile');

packages/twenty-front/src/utils/title-utils.ts

@@ -6,10 +6,8 @@ export const getPageTitleFromPath = (pathname: string): string => {
   switch (pathname) {
     case AppPath.Verify:
       return 'Verify';
-    case AppPath.SignIn:
+    case AppPath.SignInUp:
-      return 'Sign In';
+      return 'Sign in or Create an account';
-    case AppPath.SignUp:
-      return 'Sign Up';
     case AppPath.Invite:
       return 'Invite';
     case AppPath.CreateWorkspace:

packages/twenty-website/src/app/_components/ui/layout/header/callToAction.tsx

@@ -7,10 +7,8 @@ import {
 export const CallToAction = () => {
   return (
     <CallToActionContainer>
-      <LinkNextToCTA href="https://github.com/twentyhq/twenty">
+      <LinkNextToCTA href="https://app.twenty.com">Sign in</LinkNextToCTA>
-        Sign in
+      <a href="https://app.twenty.com">
-      </LinkNextToCTA>
-      <a href="https://twenty.com/stripe-redirection">
         <StyledButton>Get Started</StyledButton>
       </a>
     </CallToActionContainer>