setBillingPeriod('yearly_commitment')}
+ >
Yearly
);
- } else if (isScheduled && currentSubscription?.price_id === tierPriceId) {
+ } else if (isScheduled && currentSubscription?.price_id === priceId) {
buttonText = 'Change Scheduled';
buttonVariant = 'secondary';
ringClass = isCompact ? 'ring-1 ring-primary' : 'ring-2 ring-primary';
@@ -322,7 +362,7 @@ function PricingTier({
const currentPriceString = currentSubscription
? currentTier?.price || '$0'
: '$0';
- const selectedPriceString = tier.price;
+ const selectedPriceString = displayPrice;
const currentAmount =
currentPriceString === '$0'
? 0
@@ -332,13 +372,22 @@ function PricingTier({
? 0
: parseFloat(selectedPriceString.replace(/[^\d.]/g, '') || '0') * 100;
- // Check if current subscription is monthly and target is yearly for same tier
+ // Check if current subscription is monthly and target is yearly commitment for same tier
const currentIsMonthly = currentTier && currentSubscription?.price_id === currentTier.stripePriceId;
const currentIsYearly = currentTier && currentSubscription?.price_id === currentTier.yearlyStripePriceId;
- const targetIsMonthly = tier.stripePriceId === tierPriceId;
- const targetIsYearly = tier.yearlyStripePriceId === tierPriceId;
- const isSameTierDifferentBilling = currentTier && currentTier.name === tier.name &&
- ((currentIsMonthly && targetIsYearly) || (currentIsYearly && targetIsMonthly));
+ const currentIsYearlyCommitment = currentTier && currentSubscription?.price_id === currentTier.monthlyCommitmentStripePriceId;
+ const targetIsMonthly = priceId === tier.stripePriceId;
+ const targetIsYearly = priceId === tier.yearlyStripePriceId;
+ const targetIsYearlyCommitment = priceId === tier.monthlyCommitmentStripePriceId;
+ const isSameTierUpgradeToLongerTerm = currentTier && currentTier.name === tier.name &&
+ ((currentIsMonthly && (targetIsYearly || targetIsYearlyCommitment)) ||
+ (currentIsYearlyCommitment && targetIsYearly));
+
+ const isSameTierDowngradeToShorterTerm = currentTier && currentTier.name === tier.name &&
+ ((currentIsYearly && targetIsMonthly) ||
+ (currentIsYearlyCommitment && targetIsMonthly));
+
+ // Use the plan change validation already computed above
if (
currentAmount === 0 &&
@@ -349,18 +398,25 @@ function PricingTier({
buttonDisabled = true;
buttonVariant = 'secondary';
buttonClassName = 'bg-primary/5 hover:bg-primary/10 text-primary';
+ } else if (!planChangeValidation.allowed) {
+ // Plan change not allowed due to business rules
+ buttonText = 'Not Available';
+ buttonDisabled = true;
+ buttonVariant = 'secondary';
+ buttonClassName = 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground';
} else {
- if (targetAmount > currentAmount || (currentIsMonthly && targetIsYearly && targetAmount >= currentAmount)) {
- // Allow upgrade to higher tier OR switch from monthly to yearly at same/higher tier
- // But prevent yearly to monthly switches even if target amount is higher
- if (currentIsYearly && targetIsMonthly) {
- buttonText = '-';
- buttonDisabled = true;
- buttonVariant = 'secondary';
- buttonClassName =
- 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground';
- } else if (currentIsMonthly && targetIsYearly && targetAmount === currentAmount) {
- buttonText = 'Switch to Yearly';
+ if (targetAmount > currentAmount || isSameTierUpgradeToLongerTerm) {
+ // Allow upgrade to higher tier OR upgrade to longer term on same tier
+ if (currentIsMonthly && targetIsYearlyCommitment && targetAmount <= currentAmount) {
+ buttonText = 'Subscribe for one year';
+ buttonVariant = 'default';
+ buttonClassName = 'bg-green-600 hover:bg-green-700 text-white';
+ } else if (currentIsMonthly && targetIsYearly && targetAmount <= currentAmount) {
+ buttonText = 'Switch to Legacy Yearly';
+ buttonVariant = 'default';
+ buttonClassName = 'bg-green-600 hover:bg-green-700 text-white';
+ } else if (currentIsYearlyCommitment && targetIsYearly && currentTier?.name === tier.name) {
+ buttonText = 'Switch to Legacy Yearly';
buttonVariant = 'default';
buttonClassName = 'bg-green-600 hover:bg-green-700 text-white';
} else {
@@ -368,36 +424,16 @@ function PricingTier({
buttonVariant = tier.buttonColor as ButtonVariant;
buttonClassName = 'bg-primary hover:bg-primary/90 text-primary-foreground';
}
- } else if (targetAmount < currentAmount && !(currentIsYearly && targetIsMonthly && targetAmount === currentAmount)) {
- buttonText = '-';
+ } else if (targetAmount < currentAmount || isSameTierDowngradeToShorterTerm) {
+ // Prevent downgrades and downgrades to shorter terms
+ buttonText = 'Not Available';
buttonDisabled = true;
buttonVariant = 'secondary';
- buttonClassName =
- 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground';
- } else if (isSameTierDifferentBilling) {
- // Allow switching between monthly and yearly for same tier
- if (currentIsMonthly && targetIsYearly) {
- buttonText = 'Switch to Yearly';
- buttonVariant = 'default';
- buttonClassName = 'bg-green-600 hover:bg-green-700 text-white';
- } else if (currentIsYearly && targetIsMonthly) {
- // Prevent downgrade from yearly to monthly
- buttonText = '-';
- buttonDisabled = true;
- buttonVariant = 'secondary';
- buttonClassName =
- 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground';
- } else {
- buttonText = 'Select Plan';
- buttonVariant = tier.buttonColor as ButtonVariant;
- buttonClassName =
- 'bg-primary hover:bg-primary/90 text-primary-foreground';
- }
+ buttonClassName = 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground';
} else {
buttonText = 'Select Plan';
buttonVariant = tier.buttonColor as ButtonVariant;
- buttonClassName =
- 'bg-primary hover:bg-primary/90 text-primary-foreground';
+ buttonClassName = 'bg-primary hover:bg-primary/90 text-primary-foreground';
}
}
}
@@ -439,19 +475,24 @@ function PricingTier({
Popular
)}
- {/* Show upgrade badge for yearly plans when user is on monthly */}
- {!tier.isPopular && isAuthenticated && currentSubscription && billingPeriod === 'yearly' &&
- currentTier && currentSubscription.price_id === currentTier.stripePriceId &&
- tier.yearlyStripePriceId && (currentTier.name === tier.name ||
- parseFloat(tier.price.slice(1)) >= parseFloat(currentTier.price.slice(1))) && (
-
- )}
+ {/* Show upgrade badge for yearly commitment plans when user is on monthly */}
{isAuthenticated && statusBadge}
- {billingPeriod === 'yearly' && tier.yearlyPrice && displayPrice !== '$0' ? (
+ {billingPeriod === 'yearly_commitment' && tier.monthlyCommitmentStripePriceId ? (
+
+
+
+
+ ${tier.price.slice(1)}
+
+
+
+ /month
+ for one year
+
+
+ ) : billingPeriod === 'yearly' && tier.yearlyPrice && displayPrice !== '$0' ? (
@@ -475,7 +516,11 @@ function PricingTier({
{tier.description}
- {billingPeriod === 'yearly' && tier.yearlyPrice && tier.discountPercentage ? (
+ {billingPeriod === 'yearly_commitment' && tier.monthlyCommitmentStripePriceId ? (
+
+ Save ${Math.round((parseFloat(tier.price.slice(1)) - parseFloat(displayPrice.slice(1))) * 12)} per year
+
+ ) : billingPeriod === 'yearly' && tier.yearlyPrice && tier.discountPercentage ? (
Save ${Math.round(parseFloat(tier.originalYearlyPrice?.slice(1) || '0') - parseFloat(tier.yearlyPrice.slice(1)))} per year
@@ -512,7 +557,7 @@ function PricingTier({
insideDialog ? "px-3 pt-1 pb-3" : "px-4 pt-2 pb-4"
)}>
handleSubscribe(tierPriceId)}
+ onClick={() => handleSubscribe(priceId)}
disabled={buttonDisabled}
variant={buttonVariant || 'default'}
className={cn(
@@ -521,6 +566,7 @@ function PricingTier({
buttonClassName,
isPlanLoading && 'animate-pulse',
)}
+ title={!planChangeValidation.allowed ? planChangeValidation.reason : undefined}
>
{buttonText}
@@ -546,43 +592,49 @@ export function PricingSection({
'cloud',
);
const { data: subscriptionData, isLoading: isFetchingPlan, error: subscriptionQueryError, refetch: refetchSubscription } = useSubscription();
+ const subCommitmentQuery = useSubscriptionCommitment(subscriptionData?.subscription_id);
// Derive authentication and subscription status from the hook data
const isAuthenticated = !!subscriptionData && subscriptionQueryError === null;
const currentSubscription = subscriptionData || null;
// Determine default billing period based on user's current subscription
- const getDefaultBillingPeriod = (): 'monthly' | 'yearly' => {
+ const getDefaultBillingPeriod = useCallback((): 'monthly' | 'yearly' | 'yearly_commitment' => {
if (!isAuthenticated || !currentSubscription) {
- // Default to yearly for non-authenticated users or users without subscription
- return 'yearly';
+ // Default to yearly_commitment for non-authenticated users (the new yearly plans)
+ return 'yearly_commitment';
}
- // Find current tier to determine if user is on monthly or yearly plan
+ // Find current tier to determine if user is on monthly, yearly, or yearly commitment plan
const currentTier = siteConfig.cloudPricingItems.find(
- (p) => p.stripePriceId === currentSubscription.price_id || p.yearlyStripePriceId === currentSubscription.price_id,
+ (p) => p.stripePriceId === currentSubscription.price_id ||
+ p.yearlyStripePriceId === currentSubscription.price_id ||
+ p.monthlyCommitmentStripePriceId === currentSubscription.price_id,
);
if (currentTier) {
- // Check if current subscription is yearly
- if (currentTier.yearlyStripePriceId === currentSubscription.price_id) {
+ // Check if current subscription is yearly commitment (new yearly)
+ if (currentTier.monthlyCommitmentStripePriceId === currentSubscription.price_id) {
+ return 'yearly_commitment';
+ } else if (currentTier.yearlyStripePriceId === currentSubscription.price_id) {
+ // Legacy yearly plans
return 'yearly';
} else if (currentTier.stripePriceId === currentSubscription.price_id) {
return 'monthly';
}
}
- // Default to yearly if we can't determine current plan type
- return 'yearly';
- };
+ // Default to yearly_commitment (new yearly) if we can't determine current plan type
+ return 'yearly_commitment';
+ }, [isAuthenticated, currentSubscription]);
- const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly'>(getDefaultBillingPeriod());
+ const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly' | 'yearly_commitment'>(getDefaultBillingPeriod());
const [planLoadingStates, setPlanLoadingStates] = useState
>({});
// Update billing period when subscription data changes
useEffect(() => {
setBillingPeriod(getDefaultBillingPeriod());
- }, [isAuthenticated, currentSubscription?.price_id]);
+ }, [getDefaultBillingPeriod]);
const handlePlanSelect = (planId: string) => {
setPlanLoadingStates((prev) => ({ ...prev, [planId]: true }));
@@ -590,6 +642,7 @@ export function PricingSection({
const handleSubscriptionUpdate = () => {
refetchSubscription();
+ subCommitmentQuery.refetch();
// The useSubscription hook will automatically refetch, so we just need to clear loading states
setTimeout(() => {
setPlanLoadingStates({});
@@ -699,6 +752,6 @@ export function PricingSection({
-
+
);
}
diff --git a/frontend/src/hooks/react-query/accounts/use-account-by-slug.ts b/frontend/src/hooks/react-query/accounts/use-account-by-slug.ts
new file mode 100644
index 00000000..029442ca
--- /dev/null
+++ b/frontend/src/hooks/react-query/accounts/use-account-by-slug.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { createClient } from '@/lib/supabase/client';
+
+export function useAccountBySlug(slug: string) {
+ const supabaseClient = createClient();
+
+ return useQuery({
+ queryKey: ['account', 'by-slug', slug],
+ queryFn: async () => {
+ const { data, error } = await supabaseClient.rpc('get_account_by_slug', {
+ slug,
+ });
+
+ if (error) {
+ throw new Error(error.message);
+ }
+
+ return data;
+ },
+ enabled: !!slug && !!supabaseClient,
+ });
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/react-query/index.ts b/frontend/src/hooks/react-query/index.ts
index 715f5294..05d0eb1c 100644
--- a/frontend/src/hooks/react-query/index.ts
+++ b/frontend/src/hooks/react-query/index.ts
@@ -17,6 +17,8 @@ export * from './files/use-sandbox-mutations';
export * from './subscriptions/use-subscriptions';
export * from './subscriptions/use-billing';
+export * from './accounts/use-account-by-slug';
+
export * from './dashboard/use-initiate-agent';
export * from './usage/use-health';
diff --git a/frontend/src/hooks/react-query/subscriptions/keys.ts b/frontend/src/hooks/react-query/subscriptions/keys.ts
index 763e3a62..cfe25cae 100644
--- a/frontend/src/hooks/react-query/subscriptions/keys.ts
+++ b/frontend/src/hooks/react-query/subscriptions/keys.ts
@@ -7,6 +7,7 @@ const usageKeysBase = ['usage'] as const;
export const subscriptionKeys = createQueryKeys({
all: subscriptionKeysBase,
details: () => [...subscriptionKeysBase, 'details'] as const,
+ commitment: (subscriptionId: string) => [...subscriptionKeysBase, 'commitment', subscriptionId] as const,
});
export const modelKeys = createQueryKeys({
diff --git a/frontend/src/hooks/react-query/subscriptions/use-subscriptions.ts b/frontend/src/hooks/react-query/subscriptions/use-subscriptions.ts
index 0711e3fb..a4617d06 100644
--- a/frontend/src/hooks/react-query/subscriptions/use-subscriptions.ts
+++ b/frontend/src/hooks/react-query/subscriptions/use-subscriptions.ts
@@ -3,8 +3,10 @@
import { createMutationHook, createQueryHook } from '@/hooks/use-query';
import {
getSubscription,
+ getSubscriptionCommitment,
createPortalSession,
SubscriptionStatus,
+ CommitmentInfo,
} from '@/lib/api';
import { subscriptionKeys } from './keys';
import { useQuery } from '@tanstack/react-query';
@@ -63,6 +65,16 @@ export const useCreatePortalSession = createMutationHook(
},
);
+export const useSubscriptionCommitment = (subscriptionId?: string) => {
+ return useQuery({
+ queryKey: subscriptionKeys.commitment(subscriptionId || ''),
+ queryFn: () => getSubscriptionCommitment(subscriptionId!),
+ enabled: !!subscriptionId,
+ staleTime: 1000 * 60 * 5, // 5 minutes
+ refetchOnWindowFocus: false,
+ });
+};
+
export const isPlan = (
subscriptionData: SubscriptionStatus | null | undefined,
planId?: string,
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index c8f6a810..218f2231 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1589,6 +1589,7 @@ export interface CreateCheckoutSessionRequest {
success_url: string;
cancel_url: string;
referral_id?: string;
+ commitment_type?: 'monthly' | 'yearly' | 'yearly_commitment';
}
export interface CreatePortalSessionRequest {
@@ -1598,19 +1599,97 @@ export interface CreatePortalSessionRequest {
export interface SubscriptionStatus {
status: string; // Includes 'active', 'trialing', 'past_due', 'scheduled_downgrade', 'no_subscription'
plan_name?: string;
- price_id?: string; // Added
- current_period_end?: string; // ISO Date string
- cancel_at_period_end: boolean;
- trial_end?: string; // ISO Date string
+ price_id?: string;
+ current_period_end?: string; // ISO datetime string
+ cancel_at_period_end?: boolean;
+ trial_end?: string; // ISO datetime string
minutes_limit?: number;
cost_limit?: number;
current_usage?: number;
// Fields for scheduled changes
- has_schedule: boolean;
+ has_schedule?: boolean;
scheduled_plan_name?: string;
- scheduled_price_id?: string; // Added
- scheduled_change_date?: string; // ISO Date string - Deprecate? Check backend usage
- schedule_effective_date?: string; // ISO Date string - Added for consistency
+ scheduled_price_id?: string;
+ scheduled_change_date?: string; // ISO datetime string
+ // Subscription data for frontend components
+ subscription_id?: string;
+ subscription?: {
+ id: string;
+ status: string;
+ cancel_at_period_end: boolean;
+ current_period_end: number; // timestamp
+ };
+}
+
+export interface CommitmentInfo {
+ has_commitment: boolean;
+ commitment_type?: string;
+ months_remaining?: number;
+ can_cancel: boolean;
+ commitment_end_date?: string;
+}
+
+// Interface for user subscription details from Stripe
+export interface UserSubscriptionResponse {
+ subscription?: {
+ id: string;
+ status: string;
+ current_period_end: number;
+ current_period_start: number;
+ cancel_at_period_end: boolean;
+ cancel_at?: number;
+ items: {
+ data: Array<{
+ id: string;
+ price: {
+ id: string;
+ unit_amount: number;
+ currency: string;
+ recurring: {
+ interval: string;
+ interval_count: number;
+ };
+ };
+ quantity: number;
+ }>;
+ };
+ metadata: {
+ [key: string]: string;
+ };
+ };
+ price_id?: string;
+ plan_name?: string;
+ status?: string;
+ has_schedule?: boolean;
+ scheduled_price_id?: string;
+ current_period_end?: number;
+ current_period_start?: number;
+ cancel_at_period_end?: boolean;
+ cancel_at?: number;
+ customer_email?: string;
+ usage?: {
+ total_usage: number;
+ limit: number;
+ };
+}
+
+// Usage log entry interface
+export interface UsageLogEntry {
+ id: string;
+ user_id: string;
+ model: string;
+ input_tokens: number;
+ output_tokens: number;
+ cost_usd: number;
+ timestamp: string;
+ session_type?: string;
+}
+
+// Usage logs response interface
+export interface UsageLogsResponse {
+ logs: UsageLogEntry[];
+ has_more: boolean;
+ message?: string;
}
export interface BillingStatusResponse {
@@ -1640,28 +1719,6 @@ export interface AvailableModelsResponse {
total_models: number;
}
-export interface UsageLogEntry {
- message_id: string;
- thread_id: string;
- created_at: string;
- content: {
- usage: {
- prompt_tokens: number;
- completion_tokens: number;
- };
- model: string;
- };
- total_tokens: number;
- estimated_cost: number;
- project_id: string;
-}
-
-export interface UsageLogsResponse {
- logs: UsageLogEntry[];
- has_more: boolean;
- message?: string;
-}
-
export interface CreateCheckoutSessionResponse {
status:
| 'upgraded'
@@ -1670,7 +1727,9 @@ export interface CreateCheckoutSessionResponse {
| 'no_change'
| 'new'
| 'updated'
- | 'scheduled';
+ | 'scheduled'
+ | 'commitment_created'
+ | 'commitment_blocks_downgrade';
subscription_id?: string;
schedule_id?: string;
session_id?: string;
@@ -1682,6 +1741,8 @@ export interface CreateCheckoutSessionResponse {
effective_date?: string;
current_price?: number;
new_price?: number;
+ commitment_end_date?: string;
+ months_remaining?: number;
invoice?: {
id: string;
status: string;
@@ -1691,6 +1752,31 @@ export interface CreateCheckoutSessionResponse {
};
}
+export interface CancelSubscriptionResponse {
+ success: boolean;
+ status: 'cancelled_at_period_end' | 'commitment_prevents_cancellation';
+ message: string;
+ details?: {
+ subscription_id?: string;
+ cancellation_effective_date?: string;
+ current_period_end?: number;
+ access_until?: string;
+ months_remaining?: number;
+ commitment_end_date?: string;
+ can_cancel_after?: string;
+ };
+}
+
+export interface ReactivateSubscriptionResponse {
+ success: boolean;
+ status: 'reactivated' | 'not_cancelled';
+ message: string;
+ details?: {
+ subscription_id?: string;
+ next_billing_date?: string;
+ };
+}
+
// Billing API Functions
export const createCheckoutSession = async (
request: CreateCheckoutSessionRequest,
@@ -1849,6 +1935,48 @@ export const getSubscription = async (): Promise
=> {
}
};
+export const getSubscriptionCommitment = async (subscriptionId: string): Promise => {
+ try {
+ const supabase = createClient();
+ const {
+ data: { session },
+ } = await supabase.auth.getSession();
+
+ if (!session?.access_token) {
+ throw new NoAccessTokenAvailableError();
+ }
+
+ const response = await fetch(`${API_URL}/billing/subscription-commitment/${subscriptionId}`, {
+ headers: {
+ Authorization: `Bearer ${session.access_token}`,
+ },
+ });
+
+ if (!response.ok) {
+ const errorText = await response
+ .text()
+ .catch(() => 'No error details available');
+ console.error(
+ `Error getting subscription commitment: ${response.status} ${response.statusText}`,
+ errorText,
+ );
+ throw new Error(
+ `Error getting subscription commitment: ${response.statusText} (${response.status})`,
+ );
+ }
+
+ return response.json();
+ } catch (error) {
+ if (error instanceof NoAccessTokenAvailableError) {
+ throw error;
+ }
+
+ console.error('Failed to get subscription commitment:', error);
+ handleApiError(error, { operation: 'load subscription commitment', resource: 'commitment information' });
+ throw error;
+ }
+};
+
export const getAvailableModels = async (): Promise => {
try {
const supabase = createClient();
@@ -1933,6 +2061,86 @@ export const checkBillingStatus = async (): Promise => {
}
};
+export const cancelSubscription = async (): Promise => {
+ try {
+ const supabase = createClient();
+ const {
+ data: { session },
+ } = await supabase.auth.getSession();
+
+ if (!session?.access_token) {
+ throw new NoAccessTokenAvailableError();
+ }
+
+ const response = await fetch(`${API_URL}/billing/cancel-subscription`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${session.access_token}`,
+ },
+ });
+
+ if (!response.ok) {
+ const errorText = await response
+ .text()
+ .catch(() => 'No error details available');
+ console.error(
+ `Error cancelling subscription: ${response.status} ${response.statusText}`,
+ errorText,
+ );
+ throw new Error(
+ `Error cancelling subscription: ${response.statusText} (${response.status})`,
+ );
+ }
+
+ return response.json();
+ } catch (error) {
+ console.error('Failed to cancel subscription:', error);
+ handleApiError(error, { operation: 'cancel subscription', resource: 'subscription' });
+ throw error;
+ }
+};
+
+export const reactivateSubscription = async (): Promise => {
+ try {
+ const supabase = createClient();
+ const {
+ data: { session },
+ } = await supabase.auth.getSession();
+
+ if (!session?.access_token) {
+ throw new NoAccessTokenAvailableError();
+ }
+
+ const response = await fetch(`${API_URL}/billing/reactivate-subscription`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${session.access_token}`,
+ },
+ });
+
+ if (!response.ok) {
+ const errorText = await response
+ .text()
+ .catch(() => 'No error details available');
+ console.error(
+ `Error reactivating subscription: ${response.status} ${response.statusText}`,
+ errorText,
+ );
+ throw new Error(
+ `Error reactivating subscription: ${response.statusText} (${response.status})`,
+ );
+ }
+
+ return response.json();
+ } catch (error) {
+ console.error('Failed to reactivate subscription:', error);
+ handleApiError(error, { operation: 'reactivate subscription', resource: 'subscription' });
+ throw error;
+ }
+};
+
// Transcription API Types
export interface TranscriptionResponse {
text: string;
diff --git a/frontend/src/lib/config.ts b/frontend/src/lib/config.ts
index 0ee80e9c..d5d4a7f3 100644
--- a/frontend/src/lib/config.ts
+++ b/frontend/src/lib/config.ts
@@ -29,6 +29,10 @@ export interface SubscriptionTiers {
TIER_50_400_YEARLY: SubscriptionTierData;
TIER_125_800_YEARLY: SubscriptionTierData;
TIER_200_1000_YEARLY: SubscriptionTierData;
+ // Yearly commitment plans (15% discount, monthly payments with 12-month commitment)
+ TIER_2_17_YEARLY_COMMITMENT: SubscriptionTierData;
+ TIER_6_42_YEARLY_COMMITMENT: SubscriptionTierData;
+ TIER_25_170_YEARLY_COMMITMENT: SubscriptionTierData;
}
// Configuration object
@@ -72,34 +76,47 @@ const PROD_TIERS: SubscriptionTiers = {
priceId: 'price_1RILb3G6l1KZGqIrmauYPOiN',
name: '200h/$1000',
},
- // Yearly plans with 15% discount (12x monthly price with 15% off)
+ // Legacy yearly plans with 15% discount (12x monthly price with 15% off)
TIER_2_20_YEARLY: {
priceId: 'price_1ReHB5G6l1KZGqIrD70I1xqM',
- name: '2h/$204/year',
+ name: '2h/$204/year (legacy)',
},
TIER_6_50_YEARLY: {
priceId: 'price_1ReHAsG6l1KZGqIrlAog487C',
- name: '6h/$510/year',
+ name: '6h/$510/year (legacy)',
},
TIER_12_100_YEARLY: {
priceId: 'price_1ReHAWG6l1KZGqIrBHer2PQc',
- name: '12h/$1020/year',
+ name: '12h/$1020/year (legacy)',
},
TIER_25_200_YEARLY: {
priceId: 'price_1ReH9uG6l1KZGqIrsvMLHViC',
- name: '25h/$2040/year',
+ name: '25h/$2040/year (legacy)',
},
TIER_50_400_YEARLY: {
priceId: 'price_1ReH9fG6l1KZGqIrsPtu5KIA',
- name: '50h/$4080/year',
+ name: '50h/$4080/year (legacy)',
},
TIER_125_800_YEARLY: {
priceId: 'price_1ReH9GG6l1KZGqIrfgqaJyat',
- name: '125h/$8160/year',
+ name: '125h/$8160/year (legacy)',
},
TIER_200_1000_YEARLY: {
priceId: 'price_1ReH8qG6l1KZGqIrK1akY90q',
- name: '200h/$10200/year',
+ name: '200h/$10200/year (legacy)',
+ },
+ // Yearly commitment plans (15% discount, monthly payments with 12-month commitment)
+ TIER_2_17_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYGaG6l1KZGqIrIzcdPzeQ',
+ name: '2h/$17/month (yearly)',
+ },
+ TIER_6_42_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYH1G6l1KZGqIrWDKh8xIU',
+ name: '6h/$42.50/month (yearly)',
+ },
+ TIER_25_170_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYHbG6l1KZGqIrAUVf8KpG',
+ name: '25h/$170/month (yearly)',
},
} as const;
@@ -137,34 +154,47 @@ const STAGING_TIERS: SubscriptionTiers = {
priceId: 'price_1RIKQ2G6l1KZGqIrum9n8SI7',
name: '200h/$1000',
},
- // Yearly plans with 15% discount (12x monthly price with 15% off)
+ // Legacy yearly plans with 15% discount (12x monthly price with 15% off)
TIER_2_20_YEARLY: {
priceId: 'price_1ReGogG6l1KZGqIrEyBTmtPk',
- name: '2h/$204/year',
+ name: '2h/$204/year (legacy)',
},
TIER_6_50_YEARLY: {
priceId: 'price_1ReGoJG6l1KZGqIr0DJWtoOc',
- name: '6h/$510/year',
+ name: '6h/$510/year (legacy)',
},
TIER_12_100_YEARLY: {
priceId: 'price_1ReGnZG6l1KZGqIr0ThLEl5S',
- name: '12h/$1020/year',
+ name: '12h/$1020/year (legacy)',
},
TIER_25_200_YEARLY: {
priceId: 'price_1ReGmzG6l1KZGqIre31mqoEJ',
- name: '25h/$2040/year',
+ name: '25h/$2040/year (legacy)',
},
TIER_50_400_YEARLY: {
priceId: 'price_1ReGmgG6l1KZGqIrn5nBc7e5',
- name: '50h/$4080/year',
+ name: '50h/$4080/year (legacy)',
},
TIER_125_800_YEARLY: {
priceId: 'price_1ReGmMG6l1KZGqIrvE2ycrAX',
- name: '125h/$8160/year',
+ name: '125h/$8160/year (legacy)',
},
TIER_200_1000_YEARLY: {
priceId: 'price_1ReGlXG6l1KZGqIrlgurP5GU',
- name: '200h/$10200/year',
+ name: '200h/$10200/year (legacy)',
+ },
+ // Yearly commitment plans (15% discount, monthly payments with 12-month commitment)
+ TIER_2_17_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYGaG6l1KZGqIrIzcdPzeQ',
+ name: '2h/$17/month (yearly)',
+ },
+ TIER_6_42_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYH1G6l1KZGqIrWDKh8xIU',
+ name: '6h/$42.50/month (yearly)',
+ },
+ TIER_25_170_YEARLY_COMMITMENT: {
+ priceId: 'price_1RqYHbG6l1KZGqIrAUVf8KpG',
+ name: '25h/$170/month (yearly)',
},
} as const;
@@ -213,5 +243,151 @@ export const isLocalMode = (): boolean => {
return config.IS_LOCAL;
};
+// Yearly commitment plan mappings with tier levels (higher number = higher tier)
+const YEARLY_COMMITMENT_PLANS = {
+ 'price_1RqYGaG6l1KZGqIrIzcdPzeQ': { tier: 1, name: '2h/$17/month (yearly)' }, // TIER_2_17_YEARLY_COMMITMENT
+ 'price_1RqYH1G6l1KZGqIrWDKh8xIU': { tier: 2, name: '6h/$42.50/month (yearly)' }, // TIER_6_42_YEARLY_COMMITMENT
+ 'price_1RqYHbG6l1KZGqIrAUVf8KpG': { tier: 3, name: '25h/$170/month (yearly)' }, // TIER_25_170_YEARLY_COMMITMENT
+} as const;
+
+// Helper functions for yearly commitment plans
+export const isYearlyCommitmentPlan = (priceId: string): boolean => {
+ return priceId in YEARLY_COMMITMENT_PLANS;
+};
+
+export const getYearlyCommitmentTier = (priceId: string): number => {
+ return YEARLY_COMMITMENT_PLANS[priceId as keyof typeof YEARLY_COMMITMENT_PLANS]?.tier ?? 0;
+};
+
+export const isYearlyCommitmentDowngrade = (currentPriceId: string, newPriceId: string): boolean => {
+ // Check if both are yearly commitment plans
+ if (!isYearlyCommitmentPlan(currentPriceId) || !isYearlyCommitmentPlan(newPriceId)) {
+ return false;
+ }
+
+ const currentTier = getYearlyCommitmentTier(currentPriceId);
+ const newTier = getYearlyCommitmentTier(newPriceId);
+
+ return newTier < currentTier;
+};
+
+// Plan type identification functions
+export const isMonthlyPlan = (priceId: string): boolean => {
+ const allTiers = config.SUBSCRIPTION_TIERS;
+ const monthlyTiers = [
+ allTiers.TIER_2_20, allTiers.TIER_6_50, allTiers.TIER_12_100,
+ allTiers.TIER_25_200, allTiers.TIER_50_400, allTiers.TIER_125_800,
+ allTiers.TIER_200_1000
+ ];
+ return monthlyTiers.some(tier => tier.priceId === priceId);
+};
+
+export const isYearlyPlan = (priceId: string): boolean => {
+ const allTiers = config.SUBSCRIPTION_TIERS;
+ const yearlyTiers = [
+ allTiers.TIER_2_20_YEARLY, allTiers.TIER_6_50_YEARLY, allTiers.TIER_12_100_YEARLY,
+ allTiers.TIER_25_200_YEARLY, allTiers.TIER_50_400_YEARLY, allTiers.TIER_125_800_YEARLY,
+ allTiers.TIER_200_1000_YEARLY
+ ];
+ return yearlyTiers.some(tier => tier.priceId === priceId);
+};
+
+// Tier level mappings for all plan types
+const PLAN_TIERS = {
+ // Monthly plans
+ [PROD_TIERS.TIER_2_20.priceId]: { tier: 1, type: 'monthly', name: '2h/$20' },
+ [PROD_TIERS.TIER_6_50.priceId]: { tier: 2, type: 'monthly', name: '6h/$50' },
+ [PROD_TIERS.TIER_12_100.priceId]: { tier: 3, type: 'monthly', name: '12h/$100' },
+ [PROD_TIERS.TIER_25_200.priceId]: { tier: 4, type: 'monthly', name: '25h/$200' },
+ [PROD_TIERS.TIER_50_400.priceId]: { tier: 5, type: 'monthly', name: '50h/$400' },
+ [PROD_TIERS.TIER_125_800.priceId]: { tier: 6, type: 'monthly', name: '125h/$800' },
+ [PROD_TIERS.TIER_200_1000.priceId]: { tier: 7, type: 'monthly', name: '200h/$1000' },
+
+ // Yearly plans
+ [PROD_TIERS.TIER_2_20_YEARLY.priceId]: { tier: 1, type: 'yearly', name: '2h/$204/year' },
+ [PROD_TIERS.TIER_6_50_YEARLY.priceId]: { tier: 2, type: 'yearly', name: '6h/$510/year' },
+ [PROD_TIERS.TIER_12_100_YEARLY.priceId]: { tier: 3, type: 'yearly', name: '12h/$1020/year' },
+ [PROD_TIERS.TIER_25_200_YEARLY.priceId]: { tier: 4, type: 'yearly', name: '25h/$2040/year' },
+ [PROD_TIERS.TIER_50_400_YEARLY.priceId]: { tier: 5, type: 'yearly', name: '50h/$4080/year' },
+ [PROD_TIERS.TIER_125_800_YEARLY.priceId]: { tier: 6, type: 'yearly', name: '125h/$8160/year' },
+ [PROD_TIERS.TIER_200_1000_YEARLY.priceId]: { tier: 7, type: 'yearly', name: '200h/$10200/year' },
+
+ // Yearly commitment plans
+ [PROD_TIERS.TIER_2_17_YEARLY_COMMITMENT.priceId]: { tier: 1, type: 'yearly_commitment', name: '2h/$17/month' },
+ [PROD_TIERS.TIER_6_42_YEARLY_COMMITMENT.priceId]: { tier: 2, type: 'yearly_commitment', name: '6h/$42.50/month' },
+ [PROD_TIERS.TIER_25_170_YEARLY_COMMITMENT.priceId]: { tier: 4, type: 'yearly_commitment', name: '25h/$170/month' },
+
+ // Staging plans
+ [STAGING_TIERS.TIER_2_20.priceId]: { tier: 1, type: 'monthly', name: '2h/$20' },
+ [STAGING_TIERS.TIER_6_50.priceId]: { tier: 2, type: 'monthly', name: '6h/$50' },
+ [STAGING_TIERS.TIER_12_100.priceId]: { tier: 3, type: 'monthly', name: '12h/$100' },
+ [STAGING_TIERS.TIER_25_200.priceId]: { tier: 4, type: 'monthly', name: '25h/$200' },
+ [STAGING_TIERS.TIER_50_400.priceId]: { tier: 5, type: 'monthly', name: '50h/$400' },
+ [STAGING_TIERS.TIER_125_800.priceId]: { tier: 6, type: 'monthly', name: '125h/$800' },
+ [STAGING_TIERS.TIER_200_1000.priceId]: { tier: 7, type: 'monthly', name: '200h/$1000' },
+
+ [STAGING_TIERS.TIER_2_20_YEARLY.priceId]: { tier: 1, type: 'yearly', name: '2h/$204/year' },
+ [STAGING_TIERS.TIER_6_50_YEARLY.priceId]: { tier: 2, type: 'yearly', name: '6h/$510/year' },
+ [STAGING_TIERS.TIER_12_100_YEARLY.priceId]: { tier: 3, type: 'yearly', name: '12h/$1020/year' },
+ [STAGING_TIERS.TIER_25_200_YEARLY.priceId]: { tier: 4, type: 'yearly', name: '25h/$2040/year' },
+ [STAGING_TIERS.TIER_50_400_YEARLY.priceId]: { tier: 5, type: 'yearly', name: '50h/$4080/year' },
+ [STAGING_TIERS.TIER_125_800_YEARLY.priceId]: { tier: 6, type: 'yearly', name: '125h/$8160/year' },
+ [STAGING_TIERS.TIER_200_1000_YEARLY.priceId]: { tier: 7, type: 'yearly', name: '200h/$10200/year' },
+
+ [STAGING_TIERS.TIER_2_17_YEARLY_COMMITMENT.priceId]: { tier: 1, type: 'yearly_commitment', name: '2h/$17/month' },
+ [STAGING_TIERS.TIER_6_42_YEARLY_COMMITMENT.priceId]: { tier: 2, type: 'yearly_commitment', name: '6h/$42.50/month' },
+ [STAGING_TIERS.TIER_25_170_YEARLY_COMMITMENT.priceId]: { tier: 4, type: 'yearly_commitment', name: '25h/$170/month' },
+} as const;
+
+export const getPlanInfo = (priceId: string) => {
+ return PLAN_TIERS[priceId as keyof typeof PLAN_TIERS] || { tier: 0, type: 'unknown', name: 'Unknown' };
+};
+
+// Plan change validation function
+export const isPlanChangeAllowed = (currentPriceId: string, newPriceId: string): { allowed: boolean; reason?: string } => {
+ const currentPlan = getPlanInfo(currentPriceId);
+ const newPlan = getPlanInfo(newPriceId);
+
+ // Allow if same plan
+ if (currentPriceId === newPriceId) {
+ return { allowed: true };
+ }
+
+ // Restriction 1: Don't allow downgrade from monthly to lower monthly
+ if (currentPlan.type === 'monthly' && newPlan.type === 'monthly' && newPlan.tier < currentPlan.tier) {
+ return {
+ allowed: false,
+ reason: 'Downgrading to a lower monthly plan is not allowed. You can only upgrade to a higher tier or switch to yearly billing.'
+ };
+ }
+
+ // Restriction 2: Don't allow downgrade from yearly commitment to monthly
+ if (currentPlan.type === 'yearly_commitment' && newPlan.type === 'monthly') {
+ return {
+ allowed: false,
+ reason: 'Downgrading from yearly commitment to monthly is not allowed. You can only upgrade within yearly commitment plans.'
+ };
+ }
+
+ // Restriction 2b: Don't allow downgrade within yearly commitment plans
+ if (currentPlan.type === 'yearly_commitment' && newPlan.type === 'yearly_commitment' && newPlan.tier < currentPlan.tier) {
+ return {
+ allowed: false,
+ reason: 'Downgrading to a lower yearly commitment plan is not allowed. You can only upgrade to higher commitment tiers.'
+ };
+ }
+
+ // Restriction 3: Only allow upgrade from monthly to yearly commitment on same level or above
+ if (currentPlan.type === 'monthly' && newPlan.type === 'yearly_commitment' && newPlan.tier < currentPlan.tier) {
+ return {
+ allowed: false,
+ reason: 'You can only upgrade to yearly commitment plans at the same tier level or higher.'
+ };
+ }
+
+ // Allow all other changes (upgrades, yearly to yearly, yearly commitment upgrades, etc.)
+ return { allowed: true };
+};
+
// Export subscription tier type for typing elsewhere
export type SubscriptionTier = keyof typeof PROD_TIERS;
diff --git a/frontend/src/lib/home.tsx b/frontend/src/lib/home.tsx
index 82495a2a..bcc0ebdb 100644
--- a/frontend/src/lib/home.tsx
+++ b/frontend/src/lib/home.tsx
@@ -49,6 +49,7 @@ export interface PricingTier {
features: string[];
stripePriceId: string;
yearlyStripePriceId?: string; // Add yearly price ID support
+ monthlyCommitmentStripePriceId?: string; // Add monthly commitment with yearly commitment support
upgradePlans: UpgradePlan[];
hidden?: boolean; // Optional property to hide plans from display while keeping them in code
billingPeriod?: 'monthly' | 'yearly'; // Add billing period support
@@ -150,6 +151,7 @@ export const siteConfig = {
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_20_YEARLY.priceId,
+ monthlyCommitmentStripePriceId: config.SUBSCRIPTION_TIERS.TIER_2_17_YEARLY_COMMITMENT.priceId,
upgradePlans: [],
},
{
@@ -172,6 +174,7 @@ export const siteConfig = {
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_50_YEARLY.priceId,
+ monthlyCommitmentStripePriceId: config.SUBSCRIPTION_TIERS.TIER_6_42_YEARLY_COMMITMENT.priceId,
upgradePlans: [],
},
{
@@ -202,9 +205,9 @@ export const siteConfig = {
yearlyPrice: '$2040',
originalYearlyPrice: '$2400',
discountPercentage: 15,
- description: 'For power users and teams',
+ description: 'For power users',
buttonText: 'Start Free',
- buttonColor: 'bg-primary text-white dark:text-black',
+ buttonColor: 'bg-secondary text-white',
isPopular: false,
hours: '25 hours',
features: [
@@ -215,6 +218,7 @@ export const siteConfig = {
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_200_YEARLY.priceId,
+ monthlyCommitmentStripePriceId: config.SUBSCRIPTION_TIERS.TIER_25_170_YEARLY_COMMITMENT.priceId,
upgradePlans: [],
},
{
@@ -223,7 +227,7 @@ export const siteConfig = {
yearlyPrice: '$4080',
originalYearlyPrice: '$4800',
discountPercentage: 15,
- description: 'For large organizations',
+ description: 'For large teams',
buttonText: 'Start Free',
buttonColor: 'bg-secondary text-white',
isPopular: false,
@@ -232,10 +236,8 @@ export const siteConfig = {
'$400 AI token credits/month',
'Private projects',
'Premium AI Models',
- 'Full Suna AI access',
- 'Community support',
+ 'Priority support',
'Custom integrations',
- 'Dedicated account manager',
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_50_400_YEARLY.priceId,
@@ -248,7 +250,7 @@ export const siteConfig = {
yearlyPrice: '$8160',
originalYearlyPrice: '$9600',
discountPercentage: 15,
- description: 'For scaling enterprises',
+ description: 'For scaling teams',
buttonText: 'Start Free',
buttonColor: 'bg-secondary text-white',
isPopular: false,
@@ -257,11 +259,9 @@ export const siteConfig = {
'$800 AI token credits/month',
'Private projects',
'Premium AI Models',
- 'Full Suna AI access',
- 'Community support',
+ 'Priority support',
'Custom integrations',
'Dedicated account manager',
- 'Custom SLA',
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_125_800.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_125_800_YEARLY.priceId,
@@ -269,12 +269,12 @@ export const siteConfig = {
hidden: true,
},
{
- name: 'Premium',
+ name: 'Max',
price: '$1000',
yearlyPrice: '$10200',
originalYearlyPrice: '$12000',
discountPercentage: 15,
- description: 'For maximum scale and performance',
+ description: 'Maximum performance',
buttonText: 'Start Free',
buttonColor: 'bg-secondary text-white',
isPopular: false,
@@ -283,12 +283,10 @@ export const siteConfig = {
'$1000 AI token credits/month',
'Private projects',
'Premium AI Models',
- 'Full Suna AI access',
'Priority support',
'Custom integrations',
'Dedicated account manager',
- 'Custom SLA',
- 'White-label options',
+ 'Custom deployment',
],
stripePriceId: config.SUBSCRIPTION_TIERS.TIER_200_1000.priceId,
yearlyStripePriceId: config.SUBSCRIPTION_TIERS.TIER_200_1000_YEARLY.priceId,