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>
This commit is contained in:
karthik
2024-03-22 17:40:01 -04:00
committed by GitHub
parent 3ea8589c0d
commit 0315f35979
17 changed files with 39 additions and 58 deletions

View File

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

View File

@ -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;
}

View File

@ -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');
}
});
});

View File

@ -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: [],

View File

@ -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
Agreement.
By using Twenty, you agree to the Terms of Service and Privacy Policy.
</FooterNote>
)}
</>

View File

@ -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,
);

View File

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

View File

@ -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');

View File

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

View File

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

View File

@ -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',

View File

@ -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>
);
};

View File

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

View File

@ -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: [

View File

@ -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');

View File

@ -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:

View File

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