From 0315f35979c8bc25a0f7754f73edbdef825b4a35 Mon Sep 17 00:00:00 2001 From: karthik <43676649+brkuhgk@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:40:01 -0400 Subject: [PATCH] Replace Terms & Conditions with Sign Up Link on Sign In #4502 (#4617) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Félix Malfait --- packages/twenty-front/src/App.tsx | 3 +-- .../src/effect-components/PageChangeEffect.tsx | 15 ++++----------- .../hooks/__tests__/useApolloFactory.test.tsx | 6 +++--- .../modules/apollo/hooks/useApolloFactory.ts | 5 ++--- .../auth/sign-in-up/components/SignInUpForm.tsx | 17 ++++++++++++----- .../auth/sign-in-up/hooks/useSignInUp.tsx | 4 ++-- .../auth/sign-in-up/hooks/useSignInUpForm.ts | 2 +- .../SettingsNavigationDrawerItems.tsx | 2 +- .../profile/components/DeleteAccount.tsx | 2 +- .../profile/components/DeleteWorkspace.tsx | 2 +- .../twenty-front/src/modules/types/AppPath.ts | 3 +-- .../src/pages/auth/PasswordReset.tsx | 15 +-------------- .../src/pages/auth/VerifyEffect.tsx | 2 +- .../pages/auth/__stories__/SignInUp.stories.tsx | 2 +- .../src/utils/__tests__/title-utils.test.ts | 5 +++-- packages/twenty-front/src/utils/title-utils.ts | 6 ++---- .../ui/layout/header/callToAction.tsx | 6 ++---- 17 files changed, 39 insertions(+), 58 deletions(-) diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx index 71f0e211c..38b93730a 100644 --- a/packages/twenty-front/src/App.tsx +++ b/packages/twenty-front/src/App.tsx @@ -57,8 +57,7 @@ export const App = () => { } /> - } /> - } /> + } /> } /> } /> } /> diff --git a/packages/twenty-front/src/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/effect-components/PageChangeEffect.tsx index 820ce959c..678223767 100644 --- a/packages/twenty-front/src/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/effect-components/PageChangeEffect.tsx @@ -57,8 +57,7 @@ export const PageChangeEffect = () => { useEffect(() => { const isMatchingOngoingUserCreationRoute = - isMatchingLocation(AppPath.SignUp) || - isMatchingLocation(AppPath.SignIn) || + isMatchingLocation(AppPath.SignInUp) || 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): { - setHotkeyScope(PageHotkeyScope.SignInUp); - break; - } - case isMatchingLocation(AppPath.SignUp): { + case isMatchingLocation(AppPath.SignInUp): { setHotkeyScope(PageHotkeyScope.SignInUp); break; } diff --git a/packages/twenty-front/src/modules/apollo/hooks/__tests__/useApolloFactory.test.tsx b/packages/twenty-front/src/modules/apollo/hooks/__tests__/useApolloFactory.test.tsx index d1608ab93..59f99306a 100644 --- a/packages/twenty-front/src/modules/apollo/hooks/__tests__/useApolloFactory.test.tsx +++ b/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 }) => ( {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'); } }); }); diff --git a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts b/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts index 4da2bc786..6ff323b06 100644 --- a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts +++ b/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.SignUp) && + !isMatchingLocation(AppPath.SignInUp) && !isMatchingLocation(AppPath.Invite) && !isMatchingLocation(AppPath.ResetPassword) ) { - navigate(AppPath.SignIn); + navigate(AppPath.SignInUp); } }, extraLinks: [], diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 6b2c5f236..98b12f5ea 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/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 = () => { /> - {signInUpStep === SignInUpStep.Password ? ( + {signInUpStep === SignInUpStep.Password && ( Forgot your password? - ) : ( + )} + {signInUpStep === SignInUpStep.Init && ( - By using Twenty, you agree to the Terms of Service and Data Processing - Agreement. + By using Twenty, you agree to the Terms of Service and Privacy Policy. )} diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx index 5433e8f0d..c14994363 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx @@ -39,7 +39,7 @@ export const useSignInUp = (form: UseFormReturn
) => { ); const [signInUpMode, setSignInUpMode] = useState(() => { - return isMatchingLocation(AppPath.SignIn) + return isMatchingLocation(AppPath.SignInUp) ? SignInUpMode.SignIn : SignInUpMode.SignUp; }); @@ -53,7 +53,7 @@ export const useSignInUp = (form: UseFormReturn) => { const continueWithEmail = useCallback(() => { setSignInUpStep(SignInUpStep.Email); setSignInUpMode( - isMatchingLocation(AppPath.SignIn) + isMatchingLocation(AppPath.SignInUp) ? SignInUpMode.SignIn : SignInUpMode.SignUp, ); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts index 591abf368..77a555fa9 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts +++ b/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'); } diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx index fb3ab5f1c..ed8fc98c0 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx +++ b/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'); diff --git a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx index d3e52ad09..c35072087 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx +++ b/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 () => { diff --git a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx b/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx index 4264bd928..798dab669 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx +++ b/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 () => { diff --git a/packages/twenty-front/src/modules/types/AppPath.ts b/packages/twenty-front/src/modules/types/AppPath.ts index e450d0fe6..464760d7a 100644 --- a/packages/twenty-front/src/modules/types/AppPath.ts +++ b/packages/twenty-front/src/modules/types/AppPath.ts @@ -1,8 +1,7 @@ export enum AppPath { // Not logged-in Verify = '/verify', - SignIn = '/sign-in', - SignUp = '/sign-up', + SignInUp = '/welcome', Invite = '/invite/:workspaceInviteHash', ResetPassword = '/reset-password/:passwordResetToken', diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 36def739b..579537d62 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/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 = () => { )} - - By using Twenty, you agree to the Terms of Service and Data Processing - Agreement. - ); }; diff --git a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx b/packages/twenty-front/src/pages/auth/VerifyEffect.tsx index cda60b1bc..81cb71065 100644 --- a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx +++ b/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); diff --git a/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx index 2c40e0359..9ff9f3035 100644 --- a/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx +++ b/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx @@ -18,7 +18,7 @@ const meta: Meta = { title: 'Pages/Auth/SignInUp', component: SignInUp, decorators: [PageDecorator], - args: { routePath: AppPath.SignIn }, + args: { routePath: AppPath.SignInUp }, parameters: { msw: { handlers: [ diff --git a/packages/twenty-front/src/utils/__tests__/title-utils.test.ts b/packages/twenty-front/src/utils/__tests__/title-utils.test.ts index 9ed6cf524..1a4e53d33 100644 --- a/packages/twenty-front/src/utils/__tests__/title-utils.test.ts +++ b/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('/sign-up')).toBe('Sign Up'); + expect(getPageTitleFromPath('/welcome')).toBe( + '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'); diff --git a/packages/twenty-front/src/utils/title-utils.ts b/packages/twenty-front/src/utils/title-utils.ts index a3de0171c..8723e9aa5 100644 --- a/packages/twenty-front/src/utils/title-utils.ts +++ b/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: - return 'Sign In'; - case AppPath.SignUp: - return 'Sign Up'; + case AppPath.SignInUp: + return 'Sign in or Create an account'; case AppPath.Invite: return 'Invite'; case AppPath.CreateWorkspace: diff --git a/packages/twenty-website/src/app/_components/ui/layout/header/callToAction.tsx b/packages/twenty-website/src/app/_components/ui/layout/header/callToAction.tsx index bd0187910..c61145e87 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/header/callToAction.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/header/callToAction.tsx @@ -7,10 +7,8 @@ import { export const CallToAction = () => { return ( - - Sign in - - + Sign in + Get Started