mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 17:22:18 +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,
|
marginTop: 65,
|
||||||
marginBottom: 40,
|
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 { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
|
||||||
import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
|
import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
|
||||||
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
|
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
|
||||||
|
import { UserPlanButton } from '../../auth/user-plan-button';
|
||||||
import type {
|
import type {
|
||||||
GeneralSettingKeys,
|
GeneralSettingKeys,
|
||||||
GeneralSettingList,
|
GeneralSettingList,
|
||||||
@ -52,9 +53,13 @@ export const UserInfo = ({
|
|||||||
<Avatar size={28} name={user.name} url={user.image} className="avatar" />
|
<Avatar size={28} name={user.name} url={user.image} className="avatar" />
|
||||||
|
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
<div className="name-container">
|
||||||
<div className="name" title={user.name}>
|
<div className="name" title={user.name}>
|
||||||
{user.name}
|
{user.name}
|
||||||
</div>
|
</div>
|
||||||
|
<UserPlanButton />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="email" title={user.email}>
|
<div className="email" title={user.email}>
|
||||||
{user.email}
|
{user.email}
|
||||||
</div>
|
</div>
|
||||||
|
@ -94,7 +94,6 @@ export const currentWorkspaceLabel = style({
|
|||||||
export const sidebarFooter = style({ padding: '0 16px' });
|
export const sidebarFooter = style({ padding: '0 16px' });
|
||||||
|
|
||||||
export const accountButton = style({
|
export const accountButton = style({
|
||||||
height: '42px',
|
|
||||||
padding: '4px 8px',
|
padding: '4px 8px',
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
@ -129,13 +128,21 @@ globalStyle(`${accountButton} .content`, {
|
|||||||
flexGrow: '1',
|
flexGrow: '1',
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
});
|
});
|
||||||
|
globalStyle(`${accountButton} .name-container`, {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
gap: '4px',
|
||||||
|
height: '22px',
|
||||||
|
});
|
||||||
globalStyle(`${accountButton} .name`, {
|
globalStyle(`${accountButton} .name`, {
|
||||||
fontSize: 'var(--affine-font-sm)',
|
fontSize: 'var(--affine-font-sm)',
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
flexGrow: 1,
|
height: '22px',
|
||||||
});
|
});
|
||||||
globalStyle(`${accountButton} .email`, {
|
globalStyle(`${accountButton} .email`, {
|
||||||
fontSize: 'var(--affine-font-xs)',
|
fontSize: 'var(--affine-font-xs)',
|
||||||
@ -144,4 +151,5 @@ globalStyle(`${accountButton} .email`, {
|
|||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
|
height: '20px',
|
||||||
});
|
});
|
||||||
|
@ -3,9 +3,10 @@ import { style } from '@vanilla-extract/css';
|
|||||||
export const userAccountContainer = style({
|
export const userAccountContainer = style({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
padding: '4px 0px 4px 12px',
|
padding: '4px 0px 4px 12px',
|
||||||
gap: '12px',
|
gap: '8px',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
|
width: '100%',
|
||||||
});
|
});
|
||||||
export const userEmail = style({
|
export const userEmail = style({
|
||||||
fontSize: 'var(--affine-font-sm)',
|
fontSize: 'var(--affine-font-sm)',
|
||||||
@ -14,5 +15,12 @@ export const userEmail = style({
|
|||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
whiteSpace: 'nowrap',
|
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,
|
openSettingModalAtom,
|
||||||
openSignOutModalAtom,
|
openSignOutModalAtom,
|
||||||
} from '../../../../../atoms';
|
} from '../../../../../atoms';
|
||||||
|
import { UserPlanButton } from '../../../../affine/auth/user-plan-button';
|
||||||
import * as styles from './index.css';
|
import * as styles from './index.css';
|
||||||
|
|
||||||
const AccountMenu = ({ onEventEnd }: { onEventEnd?: () => void }) => {
|
const AccountMenu = ({ onEventEnd }: { onEventEnd?: () => void }) => {
|
||||||
@ -73,7 +74,10 @@ export const UserAccountItem = ({
|
|||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.userAccountContainer}>
|
<div className={styles.userAccountContainer}>
|
||||||
|
<div className={styles.leftContainer}>
|
||||||
<div className={styles.userEmail}>{email}</div>
|
<div className={styles.userEmail}>{email}</div>
|
||||||
|
<UserPlanButton />
|
||||||
|
</div>
|
||||||
<Menu
|
<Menu
|
||||||
items={<AccountMenu onEventEnd={onEventEnd} />}
|
items={<AccountMenu onEventEnd={onEventEnd} />}
|
||||||
contentOptions={{
|
contentOptions={{
|
||||||
|
Loading…
Reference in New Issue
Block a user