Adjusted Per seat billing and added example to the sample schema

packages/billing/gateway/src/components/embedded-checkout.tsx

@@ -20,10 +20,14 @@ export function EmbeddedCheckout(
   );
 
   return (
-    <CheckoutComponent
-      onClose={props.onClose}
-      checkoutToken={props.checkoutToken}
-    />
+    <>
+      <CheckoutComponent
+        onClose={props.onClose}
+        checkoutToken={props.checkoutToken}
+      />
+
+      <BlurryBackdrop />
+    </>
   );
 }
 
@@ -98,3 +102,14 @@ function buildLazyComponent<
 
   return memo(LazyComponent);
 }
+
+function BlurryBackdrop() {
+  return (
+    <div
+      className={
+        'bg-background/30 fixed left-0 top-0 w-full backdrop-blur-sm' +
+        ' !m-0 h-full'
+      }
+    />
+  );
+}

packages/billing/gateway/src/components/line-item-details.tsx

@@ -61,7 +61,7 @@ export function LineItemDetails(
         );
 
         const FlatFee = () => (
-          <div key={item.id} className={'flex flex-col'}>
+          <div className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
@@ -115,8 +115,8 @@ export function LineItemDetails(
         );
 
         const PerSeat = () => (
-          <div className={'flex flex-col'}>
-            <div key={item.id} className={className}>
+          <div key={index} className={'flex flex-col'}>
+            <div className={className}>
               <span className={'flex items-center space-x-1.5'}>
                 <PlusSquare className={'w-4'} />
 
@@ -141,7 +141,7 @@ export function LineItemDetails(
         );
 
         const Metered = () => (
-          <div key={item.id} className={'flex flex-col'}>
+          <div key={index} className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
@@ -179,13 +179,13 @@ export function LineItemDetails(
 
         switch (item.type) {
           case 'flat':
-            return <FlatFee />;
+            return <FlatFee key={item.id} />;
 
-          case 'per-seat':
-            return <PerSeat />;
+          case 'per_seat':
+            return <PerSeat key={item.id} />;
 
           case 'metered': {
-            return <Metered />;
+            return <Metered key={item.id} />;
           }
         }
       })}

packages/billing/gateway/src/components/pricing-table.tsx

@@ -232,7 +232,7 @@ function PricingItem(
                     `animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
                   )}
                 >
-                  <If condition={props.primaryLineItem.type === 'per-seat'}>
+                  <If condition={props.primaryLineItem.type === 'per_seat'}>
                     <Trans i18nKey={'billing:perTeamMember'} />
                   </If>