feat(core): adapt storage progress to payment system (#4713)

packages/frontend/core/package.json

@@ -43,6 +43,7 @@
     "@react-hookz/web": "^23.1.0",
     "@toeverything/components": "^0.0.45",
     "async-call-rpc": "^6.3.1",
+    "bytes": "^3.1.2",
     "css-spring": "^4.1.0",
     "cssnano": "^6.0.1",
     "graphql": "^16.8.1",
@@ -75,6 +76,7 @@
     "@sentry/webpack-plugin": "^2.8.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.3.93",
+    "@types/bytes": "^3.1.3",
     "@types/lodash-es": "^4.17.9",
     "@types/webpack-env": "^1.18.2",
     "copy-webpack-plugin": "^11.0.0",

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -7,6 +7,7 @@ import {
 import {
   allBlobSizesQuery,
   removeAvatarMutation,
+  SubscriptionPlan,
   uploadAvatarMutation,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -14,17 +15,24 @@ import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
 import { Avatar } from '@toeverything/components/avatar';
 import { Button } from '@toeverything/components/button';
+import bytes from 'bytes';
 import { useSetAtom } from 'jotai';
 import {
   type FC,
   type MouseEvent,
   Suspense,
   useCallback,
+  useMemo,
   useState,
 } from 'react';
 
-import { authAtom, openSignOutModalAtom } from '../../../../atoms';
+import {
+  authAtom,
+  openSettingModalAtom,
+  openSignOutModalAtom,
+} from '../../../../atoms';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
+import { useUserSubscription } from '../../../../hooks/use-subscription';
 import { Upload } from '../../../pure/file-upload';
 import * as style from './style.css';
 
@@ -124,6 +132,7 @@ export const AvatarAndName = () => {
                 <Button
                   data-testid="save-user-name"
                   onClick={handleUpdateUserName}
+                  className={style.button}
                   style={{
                     marginLeft: '12px',
                   }}
@@ -146,7 +155,20 @@ const StoragePanel = () => {
     query: allBlobSizesQuery,
   });
 
-  const onUpgrade = useCallback(() => {}, []);
+  const [subscription] = useUserSubscription();
+  const plan = subscription?.plan ?? SubscriptionPlan.Free;
+  const maxLimit = useMemo(() => {
+    return bytes.parse(plan === SubscriptionPlan.Free ? '10GB' : '100GB');
+  }, [plan]);
+
+  const setSettingModalAtom = useSetAtom(openSettingModalAtom);
+  const onUpgrade = useCallback(() => {
+    setSettingModalAtom({
+      open: true,
+      activeTab: 'plans',
+      workspaceId: null,
+    });
+  }, [setSettingModalAtom]);
 
   return (
     <SettingRow
@@ -155,7 +177,8 @@ const StoragePanel = () => {
       spreadCol={false}
     >
       <StorageProgress
-        max={10737418240}
+        max={maxLimit}
+        plan={plan}
         value={data.collectAllBlobSizes.size}
         onUpgrade={onUpgrade}
       />
@@ -200,7 +223,7 @@ export const AccountSetting: FC = () => {
       />
       <AvatarAndName />
       <SettingRow name={t['com.affine.settings.email']()} desc={user.email}>
-        <Button onClick={onChangeEmail}>
+        <Button onClick={onChangeEmail} className={style.button}>
           {t['com.affine.settings.email.action']()}
         </Button>
       </SettingRow>
@@ -208,7 +231,7 @@ export const AccountSetting: FC = () => {
         name={t['com.affine.settings.password']()}
         desc={t['com.affine.settings.password.message']()}
       >
-        <Button onClick={onPasswordButtonClick}>
+        <Button onClick={onPasswordButtonClick} className={style.button}>
           {user.hasPassword
             ? t['com.affine.settings.password.action.change']()
             : t['com.affine.settings.password.action.set']()}

packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts

@@ -39,3 +39,7 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
   color: 'var(--affine-white)',
   fontSize: 'var(--affine-font-h-4)',
 });
+
+export const button = style({
+  padding: '4px 12px',
+});