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"
   }
 }

packages/billing-gateway/src/components/plan-picker.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ArrowRight, CheckCircle } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
 import {
@@ -32,7 +33,6 @@ import {
   RadioGroupItem,
   RadioGroupItemLabel,
 } from '@kit/ui/radio-group';
-import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -40,6 +40,7 @@ export function PlanPicker(
   props: React.PropsWithChildren<{
     config: BillingConfig;
     onSubmit: (data: { planId: string; productId: string }) => void;
+    canStartTrial?: boolean;
     pending?: boolean;
   }>,
 ) {
@@ -94,6 +95,8 @@ export function PlanPicker(
     }
   }, [props.config, planId]);
 
+  const { t } = useTranslation(`billing`);
+
   return (
     <Form {...form}>
       <div
@@ -111,7 +114,7 @@ export function PlanPicker(
               return (
                 <FormItem className={'rounded-md border p-4'}>
                   <FormLabel htmlFor={'plan-picker-id'}>
-                    Choose your billing interval
+                    <Trans i18nKey={'common:billingInterval.label'} />
                   </FormLabel>
 
                   <FormControl id={'plan-picker-id'}>
@@ -148,7 +151,7 @@ export function PlanPicker(
 
                               <span className={'text-sm font-bold'}>
                                 <Trans
-                                  i18nKey={`common:billingInterval.${interval}`}
+                                  i18nKey={`billing:billingInterval.${interval}`}
                                 />
                               </span>
                             </label>
@@ -167,7 +170,9 @@ export function PlanPicker(
             name={'planId'}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Pick your preferred plan</FormLabel>
+                <FormLabel>
+                  <Trans i18nKey={'common:planPickerLabel'} />
+                </FormLabel>
 
                 <FormControl>
                   <RadioGroup name={field.name}>
@@ -215,10 +220,18 @@ export function PlanPicker(
                                 'flex flex-col justify-center space-y-2'
                               }
                             >
-                              <span className="font-bold">{product.name}</span>
+                              <span className="font-bold">
+                                <Trans
+                                  i18nKey={`billing:products.${product.id}.name`}
+                                  defaults={product.name}
+                                />
+                              </span>
 
                               <span className={'text-muted-foreground'}>
-                                {product.description}
+                                <Trans
+                                  i18nKey={`billing:products.${product.id}.description`}
+                                  defaults={product.description}
+                                />
                               </span>
                             </Label>
 
@@ -227,10 +240,19 @@ export function PlanPicker(
                                 'flex items-center space-x-4 text-right'
                               }
                             >
-                              <If condition={plan.trialPeriod}>
+                              <If
+                                condition={
+                                  plan.trialPeriod && props.canStartTrial
+                                }
+                              >
                                 <div>
                                   <Badge variant={'success'}>
-                                    {plan.trialPeriod} day trial
+                                    <Trans
+                                      i18nKey={`billing:trialPeriod`}
+                                      values={{
+                                        period: plan.trialPeriod,
+                                      }}
+                                    />
                                   </Badge>
                                 </div>
                               </If>
@@ -247,7 +269,12 @@ export function PlanPicker(
 
                                 <div>
                                   <span className={'text-muted-foreground'}>
-                                    per {selectedInterval}
+                                    <Trans
+                                      i18nKey={`billing:perPeriod`}
+                                      values={{
+                                        period: selectedInterval,
+                                      }}
+                                    />
                                   </span>
                                 </div>
                               </div>
@@ -267,14 +294,14 @@ export function PlanPicker(
           <div>
             <Button disabled={props.pending ?? !form.formState.isValid}>
               {props.pending ? (
-                'Processing...'
+                t('processing')
               ) : (
                 <>
                   <If
-                    condition={selectedPlan?.trialPeriod}
+                    condition={selectedPlan?.trialPeriod && props.canStartTrial}
-                    fallback={'Proceed to payment'}
+                    fallback={t(`proceedToPayment`)}
                   >
-                    <span>Start {selectedPlan?.trialPeriod} day trial</span>
+                    <span>{t(`startTrial`)}</span>
                   </If>
 
                   <ArrowRight className={'ml-2 h-4 w-4'} />
@@ -292,18 +319,32 @@ export function PlanPicker(
           >
             <div className={'flex flex-col space-y-0.5'}>
               <Heading level={5}>
-                <b>{selectedProduct?.name}</b>
+                <b>
+                  <Trans
+                    i18nKey={`billing:products.${selectedProduct?.id}.name`}
+                    defaults={selectedProduct?.name}
+                  />
+                </b>{' '}
+                /{' '}
+                <Trans
+                  i18nKey={`billing:billingInterval.${selectedInterval}`}
+                />
               </Heading>
 
               <p>
                 <span className={'text-muted-foreground'}>
-                  {selectedProduct?.description}
+                  <Trans
+                    i18nKey={`billing:products.${selectedProduct?.id}.description`}
+                    defaults={selectedProduct?.description}
+                  />
                 </span>
               </p>
             </div>
 
             <div className={'flex flex-col space-y-1'}>
-              <span className={'font-semibold'}>Details</span>
+              <span className={'font-semibold'}>
+                <Trans i18nKey={'billing:detailsLabel'} />
+              </span>
 
               <div className={'flex flex-col divide-y'}>
                 {selectedPlan?.lineItems.map((item) => {
@@ -316,7 +357,20 @@ export function PlanPicker(
                             'flex items-center justify-between py-1.5 text-sm'
                           }
                         >
-                          <span>{item.name}</span>
+                          <span className={'flex space-x-2'}>
+                            <span>
+                              <Trans i18nKey={'billing:flatSubscription'} />
+                            </span>
+
+                            <span>/</span>
+
+                            <span>
+                              <Trans
+                                i18nKey={`billing:billingInterval.${selectedInterval}`}
+                              />
+                            </span>
+                          </span>
+
                           <span className={'font-semibold'}>
                             {formatCurrency(
                               selectedProduct?.currency.toLowerCase(),
@@ -334,7 +388,10 @@ export function PlanPicker(
                             'flex items-center justify-between py-1.5 text-sm'
                           }
                         >
-                          <span>Per team member</span>
+                          <span>
+                            <Trans i18nKey={'billing:perTeamMember'} />
+                          </span>
+
                           <span className={'font-semibold'}>
                             {formatCurrency(
                               selectedProduct?.currency.toLowerCase(),
@@ -353,11 +410,25 @@ export function PlanPicker(
                           }
                         >
                           <span>
-                            Per {item.unit}
+                            <Trans
-                            {item.included
+                              i18nKey={'billing:perUnit'}
-                              ? ` (${item.included} included)`
+                              values={{
-                              : ''}
+                                unit: item.unit,
+                              }}
+                            />
+
+                            {item.included ? (
+                              <Trans
+                                i18nKey={'billing:perUnitIncluded'}
+                                values={{
+                                  included: item.included,
+                                }}
+                              />
+                            ) : (
+                              ''
+                            )}
                           </span>
+
                           <span className={'font-semibold'}>
                             {formatCurrency(
                               selectedProduct?.currency.toLowerCase(),
@@ -372,7 +443,9 @@ export function PlanPicker(
             </div>
 
             <div className={'flex flex-col space-y-2'}>
-              <span className={'font-semibold'}>Features</span>
+              <span className={'font-semibold'}>
+                <Trans i18nKey={'billing:featuresLabel'} />
+              </span>
 
               {selectedProduct?.features.map((item) => {
                 return (
@@ -382,7 +455,12 @@ export function PlanPicker(
                   >
                     <CheckCircle className={'h-4 text-green-500'} />
 
-                    <span className={'text-muted-foreground'}>{item}</span>
+                    <span className={'text-muted-foreground'}>
+                      <Trans
+                        i18nKey={`billing:features.${item}`}
+                        defaults={item}
+                      />
+                    </span>
                   </div>
                 );
               })}

packages/billing/src/create-billing-schema.ts

@@ -13,13 +13,39 @@ export const PaymentTypeSchema = z.enum(['one-time', 'recurring']);
 
 export const LineItemSchema = z
   .object({
-    id: z.string().min(1),
+    id: z
-    name: z.string().min(1),
+      .string({
-    description: z.string().optional(),
+        description:
-    cost: z.number().positive(),
+          'Unique identifier for the line item. Defined by the Provider.',
+      })
+      .min(1),
+    name: z
+      .string({
+        description: 'Name of the line item. Displayed to the user.',
+      })
+      .min(1),
+    description: z
+      .string({
+        description: 'Description of the line item. Displayed to the user.',
+      })
+      .optional(),
+    cost: z
+      .number({
+        description: 'Cost of the line item. Displayed to the user.',
+      })
+      .min(0),
     type: LineItemTypeSchema,
-    unit: z.string().optional(),
+    unit: z
-    included: z.number().optional(),
+      .string({
+        description:
+          'Unit of the line item. Displayed to the user. Example "seat" or "GB"',
+      })
+      .optional(),
+    included: z
+      .number({
+        description: 'Included amount of the line item. Displayed to the user.',
+      })
+      .optional(),
   })
   .refine((data) => data.type !== 'metered' || (data.unit && data.included), {
     message: 'Metered line items must have a unit and included amount',
@@ -28,12 +54,25 @@ export const LineItemSchema = z
 
 export const PlanSchema = z
   .object({
-    id: z.string().min(1),
+    id: z
-    name: z.string().min(1),
+      .string({
-    description: z.string().optional(),
+        description: 'Unique identifier for the plan. Defined by yourself.',
+      })
+      .min(1),
+    name: z
+      .string({
+        description: 'Name of the plan. Displayed to the user.',
+      })
+      .min(1),
     interval: BillingIntervalSchema.optional(),
     lineItems: z.array(LineItemSchema),
-    trialPeriod: z.number().optional(),
+    trialPeriod: z
+      .number({
+        description:
+          'Number of days for the trial period. Leave empty for no trial.',
+      })
+      .positive()
+      .optional(),
     paymentType: PaymentTypeSchema,
   })
   .refine((data) => data.lineItems.length > 0, {
@@ -68,13 +107,40 @@ export const PlanSchema = z
 
 const ProductSchema = z
   .object({
-    id: z.string().min(1),
+    id: z
-    name: z.string().min(1),
+      .string({
-    description: z.string().min(1),
+        description:
-    currency: z.string().min(1),
+          'Unique identifier for the product. Defined by th Provider.',
-    badge: z.string().optional(),
+      })
+      .min(1),
+    name: z
+      .string({
+        description: 'Name of the product. Displayed to the user.',
+      })
+      .min(1),
+    description: z
+      .string({
+        description: 'Description of the product. Displayed to the user.',
+      })
+      .min(1),
+    currency: z
+      .string({
+        description: 'Currency code for the product. Displayed to the user.',
+      })
+      .min(3)
+      .max(3),
+    badge: z
+      .string({
+        description:
+          'Badge for the product. Displayed to the user. Example: "Popular"',
+      })
+      .optional(),
     features: z.array(z.string()).nonempty(),
-    highlighted: z.boolean().optional(),
+    highlighted: z
+      .boolean({
+        description: 'Highlight this product. Displayed to the user.',
+      })
+      .optional(),
     plans: z.array(PlanSchema),
   })
   .refine((data) => data.plans.length > 0, {