mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
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">
This commit is contained in:
parent
77c0dee846
commit
a1c95b92ab
@ -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]);
|
||||
};
|
@ -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);
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -0,0 +1 @@
|
||||
export const CAL_LINK = 'https://cal.com/team/twenty/talk-to-us';
|
@ -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>
|
||||
<SubscriptionBenefit>Unlimited contacts</SubscriptionBenefit>
|
||||
<SubscriptionBenefit>Email integration</SubscriptionBenefit>
|
||||
<SubscriptionBenefit>Custom objects</SubscriptionBenefit>
|
||||
<SubscriptionBenefit>API & Webhooks</SubscriptionBenefit>
|
||||
<SubscriptionBenefit>Frequent updates</SubscriptionBenefit>
|
||||
<SubscriptionBenefit>And much more</SubscriptionBenefit>
|
||||
{benefits.map((benefit, index) => (
|
||||
<SubscriptionBenefit key={index}>{benefit}</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>
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user