From 7c846c443490059b6bbfd427f0cd60f37947f422 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 25 Nov 2024 07:32:17 +0000
Subject: [PATCH] fix(core): cannot view pricing page if not logged in (#8907)

Due to lifetime plan card show `Upgrade` button that require accout, should show `Login` instead
---
 .../general-setting/plans/lifetime/lifetime-plan.tsx | 12 +++++++++---
 .../setting/general-setting/plans/plan-card.tsx      |  7 +++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/lifetime/lifetime-plan.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/lifetime/lifetime-plan.tsx
index 1a8740f7f7..eff6c62168 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/lifetime/lifetime-plan.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/lifetime/lifetime-plan.tsx
@@ -1,10 +1,10 @@
 import { Button } from '@affine/component';
-import { SubscriptionService } from '@affine/core/modules/cloud';
+import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
 import { SubscriptionRecurring } from '@affine/graphql';
 import { Trans, useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 
-import { Upgrade } from '../plan-card';
+import { SignUpAction, Upgrade } from '../plan-card';
 import { BelieverCard } from './believer-card';
 import { BelieverBenefits } from './benefits';
 import * as styles from './style.css';
@@ -12,6 +12,8 @@ import * as styles from './style.css';
 export const LifetimePlan = () => {
   const t = useI18n();
   const subscriptionService = useService(SubscriptionService);
+  const loggedIn =
+    useLiveData(useService(AuthService).session.status$) === 'authenticated';
 
   const readableLifetimePrice = useLiveData(
     subscriptionService.prices.readableLifetimePrice$
@@ -32,7 +34,11 @@ export const LifetimePlan = () => {
 
       <div className={styles.price}>{readableLifetimePrice}</div>
 
-      {isBeliever ? (
+      {!loggedIn ? (
+        <SignUpAction className={styles.purchase}>
+          {t['com.affine.payment.sign-up-free']()}
+        </SignUpAction>
+      ) : isBeliever ? (
         <Button className={styles.purchase} size="default" disabled>
           {t['com.affine.payment.lifetime.purchased']()}
         </Button>
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx
index 369a28d57c..f7fce4c639 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx
@@ -383,7 +383,10 @@ const ChangeRecurring = ({
   );
 };
 
-const SignUpAction = ({ children }: PropsWithChildren) => {
+export const SignUpAction = ({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>) => {
   const setOpen = useSetAtom(authAtom);
 
   const onClickSignIn = useCallback(() => {
@@ -396,7 +399,7 @@ const SignUpAction = ({ children }: PropsWithChildren) => {
   return (
     <Button
       onClick={onClickSignIn}
-      className={styles.planAction}
+      className={clsx(styles.planAction, className)}
       variant="primary"
     >
       {children}