diff --git a/frontend/src/app/(home)/page.tsx b/frontend/src/app/(home)/page.tsx index 08b6dcac..2c1e96d2 100644 --- a/frontend/src/app/(home)/page.tsx +++ b/frontend/src/app/(home)/page.tsx @@ -24,7 +24,9 @@ export default function Home() { {/* */} {/* */} - +
+ +
{/* */} {/* */} diff --git a/frontend/src/components/billing/account-billing-status.tsx b/frontend/src/components/billing/account-billing-status.tsx index 18121b5f..c2ddcea0 100644 --- a/frontend/src/components/billing/account-billing-status.tsx +++ b/frontend/src/components/billing/account-billing-status.tsx @@ -118,25 +118,17 @@ export default function AccountBillingStatus({ accountId, returnUrl }: Props) { {/* Plans Comparison */} - + - {/* Action Buttons */} -
- - -
+
+ {/* Manage Subscription Button */} + ) : ( <> @@ -164,7 +156,7 @@ export default function AccountBillingStatus({ accountId, returnUrl }: Props) { {/* Plans Comparison */} - + {/* Action Buttons */}
diff --git a/frontend/src/components/home/sections/pricing-section.tsx b/frontend/src/components/home/sections/pricing-section.tsx index 9f6af4c2..961a7144 100644 --- a/frontend/src/components/home/sections/pricing-section.tsx +++ b/frontend/src/components/home/sections/pricing-section.tsx @@ -5,16 +5,8 @@ import type { PricingTier } from '@/lib/home'; import { siteConfig } from '@/lib/home'; import { cn } from '@/lib/utils'; import { motion } from 'motion/react'; -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect } from 'react'; import { CheckIcon } from 'lucide-react'; -import Link from 'next/link'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { createCheckoutSession, @@ -26,7 +18,6 @@ import { isLocalMode } from '@/lib/config'; import { useSubscription } from '@/hooks/react-query'; // Constants -const DEFAULT_SELECTED_PLAN = '$50'; export const SUBSCRIPTION_PLANS = { FREE: 'free', PRO: 'base', @@ -53,16 +44,6 @@ interface PriceDisplayProps { isCompact?: boolean; } -interface CustomPriceDisplayProps { - price: string; -} - -interface UpgradePlan { - hours: string; - price: string; - stripePriceId: string; -} - interface PricingTierProps { tier: PricingTier; isCompact?: boolean; @@ -142,24 +123,6 @@ function PriceDisplay({ price, isCompact }: PriceDisplayProps) { ); } -function CustomPriceDisplay({ price }: CustomPriceDisplayProps) { - return ( - - {price} - - ); -} - function PricingTier({ tier, isCompact = false, @@ -173,37 +136,7 @@ function PricingTier({ returnUrl, insideDialog = false, }: PricingTierProps) { - const [localSelectedPlan, setLocalSelectedPlan] = useState( - selectedPlan || DEFAULT_SELECTED_PLAN, - ); - const hasInitialized = useRef(false); - - // Auto-select the correct plan only on initial load - useEffect(() => { - if ( - !hasInitialized.current && - tier.name === 'Custom' && - tier.upgradePlans && - currentSubscription?.price_id - ) { - const matchingPlan = tier.upgradePlans.find( - (plan) => plan.stripePriceId === currentSubscription.price_id, - ); - if (matchingPlan) { - setLocalSelectedPlan(matchingPlan.price); - } - hasInitialized.current = true; - } - }, [currentSubscription, tier.name, tier.upgradePlans]); - - // Only refetch when plan is selected - const handlePlanSelect = (value: string) => { - setLocalSelectedPlan(value); - if (tier.name === 'Custom' && onSubscriptionUpdate) { - onSubscriptionUpdate(); - } - }; - + // Auto-select the correct plan only on initial load - simplified since no more Custom tier const handleSubscribe = async (planStripePriceId: string) => { if (!isAuthenticated) { window.location.href = '/auth'; @@ -215,22 +148,11 @@ function PricingTier({ } try { - // For custom tier, get the selected plan's stripePriceId - let finalPriceId = planStripePriceId; - if (tier.name === 'Custom' && tier.upgradePlans) { - const selectedPlan = tier.upgradePlans.find( - (plan) => plan.price === localSelectedPlan, - ); - if (selectedPlan?.stripePriceId) { - finalPriceId = selectedPlan.stripePriceId; - } - } - - onPlanSelect?.(finalPriceId); + onPlanSelect?.(planStripePriceId); const response: CreateCheckoutSessionResponse = await createCheckoutSession({ - price_id: finalPriceId, + price_id: planStripePriceId, success_url: returnUrl, cancel_url: returnUrl, }); @@ -295,67 +217,12 @@ function PricingTier({ } }; - const getPriceValue = ( - tier: (typeof siteConfig.cloudPricingItems)[0], - selectedPrice?: string, - ): string => { - if (tier.upgradePlans && selectedPrice) { - const plan = tier.upgradePlans.find( - (plan) => plan.price === selectedPrice, - ); - if (plan) { - return plan.price; - } - } - return tier.price; - }; - - const getSelectedPlanPriceId = ( - tier: (typeof siteConfig.cloudPricingItems)[0], - ): string => { - if (tier.name === 'Custom' && tier.upgradePlans) { - const selectedPlan = tier.upgradePlans.find( - (plan) => plan.price === localSelectedPlan, - ); - return selectedPlan?.stripePriceId || tier.stripePriceId; - } - return tier.stripePriceId; - }; - - const getSelectedPlanPrice = ( - tier: (typeof siteConfig.cloudPricingItems)[0], - ): string => { - if (tier.name === 'Custom' && tier.upgradePlans) { - const selectedPlan = tier.upgradePlans.find( - (plan) => plan.price === localSelectedPlan, - ); - return selectedPlan?.price || tier.price; - } - return tier.price; - }; - - const tierPriceId = getSelectedPlanPriceId(tier); + const tierPriceId = tier.stripePriceId; const isCurrentActivePlan = - isAuthenticated && - // For custom tier, check if the selected plan matches the current subscription - (tier.name === 'Custom' - ? tier.upgradePlans?.some( - (plan) => - plan.price === localSelectedPlan && - plan.stripePriceId === currentSubscription?.price_id, - ) - : currentSubscription?.price_id === tierPriceId); + isAuthenticated && currentSubscription?.price_id === tierPriceId; const isScheduled = isAuthenticated && currentSubscription?.has_schedule; const isScheduledTargetPlan = - isScheduled && - // For custom tier, check if the selected plan matches the scheduled subscription - (tier.name === 'Custom' - ? tier.upgradePlans?.some( - (plan) => - plan.price === localSelectedPlan && - plan.stripePriceId === currentSubscription?.scheduled_price_id, - ) - : currentSubscription?.scheduled_price_id === tierPriceId); + isScheduled && currentSubscription?.scheduled_price_id === tierPriceId; const isPlanLoading = isLoading[tierPriceId]; let buttonText = isAuthenticated ? 'Select Plan' : 'Try Free'; @@ -402,41 +269,15 @@ function PricingTier({ ); } else { - // For custom tier, find the current plan in upgradePlans - const currentTier = - tier.name === 'Custom' && tier.upgradePlans - ? tier.upgradePlans.find( - (p) => p.stripePriceId === currentSubscription?.price_id, - ) - : siteConfig.cloudPricingItems.find( - (p) => p.stripePriceId === currentSubscription?.price_id, - ); - - // Find the highest active plan from upgradePlans - const highestActivePlan = siteConfig.cloudPricingItems.reduce( - (highest, item) => { - if (item.upgradePlans) { - const activePlan = item.upgradePlans.find( - (p) => p.stripePriceId === currentSubscription?.price_id, - ); - if (activePlan) { - const activeAmount = - parseFloat(activePlan.price.replace(/[^\d.]/g, '') || '0') * - 100; - const highestAmount = - parseFloat(highest?.price?.replace(/[^\d.]/g, '') || '0') * 100; - return activeAmount > highestAmount ? activePlan : highest; - } - } - return highest; - }, - null as { price: string; hours: string; stripePriceId: string } | null, + // Find the current tier + const currentTier = siteConfig.cloudPricingItems.find( + (p) => p.stripePriceId === currentSubscription?.price_id, ); const currentPriceString = currentSubscription - ? highestActivePlan?.price || currentTier?.price || '$0' + ? currentTier?.price || '$0' : '$0'; - const selectedPriceString = getSelectedPlanPrice(tier); + const selectedPriceString = tier.price; const currentAmount = currentPriceString === '$0' ? 0 @@ -492,14 +333,20 @@ function PricingTier({ return (
-
+

{tier.name} {tier.isPopular && ( @@ -510,54 +357,20 @@ function PricingTier({ {isAuthenticated && statusBadge}

- {tier.name === 'Custom' ? ( - - ) : ( - - )} + {tier.price !== '$0' ? '/month' : ''}

{tier.description}

- {tier.name === 'Custom' && tier.upgradePlans ? ( -
-

- Customize your monthly usage -

- -
- {localSelectedPlan}/month -
-
- ) : ( -
- {tier.price}/month -
- )} +
+ {tier.price}/month +
-
+
{tier.features && tier.features.length > 0 && (
    {tier.features.map((feature) => ( @@ -572,14 +385,17 @@ function PricingTier({ )}
-
+