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

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

packages/frontend/core/src/pages/sign-in.tsx

@@ -1,11 +1,13 @@
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { useAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { authAtom } from '../atoms';
-import { AuthPanel } from '../components/affine/auth';
+import { AuthPanel, type AuthProps } from '../components/affine/auth';
+import { SubscriptionRedirect } from '../components/affine/auth/subscription-redirect';
+import { useSubscriptionSearch } from '../components/affine/auth/use-subscription';
 import { useCurrentLoginStatus } from '../hooks/affine/use-current-login-status';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 
@@ -15,15 +17,31 @@ interface LocationState {
   };
 }
 export const Component = () => {
+  const paymentRedirectRef = useRef<'redirect' | 'ignore' | null>(null);
   const [{ state, email = '', emailType = 'changePassword' }, setAuthAtom] =
     useAtom(authAtom);
   const loginStatus = useCurrentLoginStatus();
   const location = useLocation() as LocationState;
   const navigate = useNavigate();
   const { jumpToIndex } = useNavigateHelper();
+  const subscriptionData = useSubscriptionSearch();
+
+  const isLoggedIn = loginStatus === 'authenticated';
+
+  // Check payment redirect once after session loaded, to avoid unnecessary page rendering.
+  if (loginStatus !== 'loading' && !paymentRedirectRef.current) {
+    // If user is logged in and visit sign in page with subscription query, redirect to stripe payment page immediately.
+    // Otherwise, user will login through email, and then redirect to payment page.
+    paymentRedirectRef.current =
+      subscriptionData && isLoggedIn ? 'redirect' : 'ignore';
+  }
 
   useEffect(() => {
-    if (loginStatus === 'authenticated') {
+    if (paymentRedirectRef.current === 'redirect') {
+      return;
+    }
+
+    if (isLoggedIn) {
       if (location.state?.callbackURL) {
         navigate(location.state.callbackURL, {
           replace: true,
@@ -35,35 +53,46 @@ export const Component = () => {
   }, [
     jumpToIndex,
     location.state?.callbackURL,
-    loginStatus,
     navigate,
     setAuthAtom,
+    subscriptionData,
+    isLoggedIn,
   ]);
 
+  const onSetEmailType = useCallback(
+    (emailType: AuthProps['emailType']) => {
+      setAuthAtom(prev => ({ ...prev, emailType }));
+    },
+    [setAuthAtom]
+  );
+
+  const onSetAuthState = useCallback(
+    (state: AuthProps['state']) => {
+      setAuthAtom(prev => ({ ...prev, state }));
+    },
+    [setAuthAtom]
+  );
+
+  const onSetAuthEmail = useCallback(
+    (email: AuthProps['email']) => {
+      setAuthAtom(prev => ({ ...prev, email }));
+    },
+    [setAuthAtom]
+  );
+
+  if (paymentRedirectRef.current === 'redirect') {
+    return <SubscriptionRedirect />;
+  }
+
   return (
     <SignInPageContainer>
       <AuthPanel
         state={state}
         email={email}
         emailType={emailType}
-        setEmailType={useCallback(
-          emailType => {
-            setAuthAtom(prev => ({ ...prev, emailType }));
-          },
-          [setAuthAtom]
-        )}
-        setAuthState={useCallback(
-          state => {
-            setAuthAtom(prev => ({ ...prev, state }));
-          },
-          [setAuthAtom]
-        )}
-        setAuthEmail={useCallback(
-          email => {
-            setAuthAtom(prev => ({ ...prev, email }));
-          },
-          [setAuthAtom]
-        )}
+        setEmailType={onSetEmailType}
+        setAuthState={onSetAuthState}
+        setAuthEmail={onSetAuthEmail}
       />
     </SignInPageContainer>
   );