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.

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