From df77ffde9a0c202977079499c278143fd59573bb Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 24 Oct 2023 18:05:56 +0800
Subject: [PATCH] feat(core): add account subscription status (#4707)

---
 .../src/components/affine/auth/style.css.ts   | 14 ++++++++
 .../affine/auth/user-plan-button.tsx          | 34 +++++++++++++++++++
 .../setting-modal/setting-sidebar/index.tsx   |  9 +++--
 .../setting-sidebar/style.css.ts              | 12 +++++--
 .../user-account/index.css.ts                 | 12 +++++--
 .../user-account/index.tsx                    |  6 +++-
 6 files changed, 80 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

diff --git a/packages/frontend/core/src/components/affine/auth/style.css.ts b/packages/frontend/core/src/components/affine/auth/style.css.ts
index 23d814e1e1..a8331464f8 100644
--- a/packages/frontend/core/src/components/affine/auth/style.css.ts
+++ b/packages/frontend/core/src/components/affine/auth/style.css.ts
@@ -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',
+});
diff --git a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
new file mode 100644
index 0000000000..be9e4ca8ae
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
@@ -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>
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index 2719cab279..a2c8744e33 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -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>
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
index f867a5b83e..7b812e8f4f 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
@@ -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',
 });
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts
index 43275e4318..d2fdb27170 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts
@@ -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',
 });
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx
index 9f1a06bbf0..3e959c6690 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.tsx
@@ -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={{