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>

apps/web/config/billing.config.ts

@@ -28,22 +28,6 @@ export default createBillingSchema({
               cost: 9.99,
               type: 'base',
             },
-            {
-              id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe6',
-              name: 'Per Seat',
-              description: 'Add-on plan',
-              cost: 1.99,
-              type: 'per-seat',
-            },
-            {
-              id: 'price_1NNwYHI1i3VnbZTqI2UzaHIe7',
-              name: 'Metered',
-              description: 'Metered plan',
-              cost: 0.99,
-              type: 'metered',
-              unit: 'GB',
-              included: 10,
-            },
           ],
         },
         {

apps/web/public/locales/en/billing.json

@@ -20,6 +20,23 @@
   "cannotManageBillingAlertDescription": "You do not have permissions to manage billing. Please contact your organization owner.",
   "manageTeamPlan": "Manage your Team Plan",
   "manageTeamPlanDescription": "Choose a plan that fits your team's needs. You can upgrade or downgrade your plan at any time.",
+  "flatSubscription": "Flat Subscription",
+  "billingInterval": {
+    "label": "Choose your billing interval",
+    "month": "Billed monthly",
+    "year": "Billed yearly"
+  },
+  "trialPeriod": "{{period}} day trial",
+  "perPeriod": "per {{period}}",
+  "processing": "Processing...",
+  "proceedToPayment": "Proceed to Payment",
+  "startTrial": "Start Trial",
+  "perTeamMember": "Per team member",
+  "perUnitIncluded": "({{included}} included)",
+  "featuresLabel": "Features",
+  "detailsLabel": "Details",
+  "planPickerLabel": "Pick your preferred plan",
+  "planCardLabel": "Manage your Plan",
   "status": {
     "free": {
       "badge": "Free Plan",

apps/web/public/locales/en/common.json

@@ -57,9 +57,5 @@
       "label": "Member",
       "description": "Cannot invite members or change settings"
     }
-  },
-  "billingInterval": {
-    "month": "Billed monthly",
-    "year": "Billed yearly"
   }
 }