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

packages/frontend/component/src/components/setting-components/share.css.ts

@@ -115,31 +115,19 @@ globalStyle(`${storageProgressWrapper} .storage-progress-desc`, {
 globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, {
   height: '8px',
   borderRadius: '4px',
-  backgroundColor: 'var(--affine-pure-black-10)',
+  backgroundColor: 'var(--affine-black-10)',
   overflow: 'hidden',
 });
 export const storageProgressBar = style({
   height: '100%',
   backgroundColor: 'var(--affine-processing-color)',
   selectors: {
-    '&.warning': {
-      // Wait for design
-      backgroundColor: '#FF7C09',
-    },
     '&.danger': {
       backgroundColor: 'var(--affine-error-color)',
     },
   },
 });
-export const storageExtendHint = style({
-  borderRadius: '4px',
-  padding: '4px 8px',
-  backgroundColor: 'var(--affine-background-secondary-color)',
-  color: 'var(--affine-text-secondary-color)',
-  fontSize: 'var(--affine-font-xs)',
-  lineHeight: '20px',
-  marginTop: 8,
-});
-globalStyle(`${storageExtendHint} a`, {
-  color: 'var(--affine-link-color)',
+
+export const storageButton = style({
+  padding: '4px 12px',
 });

packages/frontend/component/src/components/setting-components/storage-progess.tsx

@@ -1,6 +1,7 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
 import { Tooltip } from '@toeverything/components/tooltip';
+import bytes from 'bytes';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
@@ -10,20 +11,14 @@ export interface StorageProgressProgress {
   max: number;
   value: number;
   onUpgrade: () => void;
+  plan: string;
 }
 
-const transformBytesToMB = (bytes: number) => {
-  return (bytes / 1024 / 1024).toFixed(2);
-};
-
-const transformBytesToGB = (bytes: number) => {
-  return (bytes / 1024 / 1024 / 1024).toFixed(2);
-};
-
 export const StorageProgress = ({
   max: upperLimit,
   value,
   onUpgrade,
+  plan,
 }: StorageProgressProgress) => {
   const t = useAFFiNEI18N();
   const percent = useMemo(
@@ -31,51 +26,53 @@ export const StorageProgress = ({
     [upperLimit, value]
   );
 
-  const used = useMemo(() => transformBytesToMB(value), [value]);
-  const max = useMemo(() => transformBytesToGB(upperLimit), [upperLimit]);
+  const used = useMemo(() => bytes.format(value), [value]);
+  const max = useMemo(() => bytes.format(upperLimit), [upperLimit]);
+
+  const buttonType = useMemo(() => {
+    if (plan === 'Free') {
+      return 'primary';
+    }
+    return 'default';
+  }, [plan]);
 
   return (
-    <>
-      <div className={styles.storageProgressContainer}>
-        <div className={styles.storageProgressWrapper}>
-          <div className="storage-progress-desc">
-            <span>{t['com.affine.storage.used.hint']()}</span>
-            <span>
-              {used}MB/{max}GB
-            </span>
-          </div>
-
-          <div className="storage-progress-bar-wrapper">
-            <div
-              className={clsx(styles.storageProgressBar, {
-                warning: percent > 80,
-                danger: percent > 99,
-              })}
-              style={{ width: `${percent}%` }}
-            ></div>
-          </div>
-        </div>
-
-        <Tooltip content={t['com.affine.storage.disabled.hint']()}>
-          <span tabIndex={0}>
-            <Button disabled onClick={onUpgrade}>
-              {t['com.affine.storage.upgrade']()}
-            </Button>
+    <div className={styles.storageProgressContainer}>
+      <div className={styles.storageProgressWrapper}>
+        <div className="storage-progress-desc">
+          <span>{t['com.affine.storage.used.hint']()}</span>
+          <span>
+            {used}/{max}
+            {` (${plan} Plan)`}
           </span>
-        </Tooltip>
-      </div>
-      {percent > 80 ? (
-        <div className={styles.storageExtendHint}>
-          {t['com.affine.storage.extend.hint']()}
-          <a
-            href="https://community.affine.pro/c/insider-general/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {t['com.affine.storage.extend.link']()}
-          </a>
         </div>
-      ) : null}
-    </>
+
+        <div className="storage-progress-bar-wrapper">
+          <div
+            className={clsx(styles.storageProgressBar, {
+              danger: percent > 80,
+            })}
+            style={{ width: `${percent > 100 ? '100' : percent}%` }}
+          ></div>
+        </div>
+      </div>
+
+      <Tooltip
+        options={{ hidden: percent < 100 }}
+        content={
+          'You have reached the maximum capacity limit for your current account'
+        }
+      >
+        <span tabIndex={0}>
+          <Button
+            type={buttonType}
+            onClick={onUpgrade}
+            className={styles.storageButton}
+          >
+            {plan === 'Free' ? 'Upgrade' : 'Change'}
+          </Button>
+        </span>
+      </Tooltip>
+    </div>
   );
 };