diff --git a/packages/twenty-front/src/modules/auth/hooks/useSignOutAndRedirect.ts b/packages/twenty-front/src/modules/auth/hooks/useSignOutAndRedirect.ts
new file mode 100644
index 000000000..a9c2c7baf
--- /dev/null
+++ b/packages/twenty-front/src/modules/auth/hooks/useSignOutAndRedirect.ts
@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAuth } from '@/auth/hooks/useAuth';
+import { AppPath } from '@/types/AppPath';
+
+export const useSignOutAndRedirect = () => {
+ const { signOut } = useAuth();
+ const navigate = useNavigate();
+
+ return useCallback(() => {
+ signOut();
+ navigate(AppPath.SignInUp);
+ }, [signOut, navigate]);
+};
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index 93dc31980..9986414ae 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import {
IconApps,
@@ -16,10 +14,9 @@ import {
IconUsers,
} from 'twenty-ui';
-import { useAuth } from '@/auth/hooks/useAuth';
+import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
import { billingState } from '@/client-config/states/billingState';
import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
-import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
@@ -27,13 +24,7 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
export const SettingsNavigationDrawerItems = () => {
- const navigate = useNavigate();
- const { signOut } = useAuth();
-
- const handleLogout = useCallback(() => {
- signOut();
- navigate(AppPath.SignInUp);
- }, [signOut, navigate]);
+ const handleLogout = useSignOutAndRedirect();
const billing = useRecoilValue(billingState);
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 c35072087..12cdc2a12 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx
@@ -1,10 +1,8 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
import { useRecoilValue } from 'recoil';
-import { useAuth } from '@/auth/hooks/useAuth';
+import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
import { currentUserState } from '@/auth/states/currentUserState';
-import { AppPath } from '@/types/AppPath';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
@@ -17,13 +15,7 @@ export const DeleteAccount = () => {
const [deleteUserAccount] = useDeleteUserAccountMutation();
const currentUser = useRecoilValue(currentUserState);
const userEmail = currentUser?.email;
- const { signOut } = useAuth();
- const navigate = useNavigate();
-
- const handleLogout = useCallback(() => {
- signOut();
- navigate(AppPath.SignInUp);
- }, [signOut, navigate]);
+ const handleLogout = useSignOutAndRedirect();
const deleteAccount = async () => {
await deleteUserAccount();
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 798dab669..5c32f4421 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx
@@ -1,10 +1,8 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
import { useRecoilValue } from 'recoil';
-import { useAuth } from '@/auth/hooks/useAuth';
+import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
import { currentUserState } from '@/auth/states/currentUserState';
-import { AppPath } from '@/types/AppPath';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import {
ConfirmationModal,
@@ -19,13 +17,8 @@ export const DeleteWorkspace = () => {
const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
const currentUser = useRecoilValue(currentUserState);
const userEmail = currentUser?.email;
- const { signOut } = useAuth();
- const navigate = useNavigate();
- const handleLogout = useCallback(() => {
- signOut();
- navigate(AppPath.SignInUp);
- }, [signOut, navigate]);
+ const handleLogout = useSignOutAndRedirect();
const deleteWorkspace = async () => {
await deleteCurrentWorkspace();
diff --git a/packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts b/packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts
new file mode 100644
index 000000000..3197c6d9e
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts
@@ -0,0 +1 @@
+export const CAL_LINK = 'https://cal.com/team/twenty/talk-to-us';
diff --git a/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx
index 882e39df9..aca84dad1 100644
--- a/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx
+++ b/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx
@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
import { SubTitle } from '@/auth/components/SubTitle';
import { Title } from '@/auth/components/Title';
+import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
import { SubscriptionBenefit } from '@/billing/components/SubscriptionBenefit';
import { SubscriptionCard } from '@/billing/components/SubscriptionCard';
import { billingState } from '@/client-config/states/billingState';
@@ -13,6 +14,8 @@ import { Loader } from '@/ui/feedback/loader/components/Loader';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { MainButton } from '@/ui/input/button/components/MainButton';
import { CardPicker } from '@/ui/input/components/CardPicker';
+import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
+import { CAL_LINK } from '@/ui/navigation/link/constants/Cal';
import {
ProductPriceEntity,
useCheckoutSessionMutation,
@@ -42,6 +45,32 @@ const StyledBenefitsContainer = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
+const StyledLinkGroup = styled.div`
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: ${({ theme }) => theme.spacing(1)};
+ justify-content: center;
+ margin-top: ${({ theme }) => theme.spacing(4)};
+
+ > span {
+ background-color: ${({ theme }) => theme.font.color.light};
+ border-radius: 50%;
+ height: 2px;
+ width: 2px;
+ }
+`;
+
+const benefits = [
+ 'Full access',
+ 'Unlimited contacts',
+ 'Email integration',
+ 'Custom objects',
+ 'API & Webhooks',
+ 'Frequent updates',
+ 'And much more',
+];
+
export const ChooseYourPlan = () => {
const billing = useRecoilValue(billingState);
@@ -65,6 +94,8 @@ export const ChooseYourPlan = () => {
};
};
+ const handleLogout = useSignOutAndRedirect();
+
const computeInfo = (
price: ProductPriceEntity,
prices: ProductPriceEntity[],
@@ -131,13 +162,9 @@ export const ChooseYourPlan = () => {
))}
- Full access
- Unlimited contacts
- Email integration
- Custom objects
- API & Webhooks
- Frequent updates
- And much more
+ {benefits.map((benefit, index) => (
+ {benefit}
+ ))}
{
Icon={() => isSubmitting && }
disabled={isSubmitting}
/>
+
+ Log out
+
+
+ Book a Call
+
+
>
)
);