Adjusted Per seat billing and added example to the sample schema

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

@@ -50,7 +50,7 @@ async function PersonalAccountBillingPage() {
       />
 
       <PageBody>
-        <div className={'flex flex-col space-y-8'}>
+        <div className={'flex flex-col space-y-4'}>
           <If condition={!data}>
             <PersonalAccountCheckoutForm customerId={customerId} />
 

apps/web/app/(dashboard)/home/[account]/billing/_lib/server/team-billing.service.ts

@@ -242,7 +242,11 @@ export class TeamBillingService {
     }> = [];
 
     for (const lineItem of lineItems) {
-      if (lineItem.type === 'per-seat') {
+      // check if the line item is a per seat type
+      const isPerSeat = lineItem.type === 'per_seat';
+
+      if (isPerSeat) {
+        // get the current number of members in the account
         const quantity = await this.getCurrentMembersCount(accountId);
 
         const item = {
@@ -254,6 +258,7 @@ export class TeamBillingService {
       }
     }
 
+    // set initial quantity for the line items
     return variantQuantities;
   }
 

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

@@ -80,7 +80,7 @@ async function TeamAccountBillingPage({ params }: Params) {
 
       <PageBody>
         <div
-          className={cn(`flex w-full flex-col space-y-6`, {
+          className={cn(`flex w-full flex-col space-y-4`, {
             'mx-auto max-w-2xl': data,
           })}
         >

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

@@ -54,18 +54,24 @@ async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
         />
       </div>
 
-      <div
-        className={
-          'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
-          ' !m-0 h-full'
-        }
-      />
+      <BlurryBackdrop />
     </>
   );
 }
 
 export default withI18n(ReturnCheckoutSessionPage);
 
+function BlurryBackdrop() {
+  return (
+    <div
+      className={
+        'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
+        ' !m-0 h-full'
+      }
+    />
+  );
+}
+
 async function loadCheckoutSession(sessionId: string) {
   const client = getSupabaseServerComponentClient();
   const { error } = await requireUser(client);