From a1c95b92ab148ab720fbfb3692b44635de9f35b1 Mon Sep 17 00:00:00 2001 From: Orinami Olatunji <16918891+orinamio@users.noreply.github.com> Date: Mon, 6 May 2024 09:48:34 +0100 Subject: [PATCH] feat: add sign out and book a call buttons to "Choose your plan" page (#5292) Resolves #5281 buttions-light buttons-dark --- .../auth/hooks/useSignOutAndRedirect.ts | 15 ++++++ .../SettingsNavigationDrawerItems.tsx | 13 +---- .../profile/components/DeleteAccount.tsx | 14 ++---- .../profile/components/DeleteWorkspace.tsx | 13 ++--- .../ui/navigation/link/constants/Cal.ts | 1 + .../src/pages/auth/ChooseYourPlan.tsx | 48 ++++++++++++++++--- 6 files changed, 65 insertions(+), 39 deletions(-) create mode 100644 packages/twenty-front/src/modules/auth/hooks/useSignOutAndRedirect.ts create mode 100644 packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts 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 + + ) );