Update translations and add trial eligibility in plan picker

Added translations in "plan-picker" for better localization support. Introduced a new functionality to check trial eligibility where existing customers can't start a trial. Removed unnecessary billing line items like 'per-seat' and 'metered'. Also, made significant changes in multiple files to align with the updated internationalization best practices. The changes aim to make application more user-friendly across different locales and provide accurate trial period conditions.

apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx

@@ -20,11 +20,16 @@ import billingConfig from '~/config/billing.config';
 
 import { createPersonalAccountCheckoutSession } from '../server-actions';
 
-export function PersonalAccountCheckoutForm() {
+export function PersonalAccountCheckoutForm(props: {
+  customerId: string | null | undefined;
+}) {
   const [pending, startTransition] = useTransition();
   const [error, setError] = useState(false);
   const [checkoutToken, setCheckoutToken] = useState<string>();
 
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !props.customerId;
+
   // If the checkout token is set, render the embedded checkout component
   if (checkoutToken) {
     return (
@@ -40,10 +45,12 @@ export function PersonalAccountCheckoutForm() {
     <div>
       <Card>
         <CardHeader>
-          <CardTitle>Manage your Plan</CardTitle>
+          <CardTitle>
+            <Trans i18nKey={'common:planCardLabel'} />
+          </CardTitle>
 
           <CardDescription>
-            You can change your plan at any time.
+            <Trans i18nKey={'common:planCardDescription'} />
           </CardDescription>
         </CardHeader>
 
@@ -55,6 +62,7 @@ export function PersonalAccountCheckoutForm() {
           <PlanPicker
             pending={pending}
             config={billingConfig}
+            canStartTrial={canStartTrial}
             onSubmit={({ planId, productId }) => {
               startTransition(async () => {
                 try {

apps/web/app/(dashboard)/home/(user)/billing/page.tsx

@@ -42,7 +42,7 @@ async function PersonalAccountBillingPage() {
         <div className={'flex flex-col space-y-8'}>
           <If
             condition={subscription}
-            fallback={<PersonalAccountCheckoutForm />}
+            fallback={<PersonalAccountCheckoutForm customerId={customerId} />}
           >
             {(subscription) => (
               <CurrentPlanCard

apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -18,7 +18,10 @@ import billingConfig from '~/config/billing.config';
 
 import { createTeamAccountCheckoutSession } from '../server-actions';
 
-export function TeamAccountCheckoutForm(params: { accountId: string }) {
+export function TeamAccountCheckoutForm(params: {
+  accountId: string;
+  customerId: string | null | undefined;
+}) {
   const routeParams = useParams();
   const [pending, startTransition] = useTransition();
   const [checkoutToken, setCheckoutToken] = useState<string | null>(null);
@@ -33,6 +36,9 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
     );
   }
 
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !params.customerId;
+
   // Otherwise, render the plan picker component
   return (
     <Card>
@@ -50,6 +56,7 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
         <PlanPicker
           pending={pending}
           config={billingConfig}
+          canStartTrial={canStartTrial}
           onSubmit={({ planId, productId }) => {
             startTransition(async () => {
               const slug = routeParams.account as string;

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -57,7 +57,10 @@ async function TeamAccountBillingPage({ params }: Params) {
               condition={subscription}
               fallback={
                 <If condition={canManageBilling}>
-                  <TeamAccountCheckoutForm accountId={accountId} />
+                  <TeamAccountCheckoutForm
+                    customerId={customerId}
+                    accountId={accountId}
+                  />
                 </If>
               }
             >
@@ -89,6 +92,7 @@ function CannotManageBillingAlert() {
       <AlertTitle>
         <Trans i18nKey={'billing:cannotManageBillingAlertTitle'} />
       </AlertTitle>
+
       <AlertDescription>
         <Trans i18nKey={'billing:cannotManageBillingAlertDescription'} />
       </AlertDescription>