Modify layout and improve subscription fetching

The layout for responsive designs has been updated in plan-picker component. Subscription type has been removed from billing/page.tsx and subscription fetching has been improved with additional query parameters in both billing/page.tsx and current-plan-card.tsx. Errors were also corrected in i18n translation keys in team-account-checkout-form.tsx. CurrentPlanCard's component props now includes line items in the subscription object. Changes in billing/page.tsx include adaptation of container width to be fully responsive.

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

@@ -18,8 +18,6 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { PersonalAccountCheckoutForm } from './_components/personal-account-checkout-form';
 
-type Subscription = Database['public']['Tables']['subscriptions']['Row'];
-
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
   const title = i18n.t('account:billingTab');
@@ -78,7 +76,7 @@ async function loadData(client: SupabaseClient<Database>) {
 
   const subscription = client
     .from('subscriptions')
-    .select<string, Subscription>('*')
+    .select('*, items: subscription_items !inner (*)')
     .eq('account_id', user.id)
     .maybeSingle()
     .then(({ data }) => data);

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

@@ -38,11 +38,11 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
     <Card>
       <CardHeader>
         <CardTitle>
-          <Trans i18nKey={'billing.manageTeamPlan'} />
+          <Trans i18nKey={'billing:manageTeamPlan'} />
         </CardTitle>
 
         <CardDescription>
-          <Trans i18nKey={'billing.manageTeamPlanDescription'} />
+          <Trans i18nKey={'billing:manageTeamPlanDescription'} />
         </CardDescription>
       </CardHeader>
 

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

@@ -35,6 +35,7 @@ async function TeamAccountBillingPage({ params }: Params) {
   const workspace = await loadTeamWorkspace(params.account);
   const accountId = workspace.account.id;
   const [subscription, customerId] = await loadAccountData(accountId);
+
   const canManageBilling =
     workspace.account.permissions.includes('billing.manage');
 
@@ -46,7 +47,7 @@ async function TeamAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <div className={'mx-auto w-full max-w-2xl'}>
+        <div className={'mx-auto w-full'}>
           <If condition={!canManageBilling}>
             <CannotManageBillingAlert />
           </If>
@@ -100,7 +101,7 @@ async function loadAccountData(accountId: string) {
 
   const subscription = client
     .from('subscriptions')
-    .select('*')
+    .select('*, items: subscription_items !inner (*)')
     .eq('account_id', accountId)
     .maybeSingle()
     .then(({ data }) => data);