diff --git a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx index 9e793b7b5..6a725d5f9 100644 --- a/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx +++ b/apps/builder/src/features/billing/components/ProPlanPricingCard.tsx @@ -39,6 +39,7 @@ type Props = { | 'plan' | 'customChatsLimit' | 'customStorageLimit' + | 'stripeId' > currentSubscription: { isYearly?: boolean @@ -130,6 +131,14 @@ export const ProPlanPricingCard = ({ }) } + const price = + computePrice( + Plan.PRO, + selectedChatsLimitIndex ?? 0, + selectedStorageLimitIndex ?? 0, + isYearly ? 'yearly' : 'monthly' + ) ?? NaN + return ( - {formatPrice( - computePrice( - Plan.PRO, - selectedChatsLimitIndex ?? 0, - selectedStorageLimitIndex ?? 0, - isYearly ? 'yearly' : 'monthly' - ) ?? NaN, - currency - )} + {formatPrice(price, currency)} {scopedT('perMonth')} @@ -275,15 +276,22 @@ export const ProPlanPricingCard = ({ scopedT('pro.analytics'), ]} /> - + + {isYearly && workspace.stripeId && !isCurrentPlan && ( + + You pay {formatPrice(price * 12, currency)} / year + + )} + + diff --git a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx index 4a556557f..039a0aad3 100644 --- a/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx +++ b/apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx @@ -35,6 +35,7 @@ type Props = { | 'plan' | 'customChatsLimit' | 'customStorageLimit' + | 'stripeId' > currentSubscription: { isYearly?: boolean @@ -128,6 +129,14 @@ export const StarterPlanPricingCard = ({ }) } + const price = + computePrice( + Plan.STARTER, + selectedChatsLimitIndex ?? 0, + selectedStorageLimitIndex ?? 0, + isYearly ? 'yearly' : 'monthly' + ) ?? NaN + return ( @@ -138,15 +147,7 @@ export const StarterPlanPricingCard = ({ {scopedT('starter.description')} - {formatPrice( - computePrice( - Plan.STARTER, - selectedChatsLimitIndex ?? 0, - selectedStorageLimitIndex ?? 0, - isYearly ? 'yearly' : 'monthly' - ) ?? NaN, - currency - )} + {formatPrice(price, currency)} {scopedT('perMonth')} - + + {isYearly && workspace.stripeId && !isCurrentPlan && ( + + You pay: {formatPrice(price * 12, currency)} / year + + )} + + ) }