mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 08:53:27 +03:00
feat(core): add account subscription status (#4707)
This commit is contained in:
parent
21604a2cad
commit
df77ffde9a
@ -62,3 +62,17 @@ export const accessMessage = style({
|
||||
marginTop: 65,
|
||||
marginBottom: 40,
|
||||
});
|
||||
|
||||
export const userPlanButton = style({
|
||||
display: 'flex',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
height: 20,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-pure-white)',
|
||||
backgroundColor: 'var(--affine-brand-color)',
|
||||
padding: '0 4px',
|
||||
borderRadius: 4,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
@ -0,0 +1,34 @@
|
||||
import { SubscriptionPlan } from '@affine/graphql';
|
||||
import Tooltip from '@toeverything/components/tooltip';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { openSettingModalAtom } from '../../../atoms';
|
||||
import { useUserSubscription } from '../../../hooks/use-subscription';
|
||||
import * as styles from './style.css';
|
||||
|
||||
export const UserPlanButton = () => {
|
||||
const [subscription] = useUserSubscription();
|
||||
const plan = subscription?.plan ?? SubscriptionPlan.Free;
|
||||
|
||||
const setSettingModalAtom = useSetAtom(openSettingModalAtom);
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setSettingModalAtom({
|
||||
open: true,
|
||||
activeTab: 'plans',
|
||||
workspaceId: null,
|
||||
});
|
||||
},
|
||||
[setSettingModalAtom]
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip content={'See all plans'} side="top">
|
||||
<div className={styles.userPlanButton} onClick={handleClick}>
|
||||
{plan}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
@ -20,6 +20,7 @@ import { authAtom } from '../../../../atoms';
|
||||
import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
|
||||
import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
|
||||
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
|
||||
import { UserPlanButton } from '../../auth/user-plan-button';
|
||||
import type {
|
||||
GeneralSettingKeys,
|
||||
GeneralSettingList,
|
||||
@ -52,9 +53,13 @@ export const UserInfo = ({
|
||||
<Avatar size={28} name={user.name} url={user.image} className="avatar" />
|
||||
|
||||
<div className="content">
|
||||
<div className="name" title={user.name}>
|
||||
{user.name}
|
||||
<div className="name-container">
|
||||
<div className="name" title={user.name}>
|
||||
{user.name}
|
||||
</div>
|
||||
<UserPlanButton />
|
||||
</div>
|
||||
|
||||
<div className="email" title={user.email}>
|
||||
{user.email}
|
||||
</div>
|
||||
|
@ -94,7 +94,6 @@ export const currentWorkspaceLabel = style({
|
||||
export const sidebarFooter = style({ padding: '0 16px' });
|
||||
|
||||
export const accountButton = style({
|
||||
height: '42px',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
@ -129,13 +128,21 @@ globalStyle(`${accountButton} .content`, {
|
||||
flexGrow: '1',
|
||||
minWidth: 0,
|
||||
});
|
||||
globalStyle(`${accountButton} .name-container`, {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
gap: '4px',
|
||||
height: '22px',
|
||||
});
|
||||
globalStyle(`${accountButton} .name`, {
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontWeight: 600,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
flexGrow: 1,
|
||||
height: '22px',
|
||||
});
|
||||
globalStyle(`${accountButton} .email`, {
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
@ -144,4 +151,5 @@ globalStyle(`${accountButton} .email`, {
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
flexGrow: 1,
|
||||
height: '20px',
|
||||
});
|
||||
|
@ -3,9 +3,10 @@ import { style } from '@vanilla-extract/css';
|
||||
export const userAccountContainer = style({
|
||||
display: 'flex',
|
||||
padding: '4px 0px 4px 12px',
|
||||
gap: '12px',
|
||||
gap: '8px',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
});
|
||||
export const userEmail = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
@ -14,5 +15,12 @@ export const userEmail = style({
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: 'calc(100% - 36px)',
|
||||
});
|
||||
|
||||
export const leftContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
@ -14,6 +14,7 @@ import {
|
||||
openSettingModalAtom,
|
||||
openSignOutModalAtom,
|
||||
} from '../../../../../atoms';
|
||||
import { UserPlanButton } from '../../../../affine/auth/user-plan-button';
|
||||
import * as styles from './index.css';
|
||||
|
||||
const AccountMenu = ({ onEventEnd }: { onEventEnd?: () => void }) => {
|
||||
@ -73,7 +74,10 @@ export const UserAccountItem = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.userAccountContainer}>
|
||||
<div className={styles.userEmail}>{email}</div>
|
||||
<div className={styles.leftContainer}>
|
||||
<div className={styles.userEmail}>{email}</div>
|
||||
<UserPlanButton />
|
||||
</div>
|
||||
<Menu
|
||||
items={<AccountMenu onEventEnd={onEventEnd} />}
|
||||
contentOptions={{
|
||||
|
Loading…
Reference in New Issue
Block a user