fix(core): visit /signin pay when already logged and subscribed (#4882)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts

@@ -7,3 +7,24 @@ export const loadingContainer = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
+
+export const subscriptionLayout = style({
+  margin: '10% auto',
+  maxWidth: '536px',
+});
+
+export const subscriptionBox = style({
+  padding: '48px 52px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const subscriptionTips = style({
+  margin: '20px 0',
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: '12px',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: '20px',
+});

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -1,16 +1,62 @@
+import { AffineShapeIcon } from '@affine/component/page-list';
 import type { SubscriptionRecurring } from '@affine/graphql';
-import { checkoutMutation } from '@affine/graphql';
-import { useMutation } from '@affine/workspace/affine/gql';
+import { checkoutMutation, subscriptionQuery } from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMutation, useQuery } from '@affine/workspace/affine/gql';
+import { Button } from '@toeverything/components/button';
 import { Loading } from '@toeverything/components/loading';
 import { nanoid } from 'nanoid';
-import { type FC, useEffect, useMemo } from 'react';
+import { type FC, Suspense, useCallback, useEffect, useMemo } from 'react';
 
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '../../../hooks/use-navigate-helper';
 import * as styles from './subscription-redirect.css';
 import { useSubscriptionSearch } from './use-subscription';
 
-export const SubscriptionRedirect: FC = () => {
+const CenterLoading = () => {
+  return (
+    <div className={styles.loadingContainer}>
+      <Loading size={40} />
+    </div>
+  );
+};
+
+const SubscriptionExisting = () => {
+  const t = useAFFiNEI18N();
+  const { jumpToIndex } = useNavigateHelper();
+
+  const onButtonClick = useCallback(() => {
+    jumpToIndex(RouteLogic.REPLACE);
+  }, [jumpToIndex]);
+
+  return (
+    <div className={styles.subscriptionLayout}>
+      <div className={styles.subscriptionBox}>
+        <AffineShapeIcon width={180} height={180} />
+        <p className={styles.subscriptionTips}>
+          {t['com.affine.payment.subscription.exist']()}
+        </p>
+        <Button
+          data-testid="upgrade-workspace-button"
+          onClick={onButtonClick}
+          size="extraLarge"
+          type="primary"
+        >
+          {t['com.affine.auth.open.affine']()}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const SubscriptionRedirectInner: FC = () => {
   const subscriptionData = useSubscriptionSearch();
   const idempotencyKey = useMemo(() => nanoid(), []);
+  const { data } = useQuery({
+    query: subscriptionQuery,
+  });
   const { trigger: checkoutSubscription } = useMutation({
     mutation: checkoutMutation,
   });
@@ -20,12 +66,18 @@ export const SubscriptionRedirect: FC = () => {
       throw new Error('No subscription data found');
     }
 
+    if (data.currentUser?.subscription) {
+      return;
+    }
+
     // This component will be render multiple times, use timeout to avoid multiple effect.
     const timeoutId = setTimeout(() => {
       const recurring = subscriptionData.recurring as SubscriptionRecurring;
-      checkoutSubscription({ recurring, idempotencyKey }).then(data => {
-        window.open(data.checkout, '_self', 'norefferer');
-      });
+      checkoutSubscription({ recurring, idempotencyKey }).then(
+        ({ checkout }) => {
+          window.open(checkout, '_self', 'norefferer');
+        }
+      );
     }, 100);
 
     return () => {
@@ -36,9 +88,17 @@ export const SubscriptionRedirect: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (data.currentUser?.subscription) {
+    return <SubscriptionExisting />;
+  }
+
+  return <CenterLoading />;
+};
+
+export const SubscriptionRedirect = () => {
   return (
-    <div className={styles.loadingContainer}>
-      <Loading size={40} />
-    </div>
+    <Suspense fallback={<CenterLoading />}>
+      <SubscriptionRedirectInner />
+    </Suspense>
   );
 };