diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx index b39cef2d5..dda8834ba 100644 --- a/packages/billing/gateway/src/components/plan-picker.tsx +++ b/packages/billing/gateway/src/components/plan-picker.tsx @@ -265,16 +265,38 @@ export function PlanPicker( 'flex flex-col justify-center space-y-2' } > - - - +
+ + + + + +
+ + + +
+
+
@@ -285,23 +307,6 @@ export function PlanPicker( 'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right' } > - -
- - - -
-
-
@@ -416,7 +421,7 @@ function PlanDetails({ {' '} @@ -428,7 +433,7 @@ function PlanDetails({

@@ -464,7 +469,7 @@ function PlanDetails({ - +

); diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx index 57a0ab342..00d737067 100644 --- a/packages/billing/gateway/src/components/pricing-table.tsx +++ b/packages/billing/gateway/src/components/pricing-table.tsx @@ -4,7 +4,8 @@ import { useState } from 'react'; import Link from 'next/link'; -import { ArrowRight, CheckCircle, Circle, Sparkles } from 'lucide-react'; +import { ArrowRight, CheckCircle, Circle } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; import { z } from 'zod'; import { @@ -167,7 +168,7 @@ function PricingItem( >
-
+
- - - -
- +
+ +
{formatCurrency(props.product.currency, props.primaryLineItem.cost)} @@ -311,10 +310,7 @@ function FeaturesList( {props.features.map((feature) => { return ( - + ); })} @@ -426,6 +422,8 @@ function DefaultCheckoutButton( ? '?redirectToCheckout=true' : ''; + const { t } = useTranslation('billing'); + const planId = props.plan.id; const signUpPath = props.paths.signUp; const subscriptionPath = props.paths.subscription; @@ -449,7 +447,9 @@ function DefaultCheckoutButton( i18nKey={label} defaults={label} values={{ - plan: props.product.name, + plan: t(props.product.name, { + defaultValue: props.product.name, + }), }} />