feat: add sign out and book a call buttons to "Choose your plan" page (#5292)

Resolves #5281

<img width="399" alt="buttions-light"
src="https://github.com/twentyhq/twenty/assets/16918891/d1a0ba4e-696e-476b-a792-01ae19a06a55">
<img width="390" alt="buttons-dark"
src="https://github.com/twentyhq/twenty/assets/16918891/40bea83b-bc32-45ea-a522-ecf8239cfe51">

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]);
+};

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 handleLogout = useSignOutAndRedirect();
-  const { signOut } = useAuth();
-
-  const handleLogout = useCallback(() => {
-    signOut();
-    navigate(AppPath.SignInUp);
-  }, [signOut, navigate]);
 
   const billing = useRecoilValue(billingState);
 

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

@@ -1,10 +1,8 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 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 handleLogout = useSignOutAndRedirect();
-  const navigate = useNavigate();
-
-  const handleLogout = useCallback(() => {
-    signOut();
-    navigate(AppPath.SignInUp);
-  }, [signOut, navigate]);
 
   const deleteAccount = async () => {
     await deleteUserAccount();

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

@@ -1,10 +1,8 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 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(() => {
+  const handleLogout = useSignOutAndRedirect();
-    signOut();
-    navigate(AppPath.SignInUp);
-  }, [signOut, navigate]);
 
   const deleteWorkspace = async () => {
     await deleteCurrentWorkspace();

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

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 = () => {
           ))}
         </StyledChoosePlanContainer>
         <StyledBenefitsContainer>
-          <SubscriptionBenefit>Full access</SubscriptionBenefit>
+          {benefits.map((benefit, index) => (
-          <SubscriptionBenefit>Unlimited contacts</SubscriptionBenefit>
+            <SubscriptionBenefit key={index}>{benefit}</SubscriptionBenefit>
-          <SubscriptionBenefit>Email integration</SubscriptionBenefit>
+          ))}
-          <SubscriptionBenefit>Custom objects</SubscriptionBenefit>
-          <SubscriptionBenefit>API & Webhooks</SubscriptionBenefit>
-          <SubscriptionBenefit>Frequent updates</SubscriptionBenefit>
-          <SubscriptionBenefit>And much more</SubscriptionBenefit>
         </StyledBenefitsContainer>
         <MainButton
           title="Continue"
@@ -146,6 +173,13 @@ export const ChooseYourPlan = () => {
           Icon={() => isSubmitting && <Loader />}
           disabled={isSubmitting}
         />
+        <StyledLinkGroup>
+          <ActionLink onClick={handleLogout}>Log out</ActionLink>
+          <span />
+          <ActionLink href={CAL_LINK} target="_blank" rel="noreferrer">
+            Book a Call
+          </ActionLink>
+        </StyledLinkGroup>
       </>
     )
   );