songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure current user is only displayed when component is mounted

Browse Source
This commit is contained in:
javayhu 2025-07-24 01:14:53 +08:00
parent 0d04f6914e
commit 3cb0911cf4
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/pricing/pricing-card.tsx
View File

@ -9,6 +9,7 @@ import {
CardTitle, CardTitle,
} from '@/components/ui/card'; } from '@/components/ui/card';
import { useCurrentUser } from '@/hooks/use-current-user'; import { useCurrentUser } from '@/hooks/use-current-user';
import { useMounted } from '@/hooks/use-mounted';
import { useLocalePathname } from '@/i18n/navigation'; import { useLocalePathname } from '@/i18n/navigation';
import { formatPrice } from '@/lib/formatter'; import { formatPrice } from '@/lib/formatter';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@ -79,6 +80,7 @@ export function PricingCard({
const price = getPriceForPlan(plan, interval, paymentType); const price = getPriceForPlan(plan, interval, paymentType);
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const currentPath = useLocalePathname(); const currentPath = useLocalePathname();
const mounted = useMounted();
// console.log('pricing card, currentPath', currentPath); // console.log('pricing card, currentPath', currentPath);
// generate formatted price and price label // generate formatted price and price label
@ -152,7 +154,7 @@ export function PricingCard({
{/* show action buttons based on plans */} {/* show action buttons based on plans */}
{plan.isFree ? ( {plan.isFree ? (
currentUser ? ( mounted && currentUser ? (
<Button variant="outline" className="mt-4 w-full disabled"> <Button variant="outline" className="mt-4 w-full disabled">
{t('getStartedForFree')} {t('getStartedForFree')}
</Button> </Button>
@ -172,7 +174,7 @@ export function PricingCard({
{t('yourCurrentPlan')} {t('yourCurrentPlan')}
</Button> </Button>
) : isPaidPlan ? ( ) : isPaidPlan ? (
currentUser ? ( mounted && currentUser ? (
<CheckoutButton <CheckoutButton
userId={currentUser.id} userId={currentUser.id}
planId={plan.id} planId={plan.id}