Refactor billing gateway and enhance localization

Refactored the 'plan-picker' component in the billing gateway to remove unwanted line items and improve checkout session and subscription handling. Enhanced the localization support by adding translations in the plan picker and introduced a new function to check trial eligibility so that existing customers can't start a new trial period. These changes enhance the usability of the application across different regions and provide accurate trial period conditions.

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

@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
 import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
-import { Alert, AlertTitle } from '@kit/ui/alert';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
   Card,
   CardContent,
@@ -91,8 +91,12 @@ function ErrorAlert() {
       <ExclamationTriangleIcon className={'h-4'} />
 
       <AlertTitle>
-        <Trans i18nKey={'common:genericError'} />
+        <Trans i18nKey={'common:planPickerAlertErrorTitle'} />
       </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'common:planPickerAlertErrorDescription'} />
+      </AlertDescription>
     </Alert>
   );
 }

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

@@ -40,22 +40,29 @@ async function PersonalAccountBillingPage() {
 
       <PageBody>
         <div className={'flex flex-col space-y-8'}>
-          <If
-            condition={subscription}
-            fallback={<PersonalAccountCheckoutForm customerId={customerId} />}
-          >
-            {(subscription) => (
-              <CurrentPlanCard
-                subscription={subscription}
-                config={billingConfig}
-              />
-            )}
+          <If condition={!subscription}>
+            <PersonalAccountCheckoutForm customerId={customerId} />
+
+            <If condition={customerId}>
+              <CustomerBillingPortalForm />
+            </If>
           </If>
 
-          <If condition={customerId}>
-            <form action={createPersonalAccountBillingPortalSession}>
-              <BillingPortalCard />
-            </form>
+          <If condition={subscription}>
+            {(subscription) => (
+              <div
+                className={'mx-auto flex w-full max-w-2xl flex-col space-y-4'}
+              >
+                <CurrentPlanCard
+                  subscription={subscription}
+                  config={billingConfig}
+                />
+
+                <If condition={customerId}>
+                  <CustomerBillingPortalForm />
+                </If>
+              </div>
+            )}
           </If>
         </div>
       </PageBody>
@@ -65,6 +72,14 @@ async function PersonalAccountBillingPage() {
 
 export default withI18n(PersonalAccountBillingPage);
 
+function CustomerBillingPortalForm() {
+  return (
+    <form action={createPersonalAccountBillingPortalSession}>
+      <BillingPortalCard />
+    </form>
+  );
+}
+
 async function loadData(client: SupabaseClient<Database>) {
   const { data, error } = await client.auth.getUser();
 

apps/web/app/(dashboard)/home/(user)/billing/server-actions.ts

@@ -14,16 +14,24 @@ import appConfig from '~/config/app.config';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
 
+const CreateCheckoutSchema = z.object({
+  planId: z.string(),
+  productId: z.string(),
+});
+
 /**
  * Creates a checkout session for a personal account.
  *
  * @param {object} params - The parameters for creating the checkout session.
  * @param {string} params.planId - The ID of the plan to be associated with the account.
  */
-export async function createPersonalAccountCheckoutSession(params: {
-  planId: string;
-  productId: string;
-}) {
+export async function createPersonalAccountCheckoutSession(
+  params: z.infer<typeof CreateCheckoutSchema>,
+) {
+  // parse the parameters
+  const { planId, productId } = CreateCheckoutSchema.parse(params);
+
+  // get the authenticated user
   const client = getSupabaseServerActionClient();
   const { data: user, error } = await requireUser(client);
 
@@ -31,13 +39,6 @@ export async function createPersonalAccountCheckoutSession(params: {
     throw new Error('Authentication required');
   }
 
-  const { planId, productId } = z
-    .object({
-      planId: z.string().min(1),
-      productId: z.string().min(1),
-    })
-    .parse(params);
-
   Logger.info(
     {
       planId,

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

@@ -52,31 +52,33 @@ async function TeamAccountBillingPage({ params }: Params) {
             <CannotManageBillingAlert />
           </If>
 
-          <div className={'flex flex-col space-y-4'}>
-            <If
-              condition={subscription}
-              fallback={
-                <If condition={canManageBilling}>
-                  <TeamAccountCheckoutForm
-                    customerId={customerId}
-                    accountId={accountId}
-                  />
-                </If>
-              }
-            >
-              {(data) => (
-                <CurrentPlanCard subscription={data} config={billingConfig} />
-              )}
-            </If>
+          <div>
+            <div className={'flex flex-col space-y-2'}>
+              <If
+                condition={subscription}
+                fallback={
+                  <If condition={canManageBilling}>
+                    <TeamAccountCheckoutForm
+                      customerId={customerId}
+                      accountId={accountId}
+                    />
+                  </If>
+                }
+              >
+                {(data) => (
+                  <CurrentPlanCard subscription={data} config={billingConfig} />
+                )}
+              </If>
 
-            <If condition={customerId && canManageBilling}>
-              <form action={createBillingPortalSession}>
-                <input type="hidden" name={'accountId'} value={accountId} />
-                <input type="hidden" name={'slug'} value={params.account} />
+              <If condition={customerId && canManageBilling}>
+                <form action={createBillingPortalSession}>
+                  <input type="hidden" name={'accountId'} value={accountId} />
+                  <input type="hidden" name={'slug'} value={params.account} />
 
-                <BillingPortalCard />
-              </form>
-            </If>
+                  <BillingPortalCard />
+                </form>
+              </If>
+            </div>
           </div>
         </div>
       </PageBody>

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

@@ -37,6 +37,9 @@
   "detailsLabel": "Details",
   "planPickerLabel": "Pick your preferred plan",
   "planCardLabel": "Manage your Plan",
+  "planPickerAlertErrorTitle": "Error requesting checkout",
+    "planPickerAlertErrorDescription": "There was an error requesting checkout. Please try again later.",
+  "cancelSubscriptionDate": "Your subscription will be cancelled at the end of the period",
   "status": {
     "free": {
       "badge": "Free Plan",