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/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();