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

packages/billing-gateway/src/components/current-plan-card.tsx

@@ -27,14 +27,33 @@ import { Trans } from '@kit/ui/trans';
 import { CurrentPlanAlert } from './current-plan-alert';
 import { CurrentPlanBadge } from './current-plan-badge';
 
+type Subscription = Database['public']['Tables']['subscriptions']['Row'];
+type LineItem = Database['public']['Tables']['subscription_items']['Row'];
+
+interface Props {
+  subscription: Subscription & {
+    items: LineItem[];
+  };
+
+  config: BillingConfig;
+}
+
 export function CurrentPlanCard({
   subscription,
   config,
-}: React.PropsWithChildren<{
-  subscription: Database['public']['Tables']['subscriptions']['Row'];
-  config: BillingConfig;
-}>) {
-  const { plan, product } = getProductPlanPair(config, subscription);
+}: React.PropsWithChildren<Props>) {
+  // line items have the same product id
+  const lineItem = subscription.items[0] as LineItem;
+
+  const product = config.products.find(
+    (product) => product.id === lineItem.product_id,
+  );
+
+  if (!product) {
+    throw new Error(
+      'Product not found. Make sure the product exists in the billing config.',
+    );
+  }
 
   return (
     <Card>
@@ -58,6 +77,7 @@ export function CurrentPlanCard({
             />
 
             <span>{product.name}</span>
+
             <CurrentPlanBadge status={subscription.status} />
           </div>
         </div>

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

@@ -96,7 +96,11 @@ export function PlanPicker(
 
   return (
     <Form {...form}>
-      <div className={'flex space-x-4'}>
+      <div
+        className={
+          'flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0'
+        }
+      >
         <form
           className={'flex w-full max-w-xl flex-col space-y-4'}
           onSubmit={form.handleSubmit(props.onSubmit)}